Xcodeのストーリーボードを使う方法【iPhoneアプリの画面が簡単に作れる】
Xcodeの「ストーリーボード（Storyboard）」の使い方を解説した初心者向けの記事です。iPhoneアプリのUIパーツや画面遷移をプログラミングコードなしで簡単に作ることが可能。画像を18枚使って丁寧に説明しています。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Xcodeを使ってiPhoneアプリを開発する際に使える「ストーリーボード（Storyboard）」という機能があります。
これを使うと、視覚的かつ直感的にアプリの開発を進めていくことができます。
今回はアプリ開発初心者でも使えるように、ストーリーボードの使い方をお伝えします。Storyboardの入門としてお読みください。
なおこの内容は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプをもとに紹介しています。
目次
今回の記事は少し長いので、下記の順番で説明していきます。
- ストーリーボードとは
- Xcodeでプロジェクトを開始する
- ストーリーボードの背景色を変える
- ストーリーボードに画面を追加する
- ストーリーボードにボタンを設置する
- ボタンをタップしたら画面が切り替わるようにする
- シミュレータで確認する
ストーリーボードとは
ストーリーボード（Storyboard）とは、Xcode4.2から導入された機能です。
ストーリーボードを使うと、アプリ画面のUIパーツのレイアウトや画面遷移を視覚的に作成することができます。
使う際にプログラミングの知識は不要ですので、ドラッグ&ドロップなどの操作で簡単に使うことができます。
なお、本記事ではXcode5.1のバージョンを使用しています。
Xcodeのインストール方法がわからない場合は、Xcodeのインストール方法の記事をご覧ください。
Xcodeでプロジェクトを開始する
それではストーリーボードを使ってみましょう。ストーリーボードを使うには、Xcodeでプロジェクトを開始する必要があるので、まずはそこから解説します。
最初にXcodeを起動しましょう。最初に下のような画面が出てきますので、赤枠をクリックします。
次に、どのようなプロジェクトにするか聞かれますので、赤枠（1）を選び、Next（2）をクリックしましょう。
さらに、プロジェクト名や開発するAppの対象デバイスを入力（1）し、Next（2）をクリックします。
最後にプロジェクトの保存先を聞かれます（1）ので、保存先を選択していきましょう。
ここでCreate（2）をクリックすればプロジェクトが開始されます。
ここまでは簡単ですね。
プロジェクトが開始できたらいよいよストーリーボードを編集していきます。
ストーリーボードの背景色を変える
ストーリーボードは、「Main.Storyboard」を開いて操作することになります。
Xcodeの左ペイン、ファイルツリー表記にある、”Main.storyboard”をクリックしましょう。
すると、ストーリーボード編集画面に切り替わります。
ここで表示された画面の背景色を変更してみます。
背景色の変更は、変更したいストーリーボードの画面を選択し、右ペインの(1)から”View”を開きます。
すると、中段あたりに”Background”とあるのがわかると思います(2)。
これをクリックすると、背景の種類を選択できるようになりますので、一番下にある”Other”をクリックします。
ここでカラーパネルが表示されますので、好きな色に変更しましょう。
今回はわかりやすいように、赤にしてみました。
背景色の変更方法は以上です。
ストーリーボードに画面を追加する
iPhoneアプリを開発するとなると複数の画面を用意して、切り替えて使うことが多いと思います。
ここでは、ストーリーボードでもう1つの画面を追加してみます。
右ペイン中段に、4つのアイコンがあります。
その右から2番目のアイコンをクリックし、”Veiw Controller”を探しましょう。それをストーリーボード画面にドラッグ＆ドロップします。
これだけで、ストーリーボードに画面が追加されました。
赤枠が元の画面、黄枠が追加した画面です。
ストーリーボードにボタンを設置する
続いて、ストーリーボード内にボタンを設置してみます。
コードを追加すればイラストをボタンにすることも可能ですが、今回はシンプルなボタンにします。
先ほど、画面を追加したメニューを下に進んでいくと、”Button”という項目があります。
これを、ボタンを設置したい画面にドラッグ＆ドロップしていきましょう。
今回は元の画面（背景色赤）にボタンを設置しました。
同様に追加した画面（背景色白）にもボタンを追加しておきましょう。
ボタンをタップしたら画面が切り替わるようにする
さらに、設置したボタンをタップしたら追加した画面に切り替わる（遷移する）ようにしていきます。
これができればアプリっぽいものができ上がります。
先ほど設置したボタンをControlキーを押しながらクリックし、画面遷移させたい画面にドラッグ＆ドロップします。
線が表示されるのですぐにわかると思います。
ここで画像のようなメニューがポップアップで表示されます。
これは、「ボタンをタップしたらどういうアクションにするか」を選ぶ画面です。今はなにも考えず赤枠の”modal”を選択しておきましょう。
すると、下の画像の赤枠のように画面間に矢印マークが追加されます。
これで画面は遷移しますが、遷移した先に何もないためそれ以上進めなくなってしまします。
そこで、白い画面（追加した画面）から赤い画面（元の画面）に戻るように設定しましょう。
やり方は先ほどと同じです。白い画面にボタンを設置して、赤い画面にControlキー＋ドラッグ&ドロップをします。
そうすると、先ほどの矢印マークが2重になり、赤→白、白→赤となっているはずです。
シミュレータで確認する
ここまで完了したら、正しくアプリが動作するかをiPhoneのシミュレータで確認します。
メニューバー左上にある再生ボタンをクリックするだけです。
（Xcodeのショートカットキーなら⌘＋R です)
シミュレータでボタンをタップします。
このように白い画面が表示されれば成功です。
ここでさらに、ボタンをクリックするともとの赤い画面に戻ることも確認できると思います。
今回の記事は以上です。
かなり基礎的な内容でしたが、Xcodeのストーリーボードの使い方がわかったのではないでしょうか。
合わせて初心者向けのXcodeショートカットキーの記事も読むと、よりXcodeが使いこなせるようになると思います。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。
