ハマログ

株式会社イーツー・インフォの社員ブログ

monacaでiPhoneアプリ

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

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

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

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

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

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

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

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

 

このあとせっかくと思い、monacaデバッガなしで動作させてみたくなり「iOSDeveloperProgram」に入りビルド結果をiPhoneで動かそうとしたところ「実機にインストールできない!」という事態になりはまってしまいました。このことは次回にまた書きたいと思います。

 

 

 


            					
                


池島 篤則   池島 篤則   2014年6月30日


関連記事

Laravelのテンプレート内でURLによる条件判定を実装する

Laravelのテンプレート(blade)内で、URLによる条件判定を実装する方…

Laravel ExcelでCSV出力したらSJISで出せなかったので自分で書きました

佐川急便か何かのシステムと連携するために、Shift_JISで出力したCSVを作…

クレジットカード取引のセキュリティ対策

はじめに クレジットカード会社、決済代行業者、セキュリティ事業者などから構成され…


← 前の投稿

次の投稿 →