完全に理解する Storyboard & UIKit (Day 2): XcodeでのStoryboardの基本操作

Day 1では概念と歴史を学びました。本日は実際にXcodeを操作し、強力な視覚的ツールである Interface Builder を使って、Storyboard上でUIを構築する基本操作を習得します。

1. Interface Builderとは？

Interface Builder (IB) は、Xcodeに内蔵されている視覚的なUIエディタです。コードを1行も書くことなく、ドラッグ＆ドロップでボタンやテキストフィールドを配置し、プロパティを設定できます。

Storyboardファイル（.storyboard）やXIBファイル（.xib）を開くと、自動的にInterface Builderの画面に切り替わります。

2. Storyboardの基本画面構成

Storyboardを開くと、主に以下の4つのエリアを使います。

① キャンバス (Canvas)

中央の大きなエリアです。ここに「Scene（シーン）」と呼ばれるアプリの画面が表示されます。各Sceneは、コード上の UIViewController に対応しています。

② ドキュメントアウトライン (Document Outline)

キャンバスの左側にあるリスト状のパネルです。画面上に配置されたUI要素（View）が、どのような階層（親子関係）になっているかがツリー状に表示されます。

• 画面上に重なって見えにくい要素を選択する際に非常に便利です。
• Editor > Show/Hide Document Outline (または左下のアイコン) で切り替えます。

③ インスペクタ (Inspectors)

画面右側のパネル群です。選択したUI要素の詳細を設定します。主に以下のタブを使います。

1. Identity Inspector (⌥⌘3): 対象の要素に紐づくカスタムクラス（コードのファイル名）や、識別のためのStoryboard IDを設定します。
2. Attributes Inspector (⌥⌘4): 最もよく使います。色、フォント、テキストの中身、背景画像など、視覚的な属性を設定します。
3. Size Inspector (⌥⌘5): 要素の座標（X, Y）やサイズ（Width, Height）、Auto Layoutの制約（後日解説）を確認・編集します。
4. Connections Inspector (⌥⌘6): UI要素とコードを繋ぐ「Outlet」や「Action」の接続状況を確認・設定します。

④ ライブラリパネル (Library)

UI要素（ボタン、ラベルなど）を取り出す場所です。ツールバーの + ボタン、またはショートカットキー ⇧⌘L (Shift + Command + L) で呼び出します。

3. 基本的な操作手順

UI部品の配置

1. キャンバスに表示されているView Controllerを選択します。
2. ⇧⌘L を押し、オブジェクトライブラリを開きます。
3. 検索窓に Label や Button と入力します。
4. 目当ての部品をキャンバス（またはドキュメントアウトライン）へ ドラッグ＆ドロップ します。

プロパティの変更

1. 配置したラベルをクリックして選択します。
2. 右側のパネルを Attributes Inspector (⌥⌘4) に切り替えます。
3. Text の項目を "Hello, Storyboard!" に変更します。
4. Color や Font も自由に変更してみましょう。

4. Initial View Controller の設定

アプリを起動したとき、最初に表示される画面はどれでしょうか？ Storyboardでは、それを Initial View Controller として指定します。

1. 最初の画面にしたい View Controller を選択します。
2. Attributes Inspector を開きます。
3. 「View Controller」セクションにある Is Initial View Controller のチェックを入れます。
4. すると、キャンバス上のその画面の左側に 右向きの矢印（→） が現れます。これがアプリの起動開始ポイントです。

5. Storyboardは裏では何者なのか？

GUIで操作していますが、.storyboard ファイルの正体は単なる XMLファイル です。

興味があれば、Project Navigatorで .storyboard ファイルを右クリックし、 Open As > Source Code を選択してみてください。あなたがGUIで設定した色やフォント、配置が、すべてXMLのタグとして表現されていることがわかります。

（もう一度GUIに戻すには、Open As > Interface Builder - Storyboard を選択します。）

📝 今日のまとめ

• Interface Builder を使えば、ドラッグ＆ドロップで直感的にUIが作成できる。
• ⇧⌘L でライブラリを開き、部品を配置する。
• Attributes Inspector で色や文字などの外観を設定する。
• Is Initial View Controller でアプリの開始画面を指定する。

UIは見栄えよく配置できましたが、画面を裏で操る「脳みそ」が必要です。 明日の Day 3 では、UIとコードを結びつける UIViewController のライフサイクルと役割について解説します！