---

レイアウトとビューの機能の改良

「Currency Converter」ウインドウには現在、設計どおりに機能するために必要なオブジェクトはすべて含まれています。このセクションでは、これをユーザにとってより使い勝手のよいものにするために、ウインドウとメニューを書式設定する手順を説明します。

このセクションの内容：

メニューを設定する
ウインドウ内でのオブジェクトの整列
ウインドウサイズの仕上げ
テキストフィールド間のタブ移動を可能にする
最初のレスポンダとなるテキストフィールドを設定する

メニューを設定する

デフォルトでは、Interface Builderは、メニューバーやアプリケーションのメニュー階層全体を通じて、アプリケーション名の位置にNewApplicationという文字列を配置します。このテキストを、アプリケーションメニューやヘルプメニューなど、アプリケーション名が含まれるすべてのメニュー項目において、実際のアプリケーション名に変更する必要があります。

1. アプリケーションメニューを名称変更するには次の手順を実行します。

   1. 「MainMenu」ウインドウで、NewApplicationをダブルクリックしてこのテキストを編集用にハイライトします。

   2. テキストの位置にCurrency Converterと入力し、Returnキーを押します。

      重要： 実行時は、アプリケーションメニューのタイトルは、nibファイルに指定するタイトルではなく、application-nameプロパティの値（CFBundleName情報プロパティリストのキーの値）によって決まります。詳細については「Info.plistファイル」を参照してください。

2. アプリケーションメニューの文字列を変更します。

   1. プログラムのツールバーに似た「MainMenu」ウインドウで、「Currency Converter」をクリックします。次に「About NewApplication」をダブルクリックしてNewApplicationをCurrency Converterに置き換えます。

   2. 「Currency Converter」の「Hide NewApplication」を、「Hide Currency Converter」に変更します。

   3. 「Currency Converter」の「Quit NewApplication」を、「Quit Currency Converter」に変更します。Currency Converterアプリケーションメニューは、図 4-9に示すようなメニューになっているはずです。

      
      

      図 4-9  Currency Converterアプリケーションメニュー

      

3. 「Help」メニューで、「NewApplication Help」を「Currency Converter Help」に変更します。

ウインドウ内でのオブジェクトの整列

魅力的なユーザインターフェイスにするために、インターフェイスオブジェクトを行列形式で視覚的に整列させる必要があります。整列を「目視」で行うのは非常に困難ですが、x/y座標を手入力するのも手間がかかります。ユーザインターフェイス要素には影があり、ユーザインターフェイスガイドラインの指標では、一般に影は考慮されていないため、ユーザインターフェイス要素の整列はさらに困難です。Interface Builderは視覚的なガイドとレイアウト矩形を使って、オブジェクトの整列を支援します。

Cocoaでは、描画はすべてオブジェクトのフレームの境界内で行われます。インターフェイスオブジェクトには影が付いているため、フレームの縁の位置を揃えると、オブジェクトは視覚的には正しく整列しません。たとえば、『Apple Human Interface Guidelines』では、プッシュボタンの高さは20ピクセルとすると指定されていますが、実際にはボタンとその影に32ピクセルのフレームが必要です。整列しなければならないのは、レイアウト矩形です。Interface Builderでは、「Layout」メニューの「Show Layout Rectangles」コマンドを使ってオブジェクトのレイアウト矩形を表示できます。

Interface Builderは、ウインドウ内でオブジェクトを整列するための方法をいくつか提供しています。

• マウスとレイアウトガイドでオブジェクトをドラッグする

• 矢印キーを押す（グリッドをオフにして、選択したオブジェクトを1ピクセルずつ移動する）

• リファレンスオブジェクトを使って、選択したオブジェクトを行列形式で配置する

• 組み込まれている整列関数を使う

• インスペクタの「Size」パネルで起点を指定する

「Layout」メニューの「Alignment」サブメニューには、一般的な整列操作を実行するときに使用できるコントロールなど、各種の整列コマンドとツールが提供されています。

ウインドウサイズの仕上げ

Currency Converterインターフェイスはほぼ完成しています。最後の仕上げは、すべてのユーザインターフェイス要素がすべて中央に揃えられ、各端が正しく整列されるように、ウインドウをサイズ変更することです。現在、オブジェクトは上端と右端だけに整列されています。

「Currency Converter」ウインドウを仕上げるには、次の手順を実行します。

1. 「Amount in Other Currency」テキストラベルを選択し、ほかの2つのラベルを含むように選択範囲を拡大します（Shiftキーを押しながらクリック）。

2. 「Layout」＞「Size to Fit」を選び、すべてのラベルをその最小幅にサイズ変更します。

3. 「Layout」＞「Alignment」＞「Align Right Edges」を選びます。

4. ラベルをウインドウの左端方向にドラッグし、レイアウトガイドが表示されたら放します。

5. 3つのテキストフィールドを選択して左方向にドラッグします。ここでもガイドを使って正しい位置を確認します。

6. 横の区切り線を短くして、再度ボタンをテキストフィールドの下の位置まで移動します。

7. ウインドウの高さと幅を、テキストフィールドの右側にレイアウトガイドが表示されるまで小さくします。

8. MainMenu.nibでWindowオブジェクトを選択します。

9. ウインドウがその構成要素に対して完璧なサイズになったので、ユーザにはウインドウのサイズ変更をさせたくありません。インスペクタの「Attributes」タブで、「Controls」セクションの下の「Resize」チェックボックスが選択解除されていることを確認します。

この時点で、アプリケーションのウインドウは図 4-10のように表示されているはずです。

テキストフィールド間のタブ移動を可能にする

Currency Converterユーザインターフェイス作成の最後のステップは、外見以外の動作に関連することです。最初の編集可能フィールドから2番目のフィールドへ移動するときと、最初のフィールドに戻るときにユーザがタブで移動できるようにする必要があります。Interface Builderライブラリの多くのオブジェクトは、nextKeyViewという名前のアウトレットを持っています。この変数は、ユーザがTabキーを押したときに次のオブジェクト（Shift-Tabキーが押されたときには直前のオブジェクト）を識別してキーボードイベントを受け取ります。Cocoaアプリケーションは、デフォルトではテキストフィールドのタブ移動の処理方法について「最善の推測」を行いますが、この推測は予期しない結果を生むこともあります。フィールド間のタブ移動を修正する場合は、nextKeyViewアウトレットを通じてフィールドを接続する必要があります。

テキストフィールド間をタブ移動するには次の手順を実行します。

1. 「Exchange Rate」テキストフィールドを選択します。

2. 図 4-11に示すように、「Exchange Rate」テキストフィールドから「Dollars to Convert」テキストフィールドへ、Controlキーを押しながら接続をドラッグします（Controlキーを押し、次に接続線をドラッグします）。

   
   

   図 4-11  Interface BuilderでのnextKeyViewアウトレットの接続

   

3. 「Outlets」の下のnextKeyViewを選択します。これで、Tabキーが押された後にイベントに反応する次のオブジェクトを識別します。

4. 「Dollars to Convert」テキストフィールドから「Exchange Rate」テキストフィールドへの移動に関して、同じ手順を繰り返します。

テキストフィールド間のタブ移動を設定したので、Currency Converterに、どのテキストフィールドが最初に選択されるかを指定します。initialFirstResponderを設定することによってこれを行います。

最初のレスポンダとなるテキストフィールドを設定する

initialFirstResponderは、アプリケーションの起動時にデフォルトで選択されるオブジェクトです。このアウトレットを設定しない場合、ウインドウはキーループを設定してデフォルトのinitialFirstResponderを選択します（指定したオブジェクトと同じになるとは限りません）。

「Currency Converter」ウインドウにinitialFirstResponderアウトレットを設定するには、次の手順を実行します。

1. 図 4-12に示すように、MainMenu.nibウインドウのWindowインスタンスから「Exchange Rate」テキストフィールドへ、Controlキーを押しながら接続をドラッグします。

   
   

   図 4-12  Interface BuilderでのinitialFirstResponderアウトレットの設定

   

2. initialFirstResponderを選択します。

これでCurrency Converterユーザインターフェイスは完成しました。

---