【＃9　音をならすアプリ・後編】コードを書いてみよう！

前回のレッスンは以下の通りです。プロジェクトを立ち上げて、無料の素材サイトからイラストや音声をダウンロードする手順を紹介しました。

今回は、前のレッスンの続きです。素材集めがまだなら、上記のサイトを参考にして「AnimalSounds」というプロジェクトを立ち上げてください。

1．部品を配置する

最初は、アプリの部品を配置します。画面の左はじにあるファイル群から「Main.storyboard」のファイルを選んでください。

次に、右上にある古銭のような「Objects」をクリックして、部品一覧を表示します。この中から「Button」という部品をiPhoneにドラッグ＆ドロップします。

次に、Buttonの部品を複製します。

Buttonを選択したら、Macのcommandキーと「C　そ」と書いてあるキーを押してください。これでButtonがコピーされました。次に、commandキーと「V　ひ」と書いてあるキーを押します。すると、Buttonが貼り付けられて2つに増えます。

この2つのButtonに、画像イメージを入れていきましょう。

右上にある「Attributes Inspector」（下矢印のようなマーク）をクリックします。その少し下に、「Button」と書いてある部分があります。それをdeleteキーを押して消しましょう。そのあとにEnterキーを押して確定すると、Buttonの文字が消えます。

次に下の「Image」と書いてある部分あります。右端の「▼」部分をクリックすると、取り込んだ画像ファイルが表示されます。そこで「dogImage」と書いてあるものを選びましょう。

同様に、右のButtonも操作して「catImage」ファイルを入れてください。イヌとネコの画像がうまく入ったら、縦に並べてみてください。うまくいくと次のようになります。

最後に、背景の部品を配置します。

右上のObjects（古銭マーク）から「ImageView」という部品を、iPhone画面の上にドラッグ＆ドロップしましょう。ImageViewは、画像を入れておくための部品です。

ImageViewを画面いっぱいに拡大してみてください。iPhoneXSのような場合、この画像のように時刻や電池残量もかぶるくらい拡大して構いません。

iPhoneの見た目を変更する場合は、「View as： iPhone〜」と書いてある部分の「Device」をクリックしましょう。自分が持っているiPhoneの機種を選んでください。iPhone6や7を持っている方は8を選びましょう。画面のサイズがほぼ同じです。

ようやく背景の画像を入れます。ImageViewの部品をクリックしてください。

右上のUtility Areaにある「Attributes Inspector」（下矢印のようなマーク）をクリックしたあと、同じUtility AreaのImageの▼を押して「background」を選択します。その少し下にあるContent Modeを「Aspect Fill」にします。Aspect Fillとは「縦横比をそのままにして画面いっぱいに表示する」という意味です。

このままだと、イヌもネコも見えないので、パーツの順番を入れ替えます。

エディターエリア（iPhoneの画面がある表示部分）の左にある部分が、各部品の重なりを表しています。リストの上に行くほど、画面の下の階層に位置していることになります。backgroundを選択して「Safe Area」と書いてあるところまでドラッグ＆ドロップしましょう。

うまくいくと、次のような見た目になります。

2．機種によって配置が乱れないようにする

このままでも見た目は悪くないのですが、機種を変更すると部品などの見た目が崩れてしまいます。レイアウトを整えていきましょう。最初は背景となる「background」からです。

まず、部品の「background」を選択します。右下にある「New Constraints」をクリックし、真ん中にある「Constants to margins」のチェックボックスを外します。これによって「画面の余白を考慮しない」という設定になります。画面の「I」のようなマーク4つをクリックして、破線から赤の実線に変更します。余白の数字は全部「0」にしてください。これによって、backgroundの部品が、上下左右の余白なし（すべて余白が0）になるということです。背景なので余白がない方がいいですよね。

すべて入力したら「Add 4 Constraints」を押してください。これで「4つの制約を入れましたよ」という意味になります。

イヌとネコのボタンを配置する前に、Xcodeの配置ルールを説明します。

iPhone画面を十字に分割したとき、右半分が水平方向のプラスで、下半分が垂直方向のプラスになります。逆に、左半分が水平方向のマイナスで、上半分が垂直方向のマイナスの値になります。このルールのもと、イヌを真ん中より少し上に配置するとなると、「水平方向はプラスマイナス0、垂直方向はマイナスの値」となることがわかります。

それを念頭に置いて、イヌのButtonをクリックしてください。

Xcodeの下の方のやや右にあるAlign（整列）のマークをクリックします。「水平方向はプラスマイナス0」なので、「Horizontally in Container」のチェックボックスをオンにして、値を0にします。垂直方向はマイナスなので「Vertically in Container」のチェックを入れて「-80」という値を入れます。

最後に「Add 2 Constraints」を押すと、指定の通りに整列するのがわかります。続けてButton部品の大きさを指定しましょう。

Align（整列）のマークの隣にある「Add New Constraints」（制約）マークをクリックします。正方形のアイコンにしたいので、幅（width）を180、高さ（Height）を180に指定して、チェックボックスが2つともオンになっていることを確認したあとで最後に「Add 2 Constraints」を押しましょう。これで、イヌのButton部品に制約がつきました。

次はネコのButton部品のレイアウトです。ネコはイヌの下に配置したいので、水平方向は犬と同じプラスマイナス0でいいのですが、垂直方向はプラスの値になることを念頭に置きましょう。

Xcodeの下にあるAlign（整列）のマークをクリックします。「水平方向はプラスマイナス0」なので、イヌのButton同様、「Horizontally in Container」のチェックボックスをオンにして、値を0にします。垂直方向はプラスなので「Vertically in Container」のチェックを入れて、犬とは逆の「80」という値を入れます。指定が終わったら「Add 2 Constraints」を押すのを忘れないでください。

続けてButton部品の大きさを指定しましょう。

Align（整列）のマークの隣にある「Add New Constraints」（制約）マークを押してください。イヌのButtonと同じ大きさにしたら少し大き目に見えてしまうので、幅（width）を160、高さ（Height）を160くらいがいいと思います。チェックボックスを2つともオンにしてから、「Add 2 Constraints」をクリックしてください。イヌと同じく、ネコのButton部品に制約がつきました。

無事に制約・整列の指定ができたら、iPhoneの種類を変えてみて、おかしいところがないかチェックします。Align（整列）のマークやAdd New Constraints（制約）マークの左に「View as:iPhone〜」と書かれたところがあります。その文字をクリックしてください。

「Device」を押すと、表示するiPhoneの見た目を変更できます。

わたしの場合、iPhone XS MaxとiPhone SEの画面を確認して、ButtonやImageが大きくずれていないかチェックします。

3．Buttonを押して音を鳴らす

最初に、イヌのButtonを押したら音がなるようにします。3行のプログラムを書いてください。

なるべく自分で打ち込んでください。エラーが出てなかなか直らないときのために、コードも貼っておきます。

//音を鳴らすフレームワークを取り込む
import AVFoundation

   //音声ファイルを管理する機能。""で囲んだ部分にファイル名を入れる
   let dogPath = Bundle.main.bundleURL.appendingPathComponent("dogSound.mp3")
   
   //音を鳴らす機能
   var dogPlayer = AVAudioPlayer()

「//音が鳴らすフレームワークを取り込む」など、「//」に続く文章は、Xcodeに読み込まれません。このように、人間相手に備忘録として書いてある部分を「コメント」と言います。実際には、Xcodeに打ち込まなくても大丈夫です。

エラーが出ないのを確認したら、イヌのButtonとプログラムを繋ぎます。最初に、Xcodeの右上にある中途半端なオリンピックマークのような部分をクリックしましょう。

左画面にiPhoneのボタン、右画面にコードが登場したらOKです。両方ともコードが出るなど表示がおかしかったら、下の画像の一番上にある「＜」や「＞」をクリックしてみてください。

いぬのButtonをクリックしたあと、Macのcontrolキーを押しながら、Buttonを右画面にドラッグ＆ドロップします。先ほど打ち込んだ「var dogPlayer = AVAudioPlayer()」の真下あたりがいいと思います。「{」「}」（中かっこ）の位置に気をつけてください。つないだプログラムの下に「}」が1つないとエラーが出ます。

Buttonには「dogSound」と名前をつけてください。一番上のconnectionが「Action」、Eventが「Touch Up Inside」となっていることを確認したら、右下の「Connect」ボタンを押して確定してください。

エラーが出ていないようなら、ネコのButtonも接続しましょう。

ネコのButtonには「catSound」と名付けてください。そのほかの確認部分は、イヌと同じです。一番上のconnectionが「Action」、Eventが「Touch Up Inside」となっていることをチェックして、右下の「Connect」ボタンをクリックしてください。

エラーが出ていないようなら、上記の画面のように1画面に戻すボタンを押しましょう。

4．プログラムをコピーして利用する

コードをがしがしと書いていきましょう。下の画像のピンクの（1）〜（3）を書いてしてください。

「うわぁ、長いなあ。けっこうダルいなぁ」と思った方はすばらしいです。プログラミングのお勉強では「複写OK、省力化大歓迎」です。よく見ると、（1）と（3）はそっくりです。つまり、（1）の部分を書いたらコピーして貼り付け、差分を書き換えればOKです。

（2）の部分をよく見ると、前に書いた青字の（4）と似ています。これもコピーをして貼り付け、「dog」を「cat」に置き換えましょう。

これでアプリは完成です。一応、全文を載せておきます。

「{」「}」（中かっこ）の位置に気をつけてください。この位置がずれるとエラーが出ます。

あとは「Bundle.main〜」の部分にも気をつけてください。Xcodeは入力補完機能があるので、途中まで入力すると候補が出てきます。この部分の最後は「〜appendingPathComponent」が正しいのですが、「〜appendPathComponent」という紛らわしい候補もあるので気をつけましょう。

それでは実行しましょう。上の画面のように、Xcodeの左上にある「AnimalSounds」と書かれた部分の右の「iPhone」と書かれたところをクリックしてください。いろんなデバイスが出てくると思います。ご自分のiPhoneで実行したい場合は一番上を選んでください。iPhoneを持っていない方やシミュレータで実行したい方は、お好きなものを「iOS Simulators」から選びましょう。

選び終わったら「▶︎」の実行ボタンを押します。うまく実行できましたか？よくあるミスは「ネコのボタンを押したのに、ワンという」ものです。再生ファイルの名前に気をつけてください。catであるべき部分のどこかがdogになっているはずです。

どうしてもエラーが解消しない方向けに、コードの全文も貼り付けておきます。

import UIKit
import AVFoundation

class ViewController: UIViewController {

   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
   }
   //音声ファイルを管理する機能。""で囲んだ部分にファイル名を入れる
   let dogPath = Bundle.main.bundleURL.appendingPathComponent("dogSound.mp3")
   
   //音を鳴らす機能
   var dogPlayer = AVAudioPlayer()
   

   @IBAction func dogSound(_ sender: Any) {
       do{
           //音声ファイルを、音を鳴らす機能に取り入れる
           dogPlayer = try AVAudioPlayer(contentsOf: dogPath, fileTypeHint: nil)
           
           //実際に音を鳴らす
           dogPlayer.play()
       
       } catch {
           //エラーが発生した（音声ファイルを読み込めなかった）時に表示する
           print("エラーが発生しました")
       }
   }
   
   let catPath = Bundle.main.bundleURL.appendingPathComponent("catSound.mp3")
   var catPlayer = AVAudioPlayer()
   
   @IBAction func catSound(_ sender: Any) {
       do{
           catPlayer = try AVAudioPlayer(contentsOf: catPath, fileTypeHint: nil)
           catPlayer.play()
       } catch {
           print("エラーが発生しました")
       }
   }
}

次回はコードの中身の解説をします。お疲れさまでした。

↓次のレッスンはこちら

↓これまでのレッスンです。参考にしてください。

【＃1 プログラミングの準備】
【＃2 背景変換アプリ】カンタンなコードを書いてみよう
【＃3 背景変換アプリ】プログラムの中身を理解してみよう
【＃4 Swift　iPhoneアプリをつくる流れを理解しよう】
【＃5　画像切替アプリ】お気に入りの写真を表示しよう
【＃6　画像切替アプリ】コードの内容を理解してみよう
【＃7 iPhoneアプリ開発でよく出るエラーをつぶそう！】
【＃8　音をならすアプリ・前編】素材を自分で集めよう！

↓私がいるプログラミングスクールです。

Step App School – つくる、うごく、だから楽しい。