XcodeにはInterface Builderというツールが組み込まれており、インターフェイスを視覚的に簡単に作成できます。このレッスンでは、Interface Builderをナビゲートし、キャンバスに要素を追加し、コード内のそれらの要素と対話する方法を学びます。

あなたが学ぶこと
・Interface Builderを使用してユーザーインターフェイスを構築する方法

・アプリをコンパイルせずにユーザーインターフェイスをプレビューする方法

Vocabulary
action
canvas
Document Outline
view controller
initial view controller
outlet
scene
XIB
Related Resources
Xcode Help: Interface Builder workflow
Build a Basic UI

p.80 
Interface Builderの基本を学ぶ最善の方法は、Xcodeに飛び込んで、その機能のいくつかを調べることです。まず、シングルビューアプリケーションテンプレートを使用して新しいiOSプロジェクトを作成します。プロジェクトに「IBBasics」という名前を付けます。

ストーリーボード

Interface Builderは、プロジェクトナビゲータからXIBファイル(.xib)またはストーリーボードファイル(.storyboard)を選択するたびに開きます。

XIBファイルには、フルスクリーンビュー、テーブルビューセル、カスタムUIコントロールなど、単一のビジュアル要素のユーザーインターフェイスが含まれています。XIBは、ストーリーボードが導入される前に、より頻繁に使用されていました。特定の状況ではまだ有用な形式ですが、このレッスンではストーリーボードに焦点を当てます。

XIBとは対照的に、ストーリーボードファイルには多くのインターフェイスが含まれており、1つまたは複数の画面のレイアウトと、ある画面から別の画面への進行を定義します。開発者として、複数の画面を一度に表示する機能は、アプリ内のフローを理解するのに役立つことがわかります。
  
p.81 
プロジェクトナビゲーターのMain.storyboardをクリックして、Interface Builderでファイルを開きます。画面の中央には、空白のキャンバスに無地の白いビューを持つ単一のシーンが表示されます。このシーンは“ the initial view controller”初期ビューコントローラーと呼ばれ、アプリを開いたときに表示される最初の画面です。ストーリーボードにシーンを追加すると、キャンバス上の任意の場所にドラッグできます。
より多くのビューコントローラーを一度に表示するには、Multi-Touchトラックパッドに2本指でキャンバスをつまんでズームアウトしたり、特定のビューを拡大したりします。トラックパッドがない場合は、キャンバスの下部にあるズームボタンを使用して同じ結果を得ることができます。

プロジェクトをビルドして実行します。シミュレーターは、ストーリーボードで見たのと同じ白い画面を表示します。アプリはこの画面を表示することをどのように知っていましたか?
調査するには、プロジェクトナビゲーターで一番上のファイル(IBBasics)を選択し、一般ヘッダーの下にある展開情報セクションを見つけます。メインインターフェイスのエントリは、アプリの起動時に最初に読み込まれるストーリーボードファイルを定義します。
シングルビューアプリケーションテンプレートを使用してプロジェクトを作成したので、このエントリはMain.storyboardを使用するように事前設定されていました。

エントリポイント(灰色の矢印)を目的のビューコントローラーの左側に移動することで、最初のビューコントローラーを変更できます。現在、このプロジェクトでは、Main.storyboardにはビューコントローラーが1つしかないため、変更することはできません。

p.82 

インターフェースビルダーのレイアウト
メインキャンバスの左側には、ドキュメントアウトラインビューがあります。それを明らかにするためにキャンバスの左下隅にある、ドキュメントアウトラインボタンをクリック。

ドキュメントアウトラインには、シーン内の各ビューコントローラーのリストと、各ビューコントローラー内の要素の階層リストが表示されます。各項目の左側にある灰色の三角形をクリックして、内容を検査します。ご覧のとおり、アウトライン内のビューをクリックすると、キャンバス上の対応する要素が強調表示されます。

列の下部には、異なるライブラリにアクセスできる4つのボタンがあります。3番目のボタン、オブジェクトライブラリをクリックすると、シーンに追加できるボタン、テキストフィールド、ラベル、その他のビューコントローラーが含まれています。
p.83 
オブジェクトライブラリをスクロールして「Button」を見つけて選択し、ライブラリからビューにアイテムをドラッグします。
ボタンをビューの左上隅にドラッグしながら、レイアウトガイドを使用してみてください。Interface Builderでビューオブジェクトを配置またはサイズ変更すると、レイアウトガイドは青い点線で表示されます。レイアウトガイドは、コンテンツを中央に配置し、オブジェクト間の適切な余白と間隔を使用し、画面上部のステータスバーにコンテンツを入れないようにするのに役立ちます。

マウスまたはトラックパッドを放して、ボタンをビューに挿入してください。ボタンオブジェクトがドキュメントアウトラインにも表示されるようになりました。

p.84 

ファイルとクイックヘルプインスペクタ(常に利用可能)に加えて、Interface Builderにいるときにユーティリティ領域の上部に4つのコンテキストに敏感なインスペクタが表示されます。これらの異なるインスペクタと、ビュー内のオブジェクトをカスタマイズするのにどのように役立つかを調べるには、ドキュメントアウトラインまたはシーン自体で、追加したばかりのボタンを選択します。

The Identity inspectorがどのクラスに属しているかなど、オブジェクトのアイデンティティに関連するプロパティを編集できます。

この例では、ボタンはUIButtonクラスに属しています。他の場所でカスタムボタンクラスを定義した場合は、IDインスペクタを使用して、追加したばかりのボタンのクラスを変更できます。授業については、今後のセクションで詳しく学びます。

The Attributes inspectorで選択したアイテムの調整可能なビジュアルプロパティのリストを提供します。UIButtonの場合、ボタンのテキスト、テキストの色、背景、配置などの属性を変更できます。ボタンの外観を変えてみてください。

p.85 

The Size inspectorはシーン内で選択した要素のサイズと位置を調整できます。画面の左上が(0,0)に対応するXフィールドとYフィールドを使用して、位置を変更します。Xの値は、要素を右に移動すると大きくなり、Yは画面を下に移動するにつれて大きくなります。UIButtonの場合、サイズインスペクタには、ボタンのタイトルまたは画像の周りのパディングを調整するための追加フィールドが含まれています。

The Connections inspector は
オブジェクトに関連するすべての関数と変数名を一覧表示します。現在、ボタンは何も接続されていないため、接続は表示されません。次のセクションでは、ユーザーが操作するときに機能を実行するように、コード内のボタンを参照する方法を学びます。

アウトレットとアクション
多くの場合、実行時またはアプリがすでに実行されているときに調整できるように、コード内のビジュアル要素を参照する方法が必要になります。Interface Builderからコードへのこの参照は、アウトレットと呼ばれます。
ユーザーに操作してもらいたいオブジェクトがある場合、アクションを作成します。これは、インタラクションが行われたときに実行されるコードへの参照です。

アウトラインビューでビューコントローラーを選択し、IDインスペクタを選択します。
プロジェクトの作成時に選択したテンプレートは、カスタムクラスをViewControllerに設定しました。

Open the Assistant editor 

そして、ストーリーボードの横に表示されるViewControllerの定義が表示されます(IDインスペクタのカスタムクラスフィールドに対応しているため)。

しかし、ViewControllerクラスはまだ追加したボタンにアクセスできません。コードでオブジェクトにアクセスできるようにするには、アウトレットを作成する必要があります。

アウトレットの作成
ストーリーボードのボタンをControlキーを押しながらクリック(または右クリック)し、ViewControllerクラス定義を含むアシスタントエディタペインに向かってドラッグを開始します。カーソルをコードにドラッグすると、青い線が表示されます。

p.86 
カーソルを放すと、「アウトレットとアクション」ダイアログが表示され、アウトレットが接続タイプとして選択されます。[名前]フィールドに、ボタンの変数名「myButton」を指定します。[接続]ボタンをクリックしてアウトレットの作成を完了し、アウトレットを定義するコード行を生成します。

コンセントの定義には複数の部品があります。左から右に表示されているものは次のとおりです。

・円 — 塗りつぶされた円は、コンセントが接続されていることを示します。変数が何も接続されていない場合、円は空になります。

・@IBOutlet — Interface Builderに固有のこのキーワードは、変数とストーリーボードの関係を指定します。@IBOutletキーワードがないと、円は表示されません。

・Weak — このキーワードでは、ViewControllerとmyButtonの関係について詳しく説明しています。それについては後のレッスンで学びます。

・Var myButton - これは「myButton」という変数を宣言します。

・: UIButton! — プロパティのタイプはUIButton、UIKitフレームワーク内のボタンタイプです。感嘆符!は、このプロパティにアクセスしようとしてコンセントが接続されていない場合、プログラムがクラッシュすることを警告します。これについては、後のレッスンで詳しく説明します。

p.87 
コード内のボタンにアクセスできるようにしたので、viewDidLoad()関数内に次の行を追加します。

myButton.setTitleColor(.red, for: .normal)

この行は、ボタンのタイトルの色を青から赤に変更します。アプリケーションをビルドして実行して、変更が有効になることを確認してください。
それは素晴らしいことですが、ボタンをクリックしようとすると何も起こらないことに気付くでしょう。機能を追加するには、ボタンに関連付けられたアクションを作成する必要があります。

アクションの作成

もう一度、Controlキーを押しながらストーリーボードのボタンをクリック(または右クリック)し、カーソルをViewControllerクラス定義にドラッグします。

今回「アウトレットとアクション」ダイアログが表示されたら、接続をアウトレットからアクションに切り替える必要があります。この状況では、名前フィールドのエントリは変数を定義せず、ボタンタップが関連付けられているアクションを定義します。アクションに「buttonPressed」という名前を付けます。[接続]ボタンをクリックして、アクションの作成を完了します。

p.88
左から右に新しいコード行をチェックしてください。

・円 — 塗りつぶされた円は、アクションが接続されていることを示します。関数がストーリーボード内の何も接続されていない場合、円は空になります。

・@IBAction — Interface Builderに固有のこのキーワードは、ストーリーボード内のアクションとオブジェクトの関係を指定します。@IBActionキーワードがないと、円は表示されません。

・Func buttonPressed — これは「buttonPressed」と呼ばれる関数を宣言します。

・(_ sender: Any) — アクションは、ボタン、スライダー、スイッチなど、さまざまなオブジェクトに接続できます。この例では、送信者はアクションをトリガーするオブジェクトの名前です。送信者は複数のユーザーインターフェイス要素のいずれかを表すことができるため、Any型です。タイプとAnyについては、後のユニットで詳しく学びます。

これで、ボタンをタップするたびに実行する機能ができるようになりました。テストするには、ボタン押された機能内に次の行を追加します。

print("The button was pressed") 

このコードは、関数が実行されるたびにXcodeコンソールにメッセージを出力します。アプリをビルドして実行し、ボタンをクリックすると、画面右下のコンソールにメッセージの印刷が表示されます。アウトラインビューに戻り、ボタンをもう一度選択し、ユーティリティ領域の接続インスペクタを選択します。コンセントとアクションをボタンに配線したので、両方とも接続ペインに表示されます。

p. 89
Interface Builderに関する注意事項
Interface Builderのすべての属性は、プログラムまたはコードで設定できるプロパティを表します。Interface Builderは、Appに表示されるUIKitクラスのプロパティを設定および設定するためのグラフィカルインターフェイスです。
シーンにラベルを追加し、ラベルの属性インスペクタを見てください。

p.90 
次に、ドキュメントブラウザでUILabelのシンボル、またはプロパティと関数を検索します。Interface Builderの各設定にはコンパニオンプロパティがあることがわかります。

p.91
Interface Builderで設定できる多くのオブジェクトには、プログラムでのみ設定できるプロパティがあります。たとえば、UIScrollViewには、属性インスペクタに一致するオプションを持たないcontentSizeプロパティがあります。

これらの設定のいずれかを調整する必要がある場合は、IBOutletを設定し、ドット表記を使用してプロパティを更新することで、プログラムで調整できます。

scrollView.contentSize = CGSize(width: 100, height: 100)

実際、Interface Builderでできることはすべて、すべての子ビューを設定して画面に追加するなど、プログラムで実行することもできます。

let label = UILabel(frame: CGRect(x: 16, y: 16, width: 200,
height: 44))
view.addSubview(label) // Adds label as a child view to `view`

このタイプのセットアップは、ビューコントローラーのviewDidLoad()関数で最も一般的に行われ、画面に表示される前にビューコントローラーのメインビュープロパティにアクセスできます。

プログラムですべてを行うことができますが、Interface Builderは複雑なビューを設定する際に多くの時間を節約できることがわかります。プロジェクトが成長するにつれて、ストーリーボードはインターフェイスの設定をより簡単に維持するのに役立ちます。さらに、Interface Builderは、複数のデバイスサイズをサポートする複雑なビューを1か所で構築するサポートしています。

コースの残りの部分では、Interface Builderとストーリーボードについて詳しく学びます。

p.92 
このラボの目的は、Interface Builderとアシスタントエディタを使用して基本的なビューを作成することです。

ステップ1:Xcodeプロジェクトを作成する

「InterfaceBuilderBasics」という新しいXcodeプロジェクトを作成し、プロジェクトフォルダに保存します。

ステップ2:Interface Builderでシンプルなビューを作成する

プロジェクトナビゲーターのMain.storyboardをクリックしてInterface Builderを開きます。

レッスンで学んだことを活かして、次の画像を再現してください。ラベルとボタンを使用する必要があります。

ステップ3:アシスタントエディタを使用してビューを接続する

次に、アシスタントエディタを開き、ViewController.swiftという名前のファイルが表示されていることを確認してください。ラベルからアウトレットを作成し、mainLabelという名前を付けます。

ボタンからアクションを作成し、changeTitleと呼びます。

changeTitle内で、mainLabel.text = "This app rocks!"と書いてください。アプリを実行し、ボタンをタップします。テキストはどうなりましたか?

おめでとうございます!これで、コードでスワップアウトできるテキスト付きのシンプルなビューができるはずです。必ずプロジェクトをプロジェクトフォルダに保存してください。

p.94 review question
問1
XIBはStoryboardとどのようにちがうか？

1.XIBは単一のビューオブジェクトを表し、ストーリーボードは複数のビュー、シーン、およびそれらの間を移動する方法を表します
2.XIBは複数のビュー、シーン、およびそれらの間を移動する方法を表し、ストーリーボードは単一のビューオブジェクトを表します

問2
プログラムでビューを設定するよりもInterfaceBuilderを使用することの3つの利点は何ですか？
1.保守性
2.使いやすさ
3.複数の画面をサポート
4.すべてのビュー属性を完全に制御

問3
ストーリーボードシーンの横にある灰色の矢印は何を示していますか?

1.シーンが現在編集しているシーンであること
2.シーンが最初のビューコントローラであること
3.シーンにエラーがあり、ビルドできないこと
4.シーンが終了したこと

問4
IBOutletってなに？
1.ユーザーがコントロールを操作したときに実行されるコードへの参照
2.実行時に調整できるようにするためのコード内のビジュアル要素への参照

問5
IBActionってなに？
1.ユーザーがコントロールを操作したときに実行されるコードへの参照
2.実行時に調整できるようにするためのコード内のビジュアル要素への参照
問6
ドキュメントアウトラインは何に使用されますか？
1.シーン内の各ViewControllerのリストと、各ViewController内の要素の階層リストを表示します
2.オブジェクトが属するクラスなど、オブジェクトのIDに関連するプロパティを編集できます
3.選択したアイテムの調整可能な視覚的プロパティのリストを提供します
4.シーン内の選択した要素のサイズと位置を調整できます
5.オブジェクトに関連するすべての関数と変数名を一覧表示します

問7
Identity inspectorは何に使用されますか？
1.シーン内の各ViewControllerのリストと、各ViewController内の要素の階層リストを表示します
2.オブジェクトが属するクラスなど、オブジェクトのIDに関連するプロパティを編集できます
3.選択したアイテムの調整可能な視覚的プロパティのリストを提供します
4.シーン内の選択した要素のサイズと位置を調整できます
5.オブジェクトに関連するすべての関数と変数名を一覧表示します
問8
Attributes inspectorは何に使用されますか？
1.シーン内の各ViewControllerのリストと、各ViewController内の要素の階層リストを表示します
2.オブジェクトが属するクラスなど、オブジェクトのIDに関連するプロパティを編集できます
3.選択したアイテムの調整可能な視覚的プロパティのリストを提供します
4.シーン内の選択した要素のサイズと位置を調整できます
5.オブジェクトに関連するすべての関数と変数名を一覧表示します
問9
Size inspectorは何に使用されますか？
1.シーン内の各ViewControllerのリストと、各ViewController内の要素の階層リストを表示します
2.オブジェクトが属するクラスなど、オブジェクトのIDに関連するプロパティを編集できます
3.選択したアイテムの調整可能な視覚的プロパティのリストを提供します
4.シーン内の選択した要素のサイズと位置を調整できます
5.オブジェクトに関連するすべての関数と変数名を一覧表示します
問10
Connections inspectorは何に使用されますか？
1.シーン内の各ViewControllerのリストと、各ViewController内の要素の階層リストを表示します
2.オブジェクトが属するクラスなど、オブジェクトのIDに関連するプロパティを編集できます
3.選択したアイテムの調整可能な視覚的プロパティのリストを提供します
4.シーン内の選択した要素のサイズと位置を調整できます
5.オブジェクトに関連するすべての関数と変数名を一覧表示します