群馬県地域経済発展のためのプロジェクト | iPhoneアプリ開発講座 | コワーキングスペース | エンジニアの就業支援 | 企業誘致 | 地域活性化

ぐんまちゃんの音あそび on Swift

はじめに

3回目のアプリ開発となります。このアプリでは主に「効果音」と「BGM」の機能について学びます。

2015.11.12 2015.11.12 Xcode7.1 & iOS9.1 対応版サンプルコード追加

ダウンロード

サンプルプログラム

完成したアプリのサンプルコードです。ZIPで圧縮したファイルです。解凍してご利用ください。

素材データ

新規プロジェクトの作成

Xcodeを起動した後「新規プロジェクト」を作成します。

File > New > Project

timer_01

「Tabbed Application」を選択して「Next」をクリック

今回のアプリは「Tabbed Application」から作成します。

oto_01

次の通り入力してを選択して「Next」をクリック

  • Product Name:「プロジェクト名」を指定(これがフォルダ名になります)
    今回のアプリは「Otoasobi」とします
  • Organization Name:「組織名」を指定(個人の場合は氏名)
  • Company Identifier:「会社識別名」を指定(ドメイン名を逆にしたものが推奨されます)
  • Language:「Swift」を選択
  • Devices:「iPhone」を選択
  • Use Core Data:チェックなし

oto_02

ソースコードなどの変更履歴を残しておく場合は「Git」にチェックを入れる

本講座では、特に必要ないので「チェックなし」で「Create」をクリック

oto_03

プロジェクトの設定

利用するiPhone画面の「向き」を設定します

今回のアプリは「横向き」とします。「Landscape Left」と「Landscape Right」にチェックを入れて下さい。

  • Portrait:縦
  • Upside Down:上下反転の縦
  • Landscape Left:左回転の横
  • Landscape Right:右回転の横

oto_04

ステータスバーの表示・非表示を設定します

今回のアプリはステータスバーを「非表示」にします。この設定はつい忘れがちなので注意しましょう。

  • Generalタブをクリック >「Status Bar Style」の「Hide status bar」をチェックする。

timer_06

  • Infoタブをクリック >「Status bar is initially hidden」を「YES」にする
  • 「+」をクリックして「View controller-based status bar appearance」の項目を追加して「NO」にする

timer_07

使用する「画像」と「効果音」の設定

使用する「画像」と「効果音」のインポート

こちらからダウンロードしてください
PDF画像・WAV効果音(一式):

左下の「+」をクリックして「Add Files to “Otoasobi”」を選択する

oto_05

取り込む画像を選択して「Copy items if needed」をチェックして「Add」をクリックする
※チェックを入れると「コピーした画像」を使用することになります。忘れずに!

oto_06

「画像」と「効果音」がプロジェクトに取り込まれました。

oto_07

「First View」の画面のデザイン&レイアウト

「Main.storybord」を確認する

「Main.storybord」を選択します。今までと違って「Tab Bar Controller」「First View」「Second View」と3つあることがわかります。

oto_8

まずは「First View」から作成しましょう。最初からある「Label」は「deleteキー」で削除します。

oto_10

Button(ド)を配置する

「Object Library」をクリックして「Button」をドラッグ&ドロップ。

oto_11

「Button」を選択した状態で、「Attributes Inspector」タブをクリックする。

「Title」を「ド」と入力。「Font」の▲をクリックして「System 20.0」のフォントサイズにします。「Text Color」に「任意の色」を選択します。

oto_12

さらに「Background」に「任意の色」を選択します。(項目は下の方にあるのでスクロールします)

oto_13

Button(ド)のレイアウトの制約を設定する

「ド」ボタンを選択した状態で、「Pin」をクリックする。

「上」「下」の「赤い点線」をクリックして「赤い線」にする。「上」「下」の値を「0」にする。

「Width」をチェックして、値を「60」にする。(Widthは横幅です)

「Add 3 Constraints」をクリックする。

oto_14

「ド」ボタンを選択した状態で、「Align」をクリックする。

「Horizontal Center in Container」にチェックを入れる。値を「210」にする。(※値は画面の中心からの距離です)
※Xcode7.1以降では、値は「-210」となります。
「Update Frames」を「Items of New Constraints」を選択する。

「Add 1 Constraint」をクリックする。

oto_15

エラーが出ずに「制約通りの位置」にオブジェクトが配置されました。

Button(レ・ミ・ファ・ソ・ラ・シ・高いド)を配置する

「ド」ボタンを「コピー&ペースト」して他のボタンを配置します。

oto_16

それぞれの「button」の「Title」を「レ」「ミ」「ファ」・・・と変更します。

oto_17

Button(レ・ミ・ファ・ソ・ラ・シ・高いド)のレイアウトの制約を設定する

「レ」ボタンを選択して「Attributes Inspector」タブをクリックします。「Width」の値だけ設定されていることが解ります。

oto_18

それぞれのボタンを「ド」ボタンと同様に制約を設定しますが「Width」の制約はする必要はありません。

oto_19

また「Horizontal Center in Container」の「値」が、それぞれ違います。

  • ド:210
  • レ:150
  • ミ:90
  • ファ:30
  • ソ:-30
  • ラ:-90
  • シ:-150
  • 高いド:-210

※Xcode7.1以降では、以下の値となります。

  • ド:-210
  • レ:-150
  • ミ:-90
  • ファ:-30
  • ソ:30
  • ラ:90
  • シ:150
  • 高いド:210

oto_20

最後にそれぞれのボタンの「Background」を「任意の色」に変更します。

oto_30

「First View」の画面のデザインはこれで完成です。ビルドしてシミュレーターで確認してみましょう。

「First View」のオブジェクトの関連付け

右上にある蝶ネクタイのマークの「Assistant editor」ボタンをクリックする。2画面になるので、左は「Main.storybord」、右は「FirstViewController.swift」を表示させる。

oto_31

「赤わく」の部分にコードを書きます。分かりやすいように、コードを書く行に「改行」を少し入れましょう。

button(ド)の関連付け「IBAction接続」

「ド」ボタンを「control」キーを押しながらドラッグすると、青い線が出ますので、右画面の任意の箇所でマウスのボタンを離します。

oto_32

出てきたダイアログの「Connection」を「Action」を選択します。「Name」に「pushedDo」と入力して、「Connect」ボタンをクリックします。

oto_33

「@IBAction func pushedDo(sender: AnyObject) {}」とコードが書かれました。これを「メソッド」と呼びます。この後、「ド」ボタンを押したときの処理をメソッドの{}の中に書いて行きます。

oto_35

button(レ・ミ・ファ・ソ・ラ・シ・高いド)の関連付け「IBAction接続」

それぞれのボタンも、「ド」ボタンと同様の手順で関連づけます。

oto_36

「First View」にAudioToolboxフレームワークをインポートする

AudioToolboxフレームワークとは

アプリで音を出したい時は「AudioToolbox」フレームワークというものが必要です。簡単にいうと「音を出すのに必要な機能をまとめたパッケージ」です。

まずはアプリにフレームワークを追加します。

「Linked Framework and Libraries」でフレームワークを追加する

左上の「Otoasobi」を選んで「General」タブを選択します。下の方にスクロールすると「Linked Framework and Libraries」があるので「+」をクリックします。

oto_40

たくさんのフレームワークが表示されますので、その中から「AudioToolbox」見つけて「Add」します。

oto_41

「AudioToolbox」フレームワークがプロジェクトに追加されました。ですが、これだけではまだ使用できません。「ViewController」にインポートする必要があります。

oto_42

「FirstViewController.swift」を選んで、一番上に「import AudioToolbox」と書きます。

oto_43

これで「AudioToolbox」の機能が使えるようになりました。

「First View」にプログラムを書きます

button(ド)をタップしたときの処理

「ド」ボタンをタップしたときに「oto_do.wav」ファイルを再生する命令を書きます。

「@IBAction func pushedDo(sender: AnyObject) 」の{}の中に、下記のように書きます。

ビルドして実機で確認しましょう。「ド」ボタンを押すと音がでますでしょうか?(※シミュレーターでは再生されません)

button(レ・ミ・ファ・ソ・ラ・シ・高いド)をタップしたときの処理

サウンド再生する「関数」を定義して「引数」に「ファイル名」を指定します。
以下「FirstViewController.swift」の全文です。

これで「First View」のプログラムは終わりです。シミュレーターで確認しましょう。次は「Second View」を作ります。

補足:システムサウンドを再生するには?

ちなみに「AudioServicesPlaySystemSound()」に「1000」〜「1351」の数字を入れると、iPhoneのシステムサウンドが再生されます。

システムサウンド一覧 参考サイト:
iOSのシステムサウンドを確認する

「Second View」の画面のデザイン&レイアウト

最初からある「Label」は「deleteキー」で削除します。

Button(録音・停止・再生)を配置する

「Object Library」をクリックして「Button」を3つ配置します。

それぞれ「Title」を「録音」「停止」「再生」とします。「Font」の▲をクリックして「System 30.0」のフォントサイズにします。

oto_44

Button(録音・停止・再生)のレイアウトの制約を設定する

まずは「録音」ボタンに制約をつけます。

「Vertical Center in Container」にチェックを入れます。「値」は「0」のまま。「Add」します。

oto_45

「左」の赤線をクリックして、「値」を「50」とします。「Add」します。

oto_46

「録音」ボタンと同様に「停止」「再生」に制約をつけます。

  • 録音ボタン:縦の真ん中。左から50。
  • 停止ボタン:縦・横ともに真ん中。
  • 再生ボタン:縦の真ん中。右から50。

oto_47

ボタンが配置されました。

image View(ぐんまちゃん)を配置する

ベクター画像を使用するために「Images.xcassets」の設定をします。

Images.xcassetsを選択する。「+」をクリックして「New Image Set」を選択する。名前を「gunmachan」に変更する。
「Attributes Inspector」タブをクリックする。「Types」は「Vectors」を選択する。
「gunmachan.pdf」を「点線の四角」にドラッグ&ドロップする。

oto_48

次に「imege View」を配置して「Image View」を選択した状態で、「Attributes Inspector」タブをクリックする。「image」は「gunmachan」を選択する。「Mode」は「Aspect Fit」を選択する。

oto_49

image View(ぐんまちゃん)のレイアウトの制約を設定する

「Image View」を選択した状態で、右下の「Pin」をクリックすると「Add New Constraints」ダイアログが表示される。

「上」を「赤い線」にする。上の値「0」にする。「Width」をチェックして値は「200」。「Height」をチェックして値は「200」。「Add」をクリックする。

oto_50

「Image View」を選択した状態で、「Align」をクリックする。「Horizontal Center in Container」にチェックを入れる。「Add 1 Constraint」をクリックする。

oto_51

Progress View の配置

「Object Library」をクリックして「Progress View」をドラッグ&ドロップして配置します。

oto_70

Progress View のレイアウトの制約を設定する

「Image View」を選択した状態で、右下の「Pin」をクリックすると「Add New Constraints」ダイアログが表示される。

「上」「左」「右」を「赤い線」にする。「上」の「▼」から「停止(current distance = 81)」を選択します。
こうすると「停止ボタンからの距離」になります。

oto_71

「上」「左」「右」の「値」をすべて「50」にして「Add」します。

oto_72

これで「Second View」のオブジェクトのレイアウトが完了しました。ビルドしてシミュレーターで確認しましょう。

「Second View」のオブジェクトの関連付け

Assistant editor の2画面で作業する

右上にある蝶ネクタイのマークの「Assistant editor」ボタンをクリックする。2画面になるので、左は「Main.storybord」、右は「SecondViewController.swift」を表示させる。

oto_80

それぞれのオブジェクトを関連づける。

  • 録音ボタン:@IBOutlet接続・@IBAction接続
  • 停止ボタン:@IBOutlet接続・@IBAction接続
  • 再生ボタン:@IBOutlet接続・@IBAction接続
  • プログレスバー:@IBOutlet接続

oto_81

それぞれの「Name」は以下の通りです。

「Second View」にAudioToolboxフレームワークをインポートする

AVFoundationフレームワークとは

実は、オーディオ関係のフレームワークはいくつかあります。First View では「AudioToolbox」を使いましたが、比較的短いSE(効果音)を出す時に使います。

今回は、30秒以上の「長い音楽」を再生するするので、つかうフレームワークは「AVFoundation」となります。

「Linked Framework and Libraries」でフレームワークを追加する

左上の「Otoasobi」を選んで「General」タブを選択します。下の方にスクロールすると「Linked Framework and Libraries」があるので「+」をクリックします。

一覧から「AVFoundation」見つけて「Add」します。

oto_82

「SecondViewController.swift」を選んで、一番上に「import AVFoundation」と書きます。

oto_83

これで「AVFoundation」の機能が使えるようになりました。
さらに「デリゲートの定義」をします。次の行に「, AVAudioPlayerDelegate, AVAudioRecorderDelegate」を追加します。

Delegate(デリゲート)とは、日本語で「委譲」という意味です。簡単にいうと「ある部品の機能の一部を、他の部品にやってもらう」ことです。

「Second View」にプログラムを書きます

インスタンスを作成

AVAudioPlayer(再生)・AVAudioRecorder(録音)・NSTimer(タイマー)のインスタンスを作成します。

末尾に「!」がついていますが、これには意味があります。

「!」の場合は「nil」が入ってくるとエラーとなります。「?」の場合は「nil」が入ってもOKです。「nil」とは「なにもない」という意味です。

ここまでのプログラムの「全文」は以下の通りです。

アプリ起動時の処理を書く「viewDidLoad」

下の方に「override func viewDidLoad() 」の{}の中に以下の通りコードを書きます。

録音ボタンを押したときの処理を書く

「@IBAction func recordAudio(sender: AnyObject) 」の{}の中に以下の通りコードを書きます。

停止ボタンを押したときの処理を書く

「@IBAction func stopAudio(sender: AnyObject)」の{}の中に以下の通りコードを書きます。

再生ボタンを押したときの処理を書く

「@IBAction func playAudio(sender: AnyObject)」の{}の中に以下の通りコードを書きます。

プログレスバー更新用のメソッドを書く

プログレスバー更新用のメソッドを、新しく書きます。

エラー表示用のデリゲートメソッドを書く

エラー時に通知するためのデリゲートメソッドを書きます。「print()」の中に書いた文字は、デバッグエリアで表示されます。

これでプログラムは完成です。シミュレーターで確認しましょう。

「Second View」のプログラム完成

「Second View」のプログラムの全文は以下の通りです。

Tab Bar のアイコンを設定する

「Images.xcassets」からアイコンを設定します

ベクター画像を使用するために「Images.xcassets」の設定をします。

Images.xcassetsを選択する。「first」を選択する。「Attributes Inspector」タブをクリックする。「Types」は「Vectors」を選択する。「piano.pdf」を「点線の四角」にドラッグ&ドロップ。

oto_90

同様に「second」に「microphone.pdf」を設定します。

「Tab Bar」の表示名を変更します

「First View」の「Tab Bar」を選択した状態で、「Attributes Inspector」タブをクリックする。
「Title」に「ピアノ」と入力します。

oto_91

同様に「Second View」の「Title」に「レコーダー」と入力します。

シミュレーターで確認すると「Tab Bar」の「アイコン」と「表示名」が変更されています。

oto_92

「ぐんまちゃんの音あそび」アプリが完成しました。お疲れ様でした。

  • Facebook
  • Hatena
  • twitter
  • Google+
PAGETOP
Copyright © 2013 - 2018 Cross-i Project BrainFarm Inc. All Rights Reserved.