はじめに
iOSやmacOSアプリケーションのユーザーインターフェース(UI)を視覚的に設計し、構築するためのツールです。
Xcodeは統合開発環境(IDE)であり、アプリケーションの開発、デバッグ、テスト、デプロイなどのさまざまな作業をサポートするツール群を提供します。インターフェースビルダーはその一部で、主にUIのデザインと配置に関連する機能を提供します。
具体的には、以下のようなことができます。
- UI要素の配置
- レイアウトの管理
- ビューコントローラの管理
- ストーリーボードの管理
- Codeとの紐付け
プロジェクトの新規作成
※別の記事で説明したい
画面の構成と要素の配置
画面構成を説明する前に、storyboradを作成してみましょう。
「New File」を選択
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-17.31.07-3.png)
「Storyboard」を選択
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-17.31.18.png)
「Save As:」に任意のファイル名を入力して、「Create」を選択
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.20.28.png)
これでstoryboardが作成され、InterfaceBuilderの画面が表示されました。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.21.10-1024x658.png)
StoryBoardと同様に、New Fileから作成していきます。
Swift Fileを選択して、「Next」
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.27.35.png)
「Save As:」に任意のファイル名を入力して、「Create」
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.27.46-1.png)
これでViewControllerが生成されました。
ViewControllerとStoryBoardの紐付けは、追って説明いたします。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-20.26.37.png)
作成したStoryBoardにボタンを配置してみます。
XCodeの画面右上の「+」ボタンを選択
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.42.08.png)
「Button」と入力し、一番上に表示された「Button」をドラッグ&ドロップでエディタ上に配置します。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.48.35.png)
エディタ上には、配置した「Button」が表示されました。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.47.46.png)
正式には「UIButton」と呼ばれます。
Appleのdeveloperサイトで細かい情報が見れます。
配置したままだと、画面に黄色いマークが表示されていると思います。
これは、配置したレイアウトに何かしらのエラーが発生していることを教えてくれています。
クリックしてみましょう。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.55.17.png)
「制約をつけろ」と言われています。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-18.57.01.png)
Interface Builderを使ってViewやButtonを配置するときは、制約をつける必要があります。
制約をつけないと、画面のどこに位置していいかの判断がつかないためです。
では、実際に制約をつけてみましょう。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-19.44.22.png)
Buttonをクリックした後、エディタ右下の□っぽいボタンをクリック。
そうすると、「Add New Constraints」が表示されます。
□の周りの点線をクリックすると、赤くなります。
これで制約をつけることができます。
350~と数字が入っているのは、一番近くのViewからの幅です。
チェックをつけるとwidthとheightの指定もできますが、一旦このまま「Add 4 Constraints」を押してみましょう。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-19.44.32.png)
制約が設定されたことで、黄色く出ていたエラーが消えているかと思います。
また、Constraintsが増えているはずです。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-20.03.01.png)
試しに一つConstraintsを選択してみると、画面右側にこんな表示が出ると思います。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-20.08.59.png)
ここで書いてあることをざっくり説明します。
First Item: SafeAreaのTrailing(右端)
Relation: イコール
Second Item: ButttonのTrailing(左端)
Constraint: 159
つまり、SafeAreaの右端とButtonの左端の幅=159だよ
と、定義されています。
Priority1000と書いてあるのは、制約ごとの優先度です。
あまり使うシーンはないと思いますが、制約同士がかち合ってしまってエラーが出る場合等にPriorityを調整したりします。
このように、制約を組み合わせて画面を構成していきます。
インターフェースビルダーのコードとの統合
次に、Interface Builderとコードの紐付けについて説明します。
紐づけるための事前準備として、紐付けたい①Storyboardと②ViewControllerのファイルを両方開きます。
(Optionを押しながらファイルをクリックすると複数開けるはずです。)
「control」を押しながらButtonをクリックし、そのままViewControllerまでドラッグすると、以下のような表示になると思います。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-20.49.51.png)
上記のように設定して「Connect」を押すと、IBActionが設定されます。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-20.50.00.png)
IBActionは、InterfaceBuilderのButton等に何かしらのイベントが発生した時に動き出すイベントです。
今回は、Touch Up Inside(タップして指を上げたときに発火する)を設定しています。
試しにtouchUpButtonの中にprint文を仕込んで確認してみましょう。
![](https://shichimipan.com/wp-content/uploads/2023/08/スクリーンショット-2023-08-15-21.12.44.png)
ビルドしてButtonをタップすると、print文の内容が出力されました。
このように、InterfaceBuilderとCodeを紐付けてタップイベント等を実装していきます。
おすすめ学習コンテンツ
体系的に学習するために、書籍で学習してみることをおすすめします。
以下の書籍は「じゃんけんアプリ」や「楽器アプリ」のようなアプリを作りつつ楽しく学習できます。
swiftUIを使っているので、最新のスタイルでの開発がしたい方はこちらをおすすめします。
以下の書籍も同じように「カメラアプリ」のようなアプリを作って楽しめます。
一つ目の書籍よりも若干古い(Xcode11 & iOS13)ですが、こちらの書籍はよりswiftの文法に踏み込んで記載されているので、私はどっちも書いました。
いかがでしたでしょうか。
この記事で記載したことは初歩的な内容なので、自分で実際にアプリを作ってInterfaceBuilderを触って深めていくことをおすすめします。