鳴き声足し算ゲームiPhoneアプリを作成してみよう(Part3)

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回は前回に引き続き、「鳴き声足し算ゲームiPhoneアプリ」を作成していきたいと思います。

このアプリは、ある数字が表示されたあと、何と何を足したらその数字になるか考えるゲームです。また、数字を選択するときにかわいい音もならしてみたいと思います。この音をイヌやネコにすることでキッズ向けアプリケーションにもなります。

この章では、数字をタップすると、音がなるようにを作成していきたいと思います。今回は、ネコの鳴き声にしてあります。

それでははじめていきましょう!

《前回までの講座》


iPhoneアプリ開発の環境を整えよう
iPhoneアプリ開発に必要なこと
プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
プログラムなしで、カラフルカードアプリを開発してみよう
お気に入りのサイト集アプリを開発してみよう
ノートメールアプリを開発してみよう(Part1)
ノートメールアプリを開発してみよう(Part2)
10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)
10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)
嘘電話アプリを開発してみよう
パスワードiPhoneアプリ作成してみよう(Part1)
パスワードiPhoneアプリ作成してみよう(Part2)
パスワードiPhoneアプリ作成してみよう(Part3)
パスワードiPhoneアプリ作成してみよう(Part4)
ToDoリストiPhoneアプリを作成してみよう(Part1)
ToDoリストiPhoneアプリを作成してみよう(Part2)
ToDoリストiPhoneアプリを作成してみよう(Part3)
ToDoリストiPhoneアプリを作成してみよう(Part4)
鳴き声足し算ゲームiPhoneアプリを作成してみよう(Part1)
鳴き声足し算ゲームiPhoneアプリを作成してみよう(Part2)


音声ファイルをプロジェクトへ取り込む

xcode_gameth1
それでは、音声ファイルを取り込んでいきたいと思います。
mp3の音源を準備し、それをプロジェクトへドラッグ&ドロップしてください。
xcode_gameth2

音源が必要な方はこちらから

jokersounds.com

ここでは、neko.mp3を取り込みました。

音声用フレームワークを導入する

今までの講座の中で、フレームワークを導入して処理を行うことをしてきたと思います。
ここでも同様に音声用のフレームワークを使用して音声を鳴らしてみたいと思います。
まず。赤い部分を選択した状態で、
xcode_gameth3

下へスクロールすると、赤い部分に+と書かれた箇所があるのでそこをクリックします。
xcode_gameth4

検索窓が出てきますので、AVFoundation.frameworkを選択し、Addをクリックします。
xcode_gameth5

下のように導入されたら準備完了です。
xcode_gameth6

とりこんできたもののプログラムを確認する

今回は、外部からとりこんだ数字のみのキーボードに対して、数字をタップすると音を鳴らすという処理をしていきます。
ということは、cocoa podsを用いて取り込んだもののプログラムを改変しなければなりません。
そのプログラムの見つけ方について説明します。

まず、下記のようにデリゲートの箇所をcommandをクリックしながら選択します。
xcode_gameth7
すると、そのプログラムの.hファイルへ行きました。
xcode_gameth8
ただ、具体的な処理が記述されているのは実装ファイルである.mファイルなので、
赤い部分をクリックして、
xcode_gameth9
.mファイルを選択すると、ロックがかかっています。
赤い部分をクリックして、ロックを解除します。
xcode_gameth10

すると、実装ファイルを確認することができました。

次に、キーボードをタップした時に反応する場所を探していくのですが、その前にフレームワークを使えるようにインポートしておきます。
xcode_gameth11

[objc]
#import <AVFoundation/AVFoundation.h>
[/objc]

次に音声再生ようの変数を準備します。
xcode_gameth12

[objc]
AVAudioPlayer *audioPlayer
[/objc]

そして、下記のようにボタンをタップしたときに反応する箇所を見つけました。
xcode_gameth13
ここに音声を再生するプログラムを書いていきます。
xcode_gameth14

下記のように記述します。

[objc]
NSError *error = nil;
// 再生する audio ファイルのパスを取得
NSString *path = [[NSBundle mainBundle] pathForResource:@"neko" ofType:@"mp3"];
// パスから、再生するURLを作成する
NSURL *url = [[NSURL alloc] initFileURLWithPath:path];
// auido を再生するプレイヤーを作成する
audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:&error];
audioPlayer.numberOfLoops = 0;
[audioPlayer play];

[/objc]

以上で完成です。

シミュレーターで確認してみよう

それでは、本当にタップしたときに音がなるかためしてみてください。
xcode_gameth15

このように連続でクリックしてもにゃーという音がなるのがわかります。
xcode_gameth16

最後に

いかがでしたか?
もし今日にのある方はキッズアプリのように、背景に画像をつけてみましょう。

画像の素材はこちらからダウンロードしてみてください。

画像をドラッグ&ドロップして、プロジェクトへ導入したあと、イメージビューを置いてそこに設定します。
xcode_gameth19
イメージビューは最下部へ配置しなおして完成です。
xcode_gameth20

背景画像をセットして、音をつけてあげて、かつキーボードやイントロダクションを外部から取り込むことで、子供が喜びそうな本格的な知育系アプリにしてみたいと思います。
xcode_gameth21
ぜひオリジナルアプリをつくるときに参考にしてみてください。
次回もお楽しみに。