【Swift】コネクションインスペクタを使って部品とソースコードの紐付けを管理する。(Swift 2.1、XCode 7.2)

2020年6月16日

部品とソースコードを紐付ける

前回までの記事で、ボタンやテキストフィールドをソースコードにドラッグ&ドロップで運び、部品とコードのコネクションを確立する方法を説明してきた。⇒「記事

本記事では部品とソースコードのコネクションについてもう少し詳しく説明する。まずは前回までと同じように部品をデバイス画面にドラッグ&ドラッグで運んで配置する。

デバイス画面に部品を配置する

 

次に、下図黄緑枠の○ボタンを押してデバイス画面の右側にUIViewControllerのソースコードを表示する。

続いて、デバイス画面に配置したラベルをソースコードにドラッグ&ドロップで運ぶ(下図赤矢印)。Connectionは「Outlet」を選択する。これでプログラムからラベルの状態を変更できるようになった。

続いて、デバース画面に配置したボタンをソースコードにドラッグ&ドロップで運ぶ(下図青矢印)。Connectionは「Action」を選択する。これでボタンを押しときのイベントをプログラムが検知できるようになった。

部品をソースコードに運ぶ

 

以上で部品とソースコードのコネクションが確立された。UIViewControllerに追加されたコードは以下になる。

 

@IBOutlet、@IBActionとは

@IBOutletとは、部品に接続しているプロパティを表している。@IBActionとは、部品と接続して呼び出されるメソッドを表している。

確かに、コネクションを確立させたので@IBOutlet、@IBActionが付加されていても問題ないが、これだけだとどのボタンが押されたときにこのメソッドが呼ばれるのかが分からない。

例えば、デバイス画面に3個のボタンを配置して、そのうちの1個をソースコードに運んでコネクションを確立したが、3個のボタンのうち、どれをどのように押したら追加したメソッドが呼ばれるのか分からないということだ。

ボタンを3個配置

部品とソースコードの紐付けを確認する。

そこで利用されるのがコネクションインスペクタの画面である。デバイス画面上の部品をクリックしたあと、下図赤枠のボタンを押すとコネクションインスペクタ(Connection Inspector)という画面に切り替わる。ここに部品のイベントとメソッドの紐付けが記載されている。

下図では「Touch Up Inside ⇒ View Controller evetTouchUpInside」が記載されている。これは、部品にイベント「Touch Up Inside(押して離す)」が発生した場合、ViewControllerのevetTouchUpInsideメソッドが呼び出されることを表している。

このように、部品を選択してコネクションインスペクタを確認すれば、その部品からどのメソッドが呼び出されるかを知ることができる。

コネクションインスペクタを確認する

 

もっと簡単に確認する方法がある。Ctrlキーを押しながらデバイス画面上の部品をクリックするのだ。すると、その部品のコネクション情報が表示される。この方がデバイス画面とコネクションインスペクタを行ったり来たりする必要がなくなるので楽だ。ちなみに、右クリックでもいい。

デバイス画面からコネクションを確認

 

部品とソースコードの紐付けを修正する。

コネクションインスペクタは部品とコネクション状況を確認するだけでは無く、コネクションを修正、削除するのにも利用する。

例えば、eventTouchUpInsideメソッドのスペルを間違ってevetTouchUpInsideで登録していることに後で気がついたとする。

そんなときは、まず下図青枠の×ボタンを押す。すると作成したコネクションが削除される。

コネクションを削除する

 

そしてソースコードのメソッド名を修正し、コネクションインスペクタのイベント名の横にある○アイコン(下図赤枠)からメソッドまでドラッグ&ドロップで線をつなぐ。これで修正完了。

connection_inspector_edit_connect2

 

なお、部品を右クリックしたコネクション一覧からも同じように修正ができる。

右クリックからコネクションを修正する

 

イベントメソッドを修正するときに注意すべきこと

コネクションを確立したプロパティやメソッドを削除するときは、コネクションインスペクタからもコネクションを削除しなければ実行時エラーの発生原因になるので注意が必要だ。

例えば、下図のように1つのボタンに「クリックされたとき」、「ダブルクリックされたとき」の2つのイベントメソッドを作成したとする。

その後、ダブルクリックされたときの処理が不要になったので、メソッドだけ削除してコネクションはそのままにするとどうなるか。

2つのコネクションのうち1つを削除する前

 

コンパイルは成功してアプリが起動するが、ボタンをダブルクリックした瞬間にエラー「unrecognized selector sent to instance」が発生する。これは、メソッドを呼び出そうとしたが見つからなかったために発生したエラーである。

コネクションを確立したプロパティやメソッドを削除するときは注意しよう。