初めてiPhoneアプリをデザインするには、どうすればいい？――すぐ分かるInterface Builder、Storyboard、Auto Layoutの使い方：初心者のためのSwiftで始めるプログラミング入門（9）（1/4 ページ）

本連載では、これからプログラミングやiPhoneアプリ開発を始めてみたい方を対象に、開発に必要な知識を基礎から解説していきます。今回は、画面に部品を配置しレイアウトを行うのに便利な3つのツール「Interface Builder」「Storyboard」「Auto Layout」の使い方を解説する。

[諏訪悠紀，アンダースコア]

iPhoneの画面をレイアウトしよう

今回の主な内容

• プログラムを書くことなく画面を設計できる「Interface Builder」
  • 画面同士のつながり（画面遷移）を管理する「Storyboard」
  • ルールに従って自動的にレイアウトしてくれる「Auto Layout」
• 「動く絵本アプリ」の画面レイアウトを作ろう
• UIコンポーネントを配置しよう
  • Interface Builderを開く
  • UIコンポーネントを配置する
• Auto Layoutの制約を設定しよう
  • A.「戻るボタン」を左下に配置する
  • B.「進むボタン」を右下に配置する
  • C.「絵」を画面いっぱいに配置する
  • 制約通りにレイアウトする
• アプリを動かしてみよう
• 次回は、最終回。「動く絵本アプリ」を完成させよう

　これからプログラミングやiPhoneアプリ作成を始めてみたい方を対象に、必要な知識を基礎から解説していく本連載「初心者のためのSwiftで始めるプログラミング入門」。前回「初心者でも絶対に始められるiPhoneアプリの作り方＆Xcode・シミュレーターの使い方」からは「動く絵本アプリ」を作ることを目標に、Xcodeを使ったiPhoneアプリ開発について解説しています。

　前回はiPhoneアプリの作り始めのステップとして、Xcodeプロジェクトの作り方と、アプリを実行する方法を解説しました。自分が書いたプログラムがiPhoneアプリとして動作したことに、感動した人もいるのではないでしょうか。

　さて、作り始めたiPhoneアプリを「動く絵本アプリ」として作り上げるには、次のような作業が必要です。

• 画面に部品を配置しレイアウト
• 画面に応じたプログラムの記述

「動く絵本アプリ」を作るためにやること

　このうち、今回は「画面に部品を配置しレイアウト」を行います。

プログラムを書くことなく画面を設計できる「Interface Builder」

　画面への部品の配置、そしてレイアウトを行うには「Interface Builder」（インタフェースビルダー）というツールを使います。Interface Builderを使うと、プログラムを書くことなく画面への部品の配置とレイアウトを設計することができます。Interface BuilderはXcodeに付属しているツールですので、Xcodeがインストールされていれば、すぐに使えます。

Interface Builder

画面同士のつながり（画面遷移）を管理する「Storyboard」

　画面のレイアウトは「Storyboard」（ストーリーボード）というファイルで作ります。Storyboardは、画面のレイアウトや、画面同士のつながり（画面遷移）を管理することができるファイルです。Interface Builderを使って編集できます。

Storyboardの役割

　Xcodeプロジェクトを新規作成したとき、「Main.storyboard」というファイルが自動で作られたと思います。これが、iPhoneアプリとして表示される画面のレイアウトを管理しているStoryboardファイルです。今回はこのファイルを編集し、「動く絵本アプリ」の動作に必要な部品を配置・レイアウトしていきます。

　1つのiPhoneアプリを作る上で複数のStoryboardファイルを扱うこともできますが、本連載ではあらかじめ作成されている「Main.storyboard」のみを使って画面レイアウトを作ります。

ルールに従って自動的にレイアウトしてくれる「Auto Layout」

　また、レイアウトには「Auto Layout」（オートレイアウト）という仕組みも使います。Auto Layoutは、画面上に配置する部品1つ1つの位置や大きさのルールを決めることで、どのような画面の大きさでもルールに従って自動的にレイアウトしてくれる仕組みです。

　iPhone 6sとiPhone 6s Plus、またはiPadといったデバイスは、それぞれ画面の大きさが異なります。Auto Layoutでは決められたルールに従い、それぞれの画面の大きさに合わせて自動でレイアウトしてくれます。

Auto Layoutの役割

　Auto Layoutで定義する位置や大きさのルールは「制約（Constraint、コンストレイント）」と呼びます。例えば、ある部品について「大きさを画面いっぱいにする」「正方形にする」「画面の中央に置く」といったような、さまざまな制約を付けることができます。

制約

　今回はこのAuto Layoutを使って、画面上に表示する部品のレイアウトを行います。

「動く絵本アプリ」の画面レイアウトを作ろう

　それでは、「動く絵本アプリ」の画面レイアウトを作成していきましょう。とは言っても、いきなりStoryboardファイルを編集する前にどのような画面を作りたいか考えることにしましょう。

　今回作る「動く絵本アプリ」では、まず「絵を表示する部品」が必要です。この部品に、ページ数に応じた絵を表示します。それに加えて、ページ数を切り替えられるように「戻るボタン」と「進むボタン」を置くこととします。これら3つの部品によって、ボタンをタップすると絵が切り替わるアプリを作ることができます。

「動く絵本アプリ」の画面レイアウト

　今回作ろうとしているアプリの画面のように、アプリの利用者（ユーザー）が見たり、触れたりすることができるもののことをUser Interface（ユーザーインタフェース）、または略して「UI（ユーアイ）」などと言います。また、ユーザーインタフェースを構成するボタンや絵などの部品のことを「UIコンポーネント（ユーアイコンポーネント）」と言います。

ユーザーインタフェース

　前回記事では、iPhoneアプリを作るためには「iOS SDK」に含まれている「UIKit」フレームワークを使うことを解説しました。「UIKit」フレームワークの「UI」はまさにユーザーインタフェースを指しており、ユーザーインタフェースに関連するクラスなどを提供しています。「UIKit」フレームワークは、ユーザーインタフェースを作るためには欠かすことができないフレームワークといえるでしょう。

「UIKit」フレームワーク

　「動く絵本アプリ」の画面上に置きたいUIコンポーネントは3つですが、種類で言うと「絵」と「ボタン」の2種類です。「UIKit」フレームワークには、それぞれに適したクラスが用意されています。

クラス名	読み方	機能
UIImageView	ユーアイイメージビュー	画像を表示することができるUIコンポーネント
UIButton	ユーアイボタン	タップできる、ボタンのUIコンポーネント

　この2種類のクラスを使って画面を構成していきます。UIImageViewは1つ、UIButtonは2つ配置します。