初心者から始める楽器アプリの作り方（1/2）

それでは今回は、

簡単な楽器演奏アプリを作っていきたいと思います。

 

画面上に猫の画像を並べて、各猫をタップすると音がなってアニメーションする、

そして、自動演奏機能などもあるアプリを作っていきたいと思います。

 

それでは、Xcodeのプロジェクトを立ち上げていきます。

File > New の Projectですね。

 

今回、アプリのテンプレートで、一番シンプルな

Single View Applicationを選択します。

 

 Product Nameですけど、今回は、

Simple Pianoとします。

 

com.tekuru

ですね。

 

Swift

と

iPhone

を選択して、Next

です。

 

DesktopにCreateします。

新しいプロジェクトが立ち上がりました。

 

それではまず、画面を作っていきたいと思いますが、

素材の導入から始めていきましょう。

 

まず、この7種類の猫の画像をプロジェクトに取り込んでいきます。

ドラッグアンドドロップをして、

このように、3か所のチェックが入っていることを確認した上で、

Finishをクリックします。

 

ついでに、音声素材の方もいれていきましょう。

このそれぞれの絵に対応した7つの音声素材を入れていきます。

それぞれ、1.mp3から、7.mp3という名前になります。

 

それでは、

main.storyboardから、画面を作っていきたいと思います。

 

今回、AutoLayoutは必要ないので、

Use AutoLayoutoを外してしまいましょう。

このような画面になります。

 

それでは、先ほどの猫の画像を配置していきたいと思います。

画面右下のライブラリーからボタンを見つけます。

これですね。

ドラッグアンドドロップでのっけていきます。

 

そして、サイズをちょっと調整しまして、

右上のアトリビュートインスペクターで画像の設定を行います。

 

Typeをカスタムにして、

ボタンの表記を消した後に、

イメージを設定します。

このように大きさを調整します。

こんな感じですね。

この猫のボタンがこれでできました。

 

右の、サイズインスペクターで、Auto Sizingの設定を全て外しておきましょう。

こうしておくことで、画面サイズの変更に合わせて、

位置が自動調整されます。

 

コピーアンドペーストで、猫を置いていきます。

置いていきます。

このように、一つの猫の画像を使って、

初期配置のみ、やってしまいます。

こうですね。

 

では、各設定を行っていきます。

この猫は、タグを1番にしましょう。

この猫は、タグを2番にしましょう。

そして、イメージをcat2.pngにします。

 

この猫は、タグを3番にしましょう。

そして、イメージをcat3.pngにします。

 

この猫は、イメージをcat4.pngにして、

タグを、4番にします。

 

タグを使うことで、

Storyboard上のオブジェクトを

コード上から識別することが可能になります。

 

この猫は、5番ですね。

イメージがcat5.pngですね

 

この猫は、タグが6番ですね。

イメージをcat6.pngですね。

 

cat3.pngとcat6.pngは一緒ですね。

 

この猫は、cat7.pngになります。

そして、タグは7番ですね。

 

このように画像とタグの設定ができました。

 

次に、画面の下の方に、

ステータスバーを配置します。

これですね。

ツールバーですね。ツールバーを配置します。

 

アイテムを二つ配置します。

 

片方のアイテムのタイトルを、

Record、画面を録画できるようにしましょう。

 

もう一つは、Stopで、録画を中止できるようにしておきます。

このステータスバーは、常に画面の下部に貼りつくようにします。

Auto Sizingがこのような設定になっていれば大丈夫です。

 

では、コードの方を書いていきますね。

 

今回は、音声を再生する機能を実装しますが、

そのために、音を鳴らすためのクラスを新たに作っていきましょう。

 

New Fileで、

Cocoa Touch Classを選択します。

NSObjectを継承した

SoundManagerという名前の

Classを作っていきます。

 

LanguageはSwiftです。

Nextをタップして、Createして、

新たなファイルが出来上がりました。

 

この中にすでに、SoundManagerの内容が、

Classのひな型が書かれています。

 

このClassの中身ですけど、

このように書き換えてください。

 

まず、今回音声の再生を取り扱いますので、

AVFoundationをインポートする必要があります。

 

SoundManagerの宣言ですけど、

これは、先ほど書いた通りですね。

var player:AVAudioPlayer? = nil

としておきます。

 

プレイヤーを使って、音声の再生を行います。

AVAudioPlayerは、オプショナル型にしておいて、

nilを入れとくわけですね。

soundVolumeは、初期状態として1.0を設定しておきます。

 

playメソッドを書きます。

これは、ファイル名を文字列のstring型、文字列型で受け取って、

そのファイル名の音声を再生するという仕組みになっています。

 

タップを検知するために、

字をTappedと変えます。

これは、いらないですね、失礼しました。

こう変えておきます。

 

soundPathですね、これが、ファイルのパスになります。

iPhoneの中のどこに音声ファイルがあるのか。

NSBundleのmainBundleにありますので、

このようにパスを指定してやれば大丈夫です。

 

それに、ファイル名を加えることで、

そのファイルへのパスを取得することができます。

 

その文字列のパスをNSURL型に変更します。

そして、そのURLをプレイヤーを使って再生してやるわけですね。

プレイヤーをいったんやめて、nilを入れてやって、

再生します。

 

それで、tryを使うことで、

AVAudioPlayerができなかった場合の例外処理を行うことができるわけですね。

 

このプライヤーがnilでなければ、

prepareToPlayして、再生してやります。

 

では、次に、

ViewControllerの中身を書いていきます。

このように記述します。

まず、先ほどのSoundManagerと同じく、

AVFoundationを入れてやります。

 

あと、今回画面の録画機能を入れますので、

ReplayKitも入れてやります。

 

ViewControllerの中身なのですが、

まず、先ほどのSoundManagerクラスを初期化して、

SoundManagerという変数に入れています。

 

今回はlet型ですので、

あとから変更することはできません。

 

soundArrayですね、これは、演奏する曲を入れてやります。

今回は、チューリップの曲の最初の部分を入れてます。

 

timeArrayは、SoundArrayは音程なのですが、

timeArrayには、音声の感覚を入れていやります。

1秒、1秒、2秒、1秒となっています。

count がゼロですね。

これは、なんばんめの音程がなっているかを入れる変数になります。

 

AutoPlayより先に、ButtonTappedの方を解説しましょう。

各猫のボタンがタップされると、Tappedと、コンソールに表示された後に、

soundManager.Playにより、音声が再生されます。

 

今回、1～7までのmp3ファイル、

1.mp3～7.mp3までのファイルが再生されますので、

senderの持っているタグに、mp3という文字をつけてやれば、ファイル名になるわけです。

それを、soundManagerに渡してやります。

そのあと、doAnimationメソッドが呼ばれます。

 

doAnimationメソッドの中身は、このようになります。

Viewを受け取って、そのViewの座標を20だけ上にずらして、

そのあとに20だけ元に戻すという仕組みになっています。

その際のアニメーションの所要時間は0.5秒ですね。

delayが0ですので、遅延はなしです。

 

options

UIViewanimationOptionsのCurveEaseInOutの設定をしていますが、

これによって、最初はゆっくりで途中で加速して、最後もゆっくりなアニメーションになります。

この記述により、上に20だけ移動して、また下に20戻るというアニメーションが実現できます。

 

AutoPlayを見ていきましょう。

StartAutoPlayに対応するボタンが押された時に、

カウントの値を0に置いて、autoPlayが呼ばれます。

autoPlayの中身では、countの値がsoundArray.count以上であればリターンされます。

つまり、配列の要素数をカウントオーバーしていれば、

実行されずに、ここでautoPlayは終了になります。

 

そして、soundManagerPlayにより、音声の再生が行われます。

その際、音程はsoundArrayの方から取得されます。

そして、それに対応したファイル名の音声が再生されます。

そして、ボタンを取得します。

ボタンをself.View、つまり、ベースとなる画面から

viewWithTagを使って取得されます。

これも、対応したタグですね、音程とタグが対応しますので、

soundArrayから取得してやります。

doAnimationより、アニメーションが実行されます。

 

そして、インターバルを取得します。

timeArrayから取得します。

対応した時間感覚をtimeArrayから取得してInterbalに入れてやります。

そして、NSTimer.scheduledTimerWithIntervalで、

一定時間後に再びAutoPlayが呼ばれるようになります。

インターバルの時間後に、self、このViewControllerの中のAutoPlayを再び呼んでください。

userInfoがnilですので、AutoPlay側には特にデータを渡しません。

repeatsがfalseですので、繰り返し実行されることはありません

この記述により、Interval時間後に、AutoPlayメソッドが一回だけ呼ばれるということになります。

 

AutoPlayが1回呼ばれるごとに、Countの値を1ずつ増やしてやります。

この処理によるAutoPlayが繰り返し呼ばれ、自動演奏がされることになります。

 

recordTappedというメソッドもあります。

これは何かと言いますと、画面の録画を開始するメソッドです。

RPScreenRecorder.sharedRecorder().startRecordingWithMicrophoneEnabled

メソッドにより、簡単に画面の録画を開始することができます。

 

また、録画を終了するときは、StopTappedメソッドが呼ばれます。

stopRecordingWithHandlerメソッドにより、録画が終了されます。

その際に、このpresentViewControllerを画面に表示することで、

録画した画面を表示させることができます。

 

録画した動画が再生されます。

 

それでは、StoryBoardの方に行って、

コード上のメソッドとstoryboard上のオブジェクトの接続を行いましょう。

 

View Controllerをここ、もしくはここで選択しまして、

Received Actionsがあります。

まず、ButtonTappedを、Touch Downで各猫と紐付けていきます

TouchDownは、指を置いた瞬間に実行されますので

楽器演奏の時にストレスを感じることなく演奏できるかなと思います。

 

通常のボタンは、Touch Up Insideを選択されることが多いのですが、

ゲームや楽器演奏アプリなどでは、Touch Downの方がストレスなく

アプリを楽しむことができるかなと思います。

 

このように、Record TappedをRecord ボタンに紐付けます。

Start AutoPlayボタンは今から配置しますね。

Stop Tapped Buttonをここと紐付けます。

自動演奏ボタンを画面上に配置します。

ボタンを探して、画面の左上にでもおきましょう。

 

ちょっと領域を広げまして、

表示を変えます。

Titleを、▶︎に変えましょう。

フォントを大きくします。

紐付けを行います。

 

Start AutoPlayメソッドを、この▶︎と紐付けます。

Touch Up Insideにします。

 

それでは、実際にアプリを実行してみて、動作を確認してみます

 

シミュレーターが起動するまで少々時間がかかります。

なお、先ほどの、画面の録画のためのメソッドですけど、

シミュレーターでは確認することができませんので、

もし、興味ある方がいましたら、実機の方で動かして各自確認してみてくださいね。

 

アプリの方が立ち上がりました。

はい、表示されましたね。

各猫をタップすると、音がなります。

そして、各猫がアニメーションしている様子がわかりますね。

各猫が、タップした時に黒く反転しちゃってますね。

それを解除しましょう。

猫を全て選択しまして、

Highlighted Adjusts imageと、

Disabled Adjusts imageを解除します。

そうすることで、選択した時に猫が暗く反転することがなくなります。

 

このように、スムーズに動作するようになりましたね。

 

それでは、録画、ではなくて、

AutoPlay機能を実行してみましょう。

チューリップの曲が演奏されていますね。

 

このようにして、このアプリを使うことで好きな曲を

自動演奏で演奏することができるようになります。

 

興味ある方は、是非、ご自身の好きな曲をコードの方に入力してみて、

演奏してみてくださいね。

 

今回の内容は以上になります。

 

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。

 

どこよりも楽しく学べるアプリ開発スクールを運営しています。

フォローしてしてくれると、とてもうれしいです☆

Facebook

https://www.facebook.com/techool

 

Twitter

https://twitter.com/TekuruSchool

 

YouTubeチャンネル

https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow

 

毎週土曜日の夜に動画のアップロードをしています。

よければ、チャンネル登録お願いします！

ソースコードや、操作の仕方、などなど、

なんでも気軽にコメントください。