monacaでiPhoneアプリ

こんにちは。池島です。たまには技術ネタを。と思い一生懸命仕込みました。
monacaを試してみようと思いました。これiPhone用、Android用のアプリをひとつのソースで作れてしまいます。
またネット上で動作するのでローカルに開発環境のセットアップとかのわずらわしいことが不要です。
サイトにアクセスしてサインアップすることですぐに使い始めることができます。

ここにアクセスしてサインアップ

とりあえずアプリのテンプレートがあるのでそのまま利用します。
あまり芸無いですが、最初なので「hello world」です。

プロジェクト作ったらIDE画面開いてみます。
WEB上で動いてるのに立派なIDE画面です。

この状態でiPhoneで動作させてみます。
monacaにはiPhoneやAndroidで動作確認するためのアプリ「monacaデバッガ」があります。
iPhoneにダウンロードして使ってみます。

起動して自分のアカウントでログインするとー
さっき作成したプロジェクトがありました。

HelloWorldアプリをタップすると、iPhoneで動きました。
Monacaデバッガ経由での動作確認はiOS Developer Programに登録しなくてもだいじょうぶです。

せっかくiPhoneなので、phonegapのメディアAPI使って起動時に音楽を鳴らしてみたくなりました。
monacaは日本語のサイトがいろいろあります。メディアAPIを使ったサンプルはmonacaのサイト内にありました。
下記のコードを追加してmp3ファイルをIDEにアップロードします。

// PhoneGap event handler
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("PhoneGap is ready");
    //音楽再生関数を呼びます
    playAudio();
}

var media = null;
var mediaTimer = null;

//音楽再生関数
function playAudio() {
    var src = 'sample.mp3';
    media = new Media ('/' + src , onSuccess, onError);

    //再生
    media.play({numberOfLoops:"infinite"});

    if (mediaTimer == null) {
        mediaTimer = setInterval(function() {
            // 再生位置を返します
            media.getCurrentPosition(
                //成功時のコールバック関数です
                function(position) {
                    if (position > -1) {
                        setAudioPosition((position) + " sec");
                        //端末によっては再生位置が-0.001で止まるので、その場合は再度読み込みます。
                        if(position == -0.001){
                            media.play({numberOfLoops:"infinite"});
                        }
                    }
                },
                //失敗時のコールバック関数です
                function(e) {
                    console.log("Error getting pos=" + e);
                }
            );
        }, 1000);
    }
}
//成功時
function onSuccess() {
    console.log("playAudio():Audio Success");
}
//失敗時
function onError(error) {
    alert('code: '    + error.code    + '\n' + 
    'message: ' + error.message + '\n');
}

//オーディオ再生位置
function setAudioPosition(position) {
    document.getElementById('audio_position').innerHTML = position;
}

iPhoneで動かしたところ無事に音楽再生されました。
でも画面だけだから音が出ていることわかりませんね。音楽再生位置を表示するようにしたので「音が再生されている」というところはわかってもらえますでしょうか。