Xcodeのストーリーボードを使う方法【iPhoneアプリの画面が簡単に作れる】

Xcodeの「ストーリーボード(Storyboard)」の使い方を解説した初心者向けの記事です。iPhoneアプリのUIパーツや画面遷移をプログラミングコードなしで簡単に作ることが可能。画像を18枚使って丁寧に説明しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

Xcodeを使ってiPhoneアプリを開発する際に使える「ストーリーボード(Storyboard)」という機能があります。

これを使うと、視覚的かつ直感的にアプリの開発を進めていくことができます。

 

今回はアプリ開発初心者でも使えるように、ストーリーボードの使い方をお伝えします。Storyboardの入門としてお読みください。

なおこの内容は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプをもとに紹介しています。

 

目次

今回の記事は少し長いので、下記の順番で説明していきます。

 

 

ストーリーボードとは

ストーリーボード(Storyboard)とは、4.2から導入された機能です。

ストーリーボードを使うと、アプリ画面のUIパーツのレイアウトや画面遷移を視覚的に作成することができます。

使う際にプログラミングの知識は不要ですので、ドラッグ&ドロップなどの操作で簡単に使うことができます。

 

なお、本記事ではXcode5.1のバージョンを使用しています。

Xcodeのインストール方法がわからない場合は、Xcodeのインストール方法の記事をご覧ください。

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

Xcodeでプロジェクトを開始する

それではストーリーボードを使ってみましょう。ストーリーボードを使うには、Xcodeでプロジェクトを開始する必要があるので、まずはそこから解説します。

 

最初にXcodeを起動しましょう。最初に下のような画面が出てきますので、赤枠をクリックします。

プロジェクト開始

 

次に、どのようなプロジェクトにするか聞かれますので、赤枠(1)を選び、Next(2)をクリックしましょう。

プロジェクト開始2

 

さらに、プロジェクト名や開発するAppの対象デバイスを入力(1)し、Next(2)をクリックします。

プロジェクト開始3

 

最後にプロジェクトの保存先を聞かれます(1)ので、保存先を選択していきましょう。

ここでCreate(2)をクリックすればプロジェクトが開始されます。

プロジェクト開始4

ここまでは簡単ですね。

プロジェクトが開始できたらいよいよストーリーボードを編集していきます。

 

 

ストーリーボードの背景色を変える

ストーリーボードは、「Main.Storyboard」を開いて操作することになります。

Xcodeの左ペイン、ファイルツリー表記にある、”Main.storyboard”をクリックしましょう。

Main.Storyboard

 

すると、ストーリーボード編集画面に切り替わります。

背景色変更1

 

ここで表示された画面の背景色を変更してみます。

背景色の変更は、変更したいストーリーボードの画面を選択し、右ペインの(1)から”View”を開きます。

すると、中段あたりに”Background”とあるのがわかると思います(2)。

背景色変更2

 

これをクリックすると、背景の種類を選択できるようになりますので、一番下にある”Other”をクリックします。

背景色変更3

 

ここでカラーパネルが表示されますので、好きな色に変更しましょう。

今回はわかりやすいように、赤にしてみました。

背景色変更4

背景色の変更方法は以上です。

 

 

ストーリーボードに画面を追加する

iPhoneアプリを開発するとなると複数の画面を用意して、切り替えて使うことが多いと思います。

ここでは、ストーリーボードでもう1つの画面を追加してみます。

 

右ペイン中段に、4つのアイコンがあります。

その右から2番目のアイコンをクリックし、”Veiw Controller”を探しましょう。それをストーリーボード画面にドラッグ&ドロップします。

画面追加1

 

これだけで、ストーリーボードに画面が追加されました。

画面追加2

赤枠が元の画面、黄枠が追加した画面です。

 

 

ストーリーボードにボタンを設置する

続いて、ストーリーボード内にボタンを設置してみます。

コードを追加すればイラストをボタンにすることも可能ですが、今回はシンプルなボタンにします。

 

先ほど、画面を追加したメニューを下に進んでいくと、”Button”という項目があります。

これを、ボタンを設置したい画面にドラッグ&ドロップしていきましょう。

ボタン設置1

 

今回は元の画面(背景色赤)にボタンを設置しました。

ボタン設置2

同様に追加した画面(背景色白)にもボタンを追加しておきましょう。

 

 

ボタンをタップしたら画面が切り替わるようにする

さらに、設置したボタンをタップしたら追加した画面に切り替わる(遷移する)ようにしていきます。

これができればアプリっぽいものができ上がります。

 

先ほど設置したボタンをControlキーを押しながらクリックし、画面遷移させたい画面にドラッグ&ドロップします。

線が表示されるのですぐにわかると思います。

画面遷移1

 

ここで画像のようなメニューがポップアップで表示されます。

画面遷移2

これは、「ボタンをタップしたらどういうアクションにするか」を選ぶ画面です。今はなにも考えず赤枠の”modal”を選択しておきましょう。

 

すると、下の画像の赤枠のように画面間に矢印マークが追加されます。

画面遷移3

 

これで画面は遷移しますが、遷移した先に何もないためそれ以上進めなくなってしまします。

そこで、白い画面(追加した画面)から赤い画面(元の画面)に戻るように設定しましょう。

 

やり方は先ほどと同じです。白い画面にボタンを設置して、赤い画面にControlキー+ドラッグ&ドロップをします。

そうすると、先ほどの矢印マークが2重になり、赤→白、白→赤となっているはずです。

 

 

シミュレータで確認する

ここまで完了したら、正しくアプリが動作するかをiPhoneのシミュレータで確認します。

メニューバー左上にある再生ボタンをクリックするだけです。

Xcodeのショートカットキーなら⌘+R です)

 

シミュレータでボタンをタップします。

画面遷移4

 

このように白い画面が表示されれば成功です。

画面遷移5

ここでさらに、ボタンをクリックするともとの赤い画面に戻ることも確認できると思います。

 

 

今回の記事は以上です。

かなり基礎的な内容でしたが、Xcodeのストーリーボードの使い方がわかったのではないでしょうか。

合わせて初心者向けのXcodeショートカットキーの記事も読むと、よりXcodeが使いこなせるようになると思います。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。