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のインストール方法の記事をご覧ください。
[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中
Xcodeでプロジェクトを開始する
それではストーリーボードを使ってみましょう。ストーリーボードを使うには、Xcodeでプロジェクトを開始する必要があるので、まずはそこから解説します。
最初にXcodeを起動しましょう。最初に下のような画面が出てきますので、赤枠をクリックします。
次に、どのようなプロジェクトにするか聞かれますので、赤枠（1）を選び、Next（2）をクリックしましょう。
さらに、プロジェクト名や開発するAppの対象デバイスを入力（1）し、Next（2）をクリックします。
最後にプロジェクトの保存先を聞かれます（1）ので、保存先を選択していきましょう。
ここでCreate（2）をクリックすればプロジェクトが開始されます。
ここまでは簡単ですね。
プロジェクトが開始できたらいよいよストーリーボードを編集していきます。
ストーリーボードの背景色を変える
ストーリーボードは、「Main.Storyboard」を開いて操作することになります。
Xcodeの左ペイン、ファイルツリー表記にある、”Main.storyboard”をクリックしましょう。
すると、ストーリーボード編集画面に切り替わります。
ここで表示された画面の背景色を変更してみます。
背景色の変更は、変更したいストーリーボードの画面を選択し、右ペインの(1)から”View”を開きます。
すると、中段あたりに”Background”とあるのがわかると思います(2)。
これをクリックすると、背景の種類を選択できるようになりますので、一番下にある”Other”をクリックします。
ここでカラーパネルが表示されますので、好きな色に変更しましょう。
今回はわかりやすいように、赤にしてみました。
背景色の変更方法は以上です。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
ストーリーボードに画面を追加する
iPhoneアプリを開発するとなると複数の画面を用意して、切り替えて使うことが多いと思います。
ここでは、ストーリーボードでもう1つの画面を追加してみます。
右ペイン中段に、4つのアイコンがあります。
その右から2番目のアイコンをクリックし、”Veiw Controller”を探しましょう。それをストーリーボード画面にドラッグ＆ドロップします。
これだけで、ストーリーボードに画面が追加されました。
赤枠が元の画面、黄枠が追加した画面です。
ストーリーボードにボタンを設置する
続いて、ストーリーボード内にボタンを設置してみます。
コードを追加すればイラストをボタンにすることも可能ですが、今回はシンプルなボタンにします。
先ほど、画面を追加したメニューを下に進んでいくと、”Button”という項目があります。
これを、ボタンを設置したい画面にドラッグ＆ドロップしていきましょう。
今回は元の画面（背景色赤）にボタンを設置しました。
同様に追加した画面（背景色白）にもボタンを追加しておきましょう。
ボタンをタップしたら画面が切り替わるようにする
さらに、設置したボタンをタップしたら追加した画面に切り替わる（遷移する）ようにしていきます。
これができればアプリっぽいものができ上がります。
先ほど設置したボタンをControlキーを押しながらクリックし、画面遷移させたい画面にドラッグ＆ドロップします。
線が表示されるのですぐにわかると思います。
ここで画像のようなメニューがポップアップで表示されます。
これは、「ボタンをタップしたらどういうアクションにするか」を選ぶ画面です。今はなにも考えず赤枠の”modal”を選択しておきましょう。
すると、下の画像の赤枠のように画面間に矢印マークが追加されます。
これで画面は遷移しますが、遷移した先に何もないためそれ以上進めなくなってしまします。
そこで、白い画面（追加した画面）から赤い画面（元の画面）に戻るように設定しましょう。
やり方は先ほどと同じです。白い画面にボタンを設置して、赤い画面にControlキー＋ドラッグ&ドロップをします。
そうすると、先ほどの矢印マークが2重になり、赤→白、白→赤となっているはずです。
シミュレータで確認する
ここまで完了したら、正しくアプリが動作するかをiPhoneのシミュレータで確認します。
メニューバー左上にある再生ボタンをクリックするだけです。
（Xcodeのショートカットキーなら⌘＋R です)
シミュレータでボタンをタップします。
このように白い画面が表示されれば成功です。
ここでさらに、ボタンをクリックするともとの赤い画面に戻ることも確認できると思います。
今回の記事は以上です。
かなり基礎的な内容でしたが、Xcodeのストーリーボードの使い方がわかったのではないでしょうか。
合わせて初心者向けのXcodeショートカットキーの記事も読むと、よりXcodeが使いこなせるようになると思います。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
