TimeCapsule Inc. 
これまで学習したことを、ピアノアプリを作成しながら確認していきましょう。
ピアノアプリは各パーツの配置の他に、画面の向きの設定や各種画面サイズに合わせたレイアウトを作成するための「AutoLayout」、音を鳴らすために使う「ライブラリ」の活用についても学んでいきます。
【本項の目次】
- ピアノアプリの概要
このレッスンでは、ピアノアプリを作成していきます。
その過程で「AutoLayout」「ライブラリの活用」についても学んでいきましょう。 - プロジェクトの作成
このレッスンでは、デモアプリを通してアプリの作成を解説します。
音の出るピアノアプリを作成していきましょう。- 画面をランドスケープ（横向き）に設定
このアプリは横向きのデザインなので、画面の向きは横向きに固定します。 - リソースの追加
アプリで使うリソース（今回は画像と音ファイル）を追加しましょう。
- 画面をランドスケープ（横向き）に設定
- パーツの配置
パーツ（画像）を確認しながら、実際にStoryboardを使って配置してみましょう。- 白鍵の配置
UIButtonをStoryboard上に置きます。
タイプをカスタム、大きさを（75,600）、場所を(0,0)に、画像をkeyboard_white.pngに設定します。 - 黒鍵の配置
UIButtonをStoryboard上に置きます。
タイプをカスタム、大きさを（40,500）、場所を(55,0)に、画像をkeyboard_black.pngに設定します。 - 天板の配置
UIImageViewをStorybord上に置きます。
大きさを(600,98)、場所を(0,0)に、画像をtop_frame.pngに設定します。
- 白鍵の配置
- タグ
ボタンにタグを設定します。
タグとはパーツをプログラムから区別するための番号です。- AutoLayout
「AutoLayout」はUIパーツの位置や寸法を再計算してくれる機能です。
AutoLayoutを使用することで、iPhoneの各画面サイズに対応したレイアウトを作成することができます。
開発者の意図通りのレイアウトになるようにするには、画面要素（UIパーツ）に対して適切な「制約(Constraint)」を課す必要があります。 - 天板のレイアウト
サイズ600×600（ポイント）の正方形の画面にパーツを配置しています。
600×600の大きさは縦も横もiPhoneのサイズとは違いますが、ここにAutoLayoutを入れることによって、全てのiPhoneやiPadのサイズに大きさを合わせていきます。 - 白鍵のレイアウト
上下左右の端とボタン同士とをそれぞれ接続します。 - 黒鍵のレイアウト
UIViewを利用してスペーサーを作ります。
黒鍵自体は（間が抜けているだけで）、規則的に並んでおり大きさも同じなので、黒鍵の大きさのスペーサーとその間を補完するスペーサーで、白鍵と同じような規則的な並びが作れます。 - エラー
AutoLayoutはプログラミングと違い、エラーになっても止まりません。
そのため、アプリ自体は問題なく動いていても、レイアウトが崩れている場合があります。
基本的にはAutoLayoutの設定を修正する必要がありますが、このアプリのように、エラー警告から自動修正できる場合もあります。
- AutoLayout
- 音を再生する
ボタンを押すと音が鳴るようにプログラムしていきましょう。アプリで音を出すためには、いくつかの設定や準備をする必要があります。- 完成コード
まずは完成コードを見ていきましょう。コードについては以降の項目で解説をしていきます。 - 音声ライブラリの準備
今回はXcodeに初期から入っているライブラリの一つ「AVFoundation」を使用します。
ライブラリとは、機能の塊をファイル化したものです。 - メンバ変数
{}で囲まれた中に記載された変数（ローカル変数）は、{}の中でしか取り扱うことが出来ません。
そのため、複数のメソッドで同じ変数を使用したい場合は、メンバ変数（インスタンス変数）として宣言をする必要があります。 - メソッド
プロジェクト作成時にXcode側で準備されているメソッドと、自分で作成するメソッドのそれぞれの機能とプログラムの流れについて、完成コードを見ながら確認していきましょう。
- 完成コード
- まとめ
