---

Currency Converterウインドウの作成

Currency Converterには、ユーザがやり取りを行うメインウインドウがあります。このセクションでは、Currency Converterのメインウインドウを設計するプロセスを説明します。

このセクションの内容：

ウインドウを作成する
ウインドウをサイズ変更する
ウインドウのタイトルを変更する
テキストフィールドの追加
フィールドにラベルを割り当てる
テキストフィールドの属性を変更する
ボタンを設定する
グループコントロールに区切り線を追加する

ウインドウを作成する

Interface Builderを使って、アプリケーションのユーザインターフェイスを定義します。Interface BuilderでCurrency Converterのメインnibファイルを開くには次のようにします。

1. プロジェクトのResourceサブグループからMainMenu.nibを見つけます。

2. このnibファイルをダブルクリックします。Interface Builderにnibファイルが開きます。

nibファイルが開くと、デフォルトのメニューバー、MainMenu.nibウインドウ、ライブラリ、Windowというタイトルの付いた空のウインドウが表示されます。

ウインドウをサイズ変更する

図 4-1に示すように、ウインドウの右下角を内側方向にドラッグすることにより、ウインドウを小さくします。

「Window Size」インスペクタを使うと、より細かくウインドウをサイズ変更できます。

1. 「Tools」＞「Inspector」を選びます。

2. 黄色の定規のような「Size」アイコンをクリックします。

3. 「Content Size & Position」グループで、ウインドウの幅、高さ、デフォルトのxおよびy座標を設定できます。

4. 図 4-2に示すように、新しい寸法を「width」フィールドと「height」フィールドに入力します。

   
   

   図 4-2  インスペクタを使ったウインドウのサイズ変更

   

5. 「Initial Position」グループで、ウインドウとスクリーンのグラフィカル表現を確認します。ウインドウをボックスの左上角にドラッグし、アプリケーションの標準的なデフォルト位置とします。

ウインドウのタイトルを変更する

現時点では、アプリケーションを実行すると、そのタイトルは「Window」になります。次のようにしてタイトルを変更します。

1. MainMenu.nibウインドウでWindowオブジェクトを選択します。

2. インスペクタで「Attributes」タブを表示します。

3. 「Title」の値を「Window」から「Currency Converter」に変更します。

テキストフィールドの追加

Interface Builderの「ライブラリ」ウインドウには、いくつかのユーザインターフェイス要素が含まれており、それらをウインドウやメニューにドラッグしてアプリケーションのユーザインターフェイスを作成できます。

1. 図 4-3に示す「ライブラリ」がまだ開いていない場合は、「Tools」＞「Library」を選びます。

   
   

   図 4-3  Interface Builderの「ライブラリ」ウインドウのCocoaビューとセル

   

2. 「ライブラリ」の一番上のリストで、「ライブラリ」を開き、次に「Cocoa」を開いて「Views & Cells（ビューとセル）」を選択します。

3. 図 4-3で、アイコンにどのようなラベルが付いているか注目してください。ラベルが表示されていない場合は、ウインドウの一番下のギアメニューから「アイコンとラベルを表示」を選びます。これにより、探しているオブジェクトを簡単に見つけられます。

4. 「Currency Converter」ウインドウにテキストフィールドを配置します。

   「Text Field」項目（図 4-3でハイライトされています）を見つけ、Text Fieldオブジェクトをライブラリからウインドウの右上角にドラッグします。Interface Builderでは、対象のオブジェクトが近隣のオブジェクトやウインドウの縁からの適切な位置にまでドラッグされるとレイアウトガイドが表示されるため、Appleのヒューマンインターフェイスガイドラインに従ってオブジェクトを配置できます。

5. テキストフィールドのサイズを、3分の1程度広げます。

   テキストフィールドのハンドルをグラブし、広げたい方向にドラッグしてサイズ変更します。図 4-4に示すように、この場合は、左側のハンドルをドラッグしてテキストフィールドを拡大します。

   
   

   図 4-4  テキストフィールドのサイズ変更

   

6. さらに2つ、最初のものと同じサイズのテキストフィールドを追加します。

   これを行うには2通りの方法があります。パレットからウインドウに別のテキストフィールドをドラッグしてから最初のテキストフィールドと同じサイズにする方法と、ウインドウにすでにあるテキストフィールドを複製する方法です。

   「Currency Converter」ウインドウのテキストフィールドを複製するには次の手順を実行します。

   1. テキストフィールドがまだ選択されていなければ、これを選択します。

   2. 「編集」メニューから「複製」(Command-D)を選びます。新しいテキストフィールドが、最初のフィールドから少し間を空けて表示されます。

   3. 新しいテキストフィールドを最初のテキストフィールドの下に配置します。レイアウトガイドが表示され、Interface Builderはテキストフィールドを正しい位置にスナップします。

   4. 3番目のテキストフィールドを作成するには、再度Command-Dを押します。

   ショートカットとして、Optionキーを押しながら最初のテキストフィールドをドラッグして複製することもできます。

フィールドにラベルを割り当てる

ラベルのないテキストフィールドは分かりにくいため、ライブラリにある既製のラベルオブジェクトを使ってテキストフィールドにラベルを付加します。

1. CocoaライブラリからウインドウへLabel要素をドラッグします。

   
   
   

2. テキストラベルを右揃えにします。

   Label要素を選択した状態で、図 4-5に示すように、インスペクタの「Text Field Attributes」タブの「Alignment」領域で、左から3つ目のボタンをクリックします。

   注： Interface Builderでインスペクタを開くには、「Tools」＞「Inspector」を選びます。

   
   

   図 4-5  Interface Builderでテキストラベルを右揃えにする

   

3. 「Title」テキストフィールドにExchange Rate per $1:と入力します。

4. このテキストラベルを2回複製します。2番目のテキストラベルのタイトルを「Dollars to Convert:」に設定し、3番目のテキストラベルのタイトルを「Amount in Other Currency:」に設定します。

5. 図 4-6に示すように、テキストフィールドを左に拡大し、タイトル全体が表示されるようにします。

   
   

   図 4-6  「Currency Converter」ウインドウのテキストフィールドとラベル

   

テキストフィールドの属性を変更する

一番下のテキストフィールドには、通貨変換の計算結果が表示されるため、ほかのテキストフィールドとは異なる属性が必要です。ユーザによる編集は不可能でなければなりません。

結果を表示するテキストフィールドのユーザによる編集を不可能にするには、次の手順を実行します。

1. 3番目のテキストフィールドを選択します。

2. インスペクタで、「Text Field Attributes」タブに移動します。

3. テキストフィールドの内容をユーザが変更できないように、「Editable」オプションが選択解除されていることを確認します。また、このテキストフィールドの内容をユーザがほかのアプリケーションにコピーできるように、「Selectable」オプションが選択されていることも確認します。

ボタンを設定する

通貨変換は、何らかのボタンがクリックされるか、Returnキーが押されることによって呼び出される必要があります。「Currency Converter」ウインドウにボタンを追加するには、次の手順を実行します。

1. ライブラリからウインドウの右下角へ、Push Buttonオブジェクトをドラッグします。

2. このボタンをダブルクリックして、タイトルを「Convert」に変更します。

3. 「Button Attributes」インスペクタの「Key Equiv.」セクションで、グレーのボックスをクリックします。ここでReturnキーを押します。Returnの記号がグレーのボックスに表示されます。これで、ボタンはクリックと同様にReturnキーに反応します。

4. ボタンをテキストフィールドの下に揃えます。

   1. ボタンを下にドラッグし、レイアウトガイドが表示されたら放します。

   2. ボタンを選択したまま、Optionキーを押します。ポインタを動かすと、Interface Builderには、ポインタが乗っている要素とボタンの間の距離がピクセル単位で表示されます。

   3. 図 4-7に示すように、Optionキーを押したままポインタを「Amount in Other Currency」テキストフィールドの上に置いた状態で、矢印キーを使ってボタンを少しずつ移動し、ボタンの中央がテキストフィールドの中央に揃うようにします。

      
      

      図 4-7  Interface Builderでの距離の測定

      

グループコントロールに区切り線を追加する

Currency Converterの最後のインターフェイスには、テキストフィールドとボタンを区切る線が付いています。「Currency Converter」ウインドウに線を追加するには、次の手順を実行します。

1. ライブラリから「Currency Converter」ウインドウへ、Horizontal Lineオブジェクトをドラッグします。

2. 図 4-8に示すように、線の両端をドラッグして、ウインドウを横切るように線を延長します。

   
   

   図 4-8  「Currency Converter」ウインドウへの横線の追加

   

3. 横の区切り線の下にレイアウトガイドが表示されるまで「Convert」ボタンを上に移動し、「Convert」ボタンの下にレイアウトガイドが表示されるまでウインドウを短縮します。

---