ASOCでアプリケーションを作ってみる-02-Xcode3.2
前回ですばらしいアプリケーションが出来た訳ですが、これで終わってはなんなので、もう少しインターフェースに何かを配置してみましょう。
インターフェースを作ってみる
プロジェクトウィンドウの左の『Resources』の中に『MainMenu.xib』があります。これがインターフェースに関してのファイルになりまので、これをダブルクリックすると『interface Builder』が起動してきます。
Xcodeの3.Xではプロジェクトの管理やコードを書くのはXcodeの役目で、インターフェースを作るのは interface Builder のお仕事になります。Xcode4.Xでは二つは一緒になっていますので『interface Builder』というアプリケーションは無くなっています。
interface Builderのインターフェース
interface Builder が起動すると、先ほど作ったアプリケーションの何も無いウィンドウと、メニューが以下のように表示されます。
作ったアプリケーションのインターフェースデザイン

またドキュメントウィンドウ に MainMenu.xibの内容として、その構成が左のように表示されます。
ドキュメントウィンドウ

これにより既にメニューが登録されていて、その中にメニューのアイテムが登録されているのが分かりますし、MyTestウィンドウも登録されています。またそれらのオブジェクトがそれそれ『NSMenu』や『NSWindow』というクラスによるインスタンスである事もわかります。つまりどうやらこのMainMenu.xibにオブジェクトのクラスを登録する事で、インスタンスになり、使用する事が出来るようになるようです。
もう一つ、『MyTestAppDelegate』という名前で『MyTestAppDelegate』タイプの青い箱が登録されています。これがXcodeでソースを修正した『Script "MyTestAppDelegate"』というScriptオブジェクトのクラスを継承したインスタンスになります。この『MyTestAppDelegate』というクラスも含め、プロジェクトを作成した時点で、クラスを作り、MainMenu.xibに自動的に登録し、ウィンドウやメニューを登録するなどの最低限のことを行ってくれるので、ビルドするとウィンドウが開いたり、Quitが使えたりするのです。
ライブラリパネル

ライブラリパネルでは、interface Builderに用意されたインターフェース作成のための部品により、3つのタブが用意されています。ウィンドウやボタンなどの部品を表示・選択できる『Object』タブ、Xcodeで用意されているクラスを表示・選択する為の『Class』タブ、そしてアイコンやクリック音などを表示・選択する為の『Media』タブです。
もしもこのパネルが表示されていないようであれば、ToolsメニューのLibraryを選択すると表示されます。またドキュメントウィンドウの上の部分に左のパネルの画像のLibraryの所にあるアイコンと同様のものがあるので、これをクリックする事でも表意されます。
例えばウィンドウにボタンを配置したいなら、『Object』の中を探し、好みのボタンを見つけて、ドラッグ&ドロップでウィンドウ内に配置するだけでボタンを作成することができます(勿論押されたら何をするかは別にプログラムする訳ですが、少なくとも押されたよなどの機能は既に持っています。つまりここから部品をドキュメントウィンドウに表示されている『MainMenu.xib』に加え、調整する事でインターフェースを作って行くということになります。
インスペクターパネル

インスペクター(incpector)とは指定した対象の現在の状態や内部構造を示す情報を一覧表示してくれ機能という事のようです。
インスペクターパネルにもいくつかのタブにより機能が分類されています。
- attribute(属性)- オブジェクトの属性
- Effects(効果)- オブジェクトの効果
- Size(サイズ)- オブジェクトのサイズ
- Binding(結合)- 値や属性等との結合
- Connections(接続)- 値やイベントの接続
- Identity(識別)- クラスやIDなど
- AppleScript - AppleScriptStudio開発用
最後の『AppleScript』は前のページの最後に詳解したXcode3.XでAppleScriptStudioでの開発が出来るようにすると出てくるタブになりますので通常はないものです。
左の表示はattributeタブを選択した状態でドキュメントウィンドウで『Window(MyTest)』を選択した時に現れる表示です。つまりWindow(MyTest)の属性値として設定できる内容と現在の値がどうなっているかを表示しています。
例えばTitleを変えれば表示されるウィンドウのタイトルが変わりますし、『Visible at Launch』にチェックが付いているので、アプリケーションが起動した時にこのウィンドウが表示されることになります。
様々なオブジェクトに関して、タブを切り替えて何がどのように表示されるかを目て見る事をお勧めします。
ウィンドウにオブジェクト配置する
では淋しげなウィンドウに部品を配置してみます。
ライブラリパネルのObjectタブを選択し、タブの下のスクロールパネルの中のLibraryの左の三角をクリックして中身を表示し、Cocoaをクリックします。するとその下のスクロールパネルの中に配置できるいろいろなオブジェクト(部品)が表示され、ダブルクリックするとウィンドウに配置されます。あるいはクリック & ドロップすることでもウインドウの中に配置できます。
ウィンドウに部品を配置

取りあえず、テキストフィールドに入力し、ボタンをクリックしたらラベルが書き代わるものを作る事にして、ボタンとラベルとテキストフィールドを見付て配置し、サイズや配置を場所を調整してください。
サンプルでは、それぞれのタイトルをオブジェクトをクリックして変更したり、インスペクターパネルのattributeタブで背景色を変更したり、Fontメニューでフォントサイズを変更したりしています。
加えられたオブジェクト

この作業によりドキュメントウィンドウの『MainMenu.xib』に配置したオブジェクトが付け加わっているはずです。
ではこの状態で、一度『MainMenu.xib』を保存して、Xcodeに戻り、『ビルドと実行』をしてみてください。
作ったようにウィンドウが表示されて、テキストフィールドに入力したりボタンが押せたりするかと思います。
なんの機能もありませんが、取りあえずこれでインターフェースのデザインはできたことになります。
![]() ASOCでアプリケーションを作ってみる-01-Xcode3.2 |
![]() AppleScriptObjC |
![]() ASOCでアプリケーションを作ってみる-03-Xcode3.2 |