この物語は、Objective-Cに関して何の知識も無いライターが、自作アプリをリリースするまでを追う完全ドキュメントである。

▼ 前回までの記事はこちら。
【第１回】Apple Developer Programへの登録方法
【第２回】Xcodeの基本知識と使い方
【第３回】画面遷移するアプリを作る
【第４回】音が鳴るアプリを作る
【第５回】ギターアプリを作る

　こんにちは、いっしーです。前回で（一応）楽器アプリを作ることができました。

　さて今回からは、「App Storeでリリースする！」という明確な目的を持って、アプリの制作をしてみたいと思います！

アプリを決める

　まずは当然ながら、どんなアプリを開発したいか決めます。

　私は眠れないときに「ゆったりした音楽を聴きたい」と思う事があるので、「リラックス音楽アプリ」を作ってみようと思います。（簡単そうだし…w）

　なんか「森の画像」とか「暖炉の画像」とかページがあって、画面中央をタッチすると音が鳴る…みたいな。

※商用として成功したいなら、本当はデザインカンプや競合アプリのリサーチ等を行う必要がありますが、今回はその辺どーでもいいのでやりません！

まずはプロジェクトの作成

　まずはプロジェクトを作りましょう。以前説明した事なのでサラッといきます。

「Create a new Xcode project」> 「Single View Application」を選択します。

・Product Name：「RelaxingSounds」で設定
・Organization Name：「isshy」で設定
・Company Identifier：「com.ioapps」で設定
・Devices：「iPhone」で設定

素材を用意する

　素材を用意します。今回は、背景用の画像5枚と、ボタン用の画像5枚、音素材5つを用意しました。

　Xcode左カラムの「Supporting Files」の中に突っ込んじゃいましょう。

画面を用意する

　「Main.storyboard」を選択し、「Image View」を配置。右カラムの「Image」プルダウンを「forest.jpg」に変更します。

表示は「Aspect Fit」にします。

「フレームワーク」を追加

　右カラムの最上層「SoundTest」を選択し、「Build Phases」>「Link Binary With Libraries」から「AVFoundation.framework」を追加します。

「ViewController.h」の #import <UIKit/UIKit.h> の下に、忘れず記入しましょうね。

#import <AVFoundation/AVFoundation.h>

　ちょっと早歩きで来ちゃいましたが、ここまではもう既に3回やってるので大丈夫ですね。

音を実装する

　音を実装する工程です。

　「ViewController.h」の @interface ViewController : UIViewController の下に以下を記述します。

@property AVAudioPlayer *forest;
– (IBAction)playSound: (id)sender;

　次に、「ViewController.m」の @implementation ViewController の下に以下を記述します。

– (void)viewDidLoad {
   [super viewDidLoad];

NSString *path1 = [[NSBundle mainBundle] pathForResource:@”forest” ofType:@”m4a“];
NSURL *url1 = [NSURL fileURLWithPath:path1];
self.forest = [[AVAudioPlayer alloc] initWithContentsOfURL:url1 error:NULL];
}

– (IBAction)playSound: (id)sender {
        UIButton * PressedButton = (UIButton*)sender;
        switch(PressedButton.tag)
    {
        case 1:
            if (self.forest.playing) [self.forest stop];
            else {
                _forest.numberOfLoops = -1;
                [self.forest play];
            }
            break;
           }
}

タグは「1」に設定しますね。（タグによる振り分けについては前回やったので大丈夫ですね？）

　ちなみに、タグの中に「//」を入れると、その行はコメントとして処理されます（プログラムには影響がでません）。

ボタンにアクションとタグを割り当てる

　「音を出す」動作をボタンに割り当てる工程です。

　Xcode右下のツール一覧から「Button」を選び、画面の真ん中に配置。小さすぎると押しづらいので、広げます。

　次に、ボタンに最初から入っている「Button」の文字を消し、透明なボタンにします。右カラムの「Tag」を「1」にし、最後に、画面を2分割したあと、「playSound」とボタンを紐づけます。

これで、「森の音が鳴る」アプリは完成しました！（ついてこれなかった人は前回の記事を復習しましょう！）

他の音（画面）も追加してみよう

　肝心なのはここから。他にも、「朝の小鳥のさえずり」「雨の音」「暖炉の火」「水滴が落ちる音」の4つを追加したいです。

　ということで、以前やった要領で、Xcode右下のパーツ一覧から「View Controller」を配置し、画面を増やします。

（事情があるので、他の画面の音の実装は一旦待機で。）

　次に、「他の画面に遷移するためのボタン」を作ります。それぞれの画面の下方に5つのボタンを配置して、「Background」の項目を変更します。

　このようになりましたか？これらができたら、コピペして他の画面にも追加させておきましょう。（現在いるページのアイコンは半透明にするなりで差別化させるといいでしょう）

画面遷移をタグで実装する

　さぁ、画面遷移を実装する方法です。

　最初に思いついたのは、第3回でやった「セグエ」による遷移方法。ボタンを「Control」を押しながらクリックして、そのまま他の画面に持っていって離す、というやり方です。

これをやると…グチャグチャじゃねーか！

　しかも重いのかよく落ちる。調べてみると、「セグエ」は基本的に一方通行でしか使えないのだそう。先言えよ…。

　ということで、タグで画面遷移を行います。（セグエをつける前の状態に戻すには、画面間の矢印をクリックしてdeleteするだけです）

クラスを作る

　まず、画面毎に「クラス」というものが必要らしいのです。クラスってなんでしょうね！知りません！

　Xcodeのメニュー「File > New > File」から、「Objective-C class」を選びます。

Class「MorningViewController」、Subclass of「UIViewController」で設定します。

　これを完了すると、Xcode左カラムに「MorningViewController.h」と「MorningViewController.m」が追加されます。

　「Main.storyboard」の画面に戻り、「Morning」の画面を選択した状態で、右カラムのカードみたいなマークをクリックし、「Class」の項目を「MorningViewController」に変更します。同時に、その下の「Storyboard ID」を「morning」に変更します。

　これで、「Morning」画面の下準備が完了しました。

音の実装をしてみよう

　あとは、「Forest」と同じように音の実装をしましょう。

　「ViewController.h」の #import <UIKit/UIKit.h> の下に

#import <AVFoundation/AVFoundation.h>

を書き、@interface MorningViewController : UIViewController の後に

@property AVAudioPlayer *morning;
– (IBAction)playSound: (id)sender;

を宣言しといて、「MorningViewController.m」に

– (void)viewDidLoad {
   [super viewDidLoad];

NSString *path2 = [[NSBundle mainBundle] pathForResource:@”morning” ofType:@”m4a“];
NSURL *url2 = [NSURL fileURLWithPath:path2];
self.morning = [[AVAudioPlayer alloc] initWithContentsOfURL:url2 error:NULL];
}

– (IBAction)playSound: (id)sender {
        UIButton * PressedButton = (UIButton*)sender;
        switch(PressedButton.tag)
    {
        case 2:
            if (self.morning.playing) [self.morning stop];
            else {
                _morning.numberOfLoops = -1;
                [self.morning play];
            }
            break;
           }
}

と書き、画面中央に透明ボタンを配置…「Tag」を「2」に設定…「playSound」とボタンを紐づける…と、同じことをすればOK。

同じことを他の画面でもやってみよう

　これらを5つすべての画面について行います。

・「RainViewController」「DropViewController」「FireViewController」クラスを作る
・それぞれの画面を選択した状態で右カラム「Class」の項目を「○○ViewController」に変更する
・その下の「Storyboard ID」を「○○」に変更する
・それぞれの「○○ViewController.h」にAVFoundationフレームワークを書き、音「*○○」とアクション「playSound」を宣言する
・それぞれの「○○ViewController.m」に、音素材をロードするviewDidLoadと、playSoundのメソッドを書く
・画面上にボタンを設置し、playSoundアクションと紐付け、「Tag」をそれぞれ「3」「4」「5」に設定する

画面遷移用のタグを実装する

最後に、画面遷移用のタグを入れます。

　まずはすべての「.m」ファイルの#importに以下を記述します。

#import “ViewController.h”
#import “MorningViewController.h”
#import “RainViewController.h”
#import “DropViewController.h”
#import “FireViewController.h”

　次に、同じ画面内に以下を記述します。

– (IBAction)registeredButton:(id)sender {

UIButton * PressedButton2 = (UIButton*)sender;

switch(PressedButton2.tag)
  {
//Forestをストップして「Morning」へ
   case 2:
     {
[self.forest stop];
MorningViewController *mycontroller2 = [self.storyboard instantiateViewControllerWithIdentifier:@”morning“];
[self presentViewController:mycontroller2 animated:YES completion:nil];
break;
     }

//Forestをストップして「Rain」へ
   case 3:
     {
[self.forest stop];
RainViewController *mycontroller3 = [self.storyboard instantiateViewControllerWithIdentifier:@”rain“];
[self presentViewController:mycontroller3 animated:YES completion:nil];
break;
     }

//Forestをストップして「Drop」へ
   case 4:
     {
[self.forest stop];
DropViewController *mycontroller4 = [self.storyboard instantiateViewControllerWithIdentifier:@”drop“];
[self presentViewController:mycontroller4 animated:YES completion:nil];
break;
     }

//Forestをストップして「Fire」へ
   case 5:
     {
[self.forest stop];
FireViewController *mycontroller5 = [self.storyboard instantiateViewControllerWithIdentifier:@”fire“];
[self presentViewController:mycontroller5 animated:YES completion:nil];
break;
     }
  }
}

　これで完了！ちなみに、画面遷移する前に音が鳴っている場合は停止するようにしました。

（上記のタグは「Forest」用のタグなので、他の画面に挿入する場合は赤文字の部分を変更してください）

　各遷移ボタンに「Tag」を付けます（morningの画面に遷移するボタンには「2」、rainには「3」…）。最後に、遷移ボタンと「(IBAction)registeredButton」と紐づければOKです。

全ページのタグまとめ

　最後に、すべてのページのタグを公開するので、自分で作ったものと違いがないか確認してみてください！

　⇒ こちらからダウンロード（zipファイル）

次回予告

　この連載が無事に続けば…次回は、このアプリをAppleに申請する工程に進みたいと思います。

▼ アプリ開発日記 連載
【第１回】Apple Developer Programへの登録方法
【第２回】Xcodeの基本知識と使い方
【第３回】画面遷移するアプリを作る
【第４回】画像をタッチすると音が鳴るアプリを作る
【第５回】音が鳴るアプリを作る

皆様にお願い

　当連載を読んでくださった方にお願いがあります。記事内で紹介されている方法について、

・それ、違くない？
・もっと効率の良い方法知ってるよ
・そのアプリで○○機能を搭載させる方法、調べてみてよ！

などのご意見を、遠慮なくどしどしお寄せくださいませ。よろしくお願いします。

ライター：いっしー