コントロール類をウインドウに配置する方法は、極めて簡単だ。単にパレットから素材をウインドウ内にドラッグ&ドロップするだけだ。こうした操作方法はMac OSの開発者にはもはや説明はいらないだろう。パレットにあるテキストフィールドを、ウインドウにドラッグ&ドロップする。
◇パレットにあるテキストフィールドをウインドウにドラッグ&ドロップする
ウインドウ内では、選択されたオブジェクトは、グレーの円のハンドルがその四隅に表示される。そこをドラッグするとサイズを変更できる。また、ハンドル以外の部分をドラッグすると位置を移動することができる。これらももはや説明は不要だろう。とにかく自由にオブジェクトを配置できるわけだ。
以下のサンプルを実行するために、テキストフィールドを3つと、ボタンを1つ配置しておくことにする。Visual Basicあたりを知っている方は、ここで各オブジェクトのプロパティを意識したいところかもしれない。たとえば、オブジェクトのNameプロパティをプログラムで参照したりする必要があるからだ。だが、Interface Builderでの作業では、後から修正する段階で、プロパティに相当するアトリビュートをいじればいい。プログラムとの連係は独特の手法を使う。まずは、オブジェクトを配置するだけでいいとここでは理解しておいてもらいたい。
◇テキストフィールドを3つとボタンを1つ配置する
いよいよInterface Builderの本質に迫っていきたいが、まずは操作方法などの理解のために、通常のソフトウエア作成ではやらないような極めて単純なことをやってみたい。Interface Builderは、単にユーザインタフェースをグラフィカルに作成するというだけのツールではない点について、説明をしたい。Interface Builderで配置したコントロールなどは、お互いに作用しあうことができると言えばいいだろうか。かっこをつけて言えば、インタラクションを行なうという…といったところだろうか。いろいろな側面はあるのだが、あるコントロールが、別のコントロールに作用するとうい点を理解するために、以下のような設定をやってみよう。いよいよ「線を引く」という作業に入る。
まず、2つのテキストフィールドがあることを確認する。一方のテキストボックス（以下の図では上のもの）から、もう一方のテキストボックス（以下の図では上から2つ目）に向かって、controlキーを押しながらドラッグを行なうと、線が引かれる。controlキーを押し、そのままにしてマウスポインタをテキストボックスの上に移動させ、ドラッグを行なえばいいだろう。いずれにしても、その後はドラッグ終了までの間、始点のコントロールから線が延び、マウスの移動に連動して線の端が移動する。もう一方のテキストボックス上でドラッグを終了すればよい。
◇controlキーを押しながらドラッグする
ドラッグを終了するとインスペクタが現れる。ここでは、ドラッグ元、つまりドラッグを開始したテキストフィールドをのインスペクタが表示されるが、必ず、上部のポップアップメニューがConnectionsとなっているはずだ。とりあえず、「結合」についての設定を行なうものと思えばよい。なお、ここで設定をやめるのであれば、ウインドウ内の適当な位置をクリックすればいいので、ドラッグの失敗などの場合では、この方法でキャンセルすればよい。
◇別のコントロールでドラッグを終了するとインスペクタが現れる
ここで、このインスペクタの表示内容の見方を理解したい。まずは「Outlets」と表示されたリストがある。Outletsとは、オブジェクトの内容や状態を外にさらすための窓口ととりあえずは考えればよいだろう。すでに、targetという項目が選択されている。
そして、インスペクタの右側はドラッグ先、つまりドラッグを終了したコントロールの「Actions」が表示されている（たぶん、リストの頭にActionsを書き忘れているのだと思うのだが…）。Actionsは、文字通り「動作」を理解すればいいだろう。
ここでは、右側のリストで、takeStringValueを選択する。そして、Connectionボタンをクリックすると、以下の図のように、リストのConnectionsのところに、設定が追加される（ほら、Actionsが出てきたでしょ）。
◇Connectionsに設定が追加された
動作の説明の前に、作成したユーザインタフェースをさっそく試してみよう。これができるのもInterface Builderのおもしろいところだ。FileメニューのTest Interface（Command+R）を選択する。ショートカットが「Run」だと理解すればいいだろう。すると、ウインドウが表示され、配置したテキストボックスやボタンが表示されるはずだ。DockのInterface Builderのアイコンのデザインが変わり、ステータスが設計モードではなく実行テストモードになっていることが分かるようになっている。
そして、ドラッグで接続したテキストフィールドのうち、ドラッグ元になっているテキストフィールドに、適当に文字や数値をキー入力して、Enterキーを押してみよう。すると、ドラッグ先に指定したテキストフィールドに、キー入力した文字列がコピーされるはずだ。ここまでは1行もプログラミングをしていないが、フレームワークの機能でこうしたことがすでに実現している。もちろん、Project Builderに戻ってビルドし実行しても、全く同じように機能するはずである。
テスト実行モードから戻るには、Command+Q、つまり終了の操作を行なえばいい。それでも、Interface Builderは終了されずに、編集モードに逆戻りする。ちょっと妙と言えば妙なのだが、すぐ慣れるだろう。
さて、テキストフィールドのtargetというOutletから、別のテキストフィールドのtakeStringValueというActionを接続した。targetというのは、多くのコントロールにあるようで、これはおおむね、コントロールの「代表値」だと考えればいいだろう。テキストフィールドでは、枠に入力された文字列になる。ポップアップメニューでは選択された項目などとなっている。実際にプログラミングをするときにはもっと詳細にプロパティやメソッドを使うとしても、概念的にはtargetというOutletの意味を代表値としてとらえておけばいいだろう。そして、何かの操作で、Outletに値を放り出すのである。まじめな表現をすれば、外に出す機会を作るとでも言えばいいだろうか。テキストフィールドであればEnterキーで、テキストフィールドの内容を外に出す。ポップアップメニューだとメニュー選択すれば、選択結果がtargetとして外に出されるのである。JavaのAWTの世界で言えば、Actionイベントが発生したという点にほぼ同じようなものだと言えるだろう。
そして、Actionというのはまさに動作なのだが、takeStringValueという名前通り、「文字列値として取り込む」と考えればよい。つまり、Enterキーを押して、値を外に出すのだが、接続されている先のテキストボックスで「値を取り込む」ということを行なうのである。こうした一連の操作がフレームワーク内ですでに稼動する状況にある。それを利用する設定をInterface Builderで作成できるということになる。以上のように、プログラムとしての振る舞いまでも含めてInterface Builderは定義できるのである。
たとえば、ポップアップメニューを配置して、そのtargetを、別のテキストフィールドのtakeObjectValueというActionに接続すると、ポップアップメニューで選択した項目の番号がテキストフィールドに入力される。実際のプログラムでコントロール間を直接結ぶことはまずないとは思うが、まずは試しにいろいろやってみるのもいいかもしれない。
次回はウインドウ上のコントロールを処理するプログラムを追加することに進むことにしよう。