【Monaca】cordovaプラグインの動作は実機で確認しよう！【初心者】

この記事は最終更新から3年以上が経過しています。情報が古くなっている可能性があります。

だいぶ初歩的な話になります。Monacaアプリ開発中こんなことがありましたのでさっくり覚書き。

「Uncaught TypeError: Cannot read property ‘play’ of null」エラーに遭遇

MonacaでMediaプラグイン(cordova-plugin-media)を使用して音楽を再生させようとしたところ、chromeのdevツールのconsoleに
「Uncaught TypeError: Cannot read property ‘play’ of null」
というエラーがでていて、音楽が再生できませんでした。

コードは公式にあるものそのまま使用。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">-->
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var media = null;
        var mediaTimer = null;
        var srcFile = "test.mp3";

        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            console.log("ready");
            media = new Media (getPath() + srcFile , onSuccess, onError);
        }

        function getPath() {
            var str = location.pathname;
            var i = str.lastIndexOf('/');
            return str.substring(0,i+1);
        }

        function playSound(){
            // play the media file one time.
            media.play({numberOfLoops: 0});
            // start the timer
            if (mediaTimer == null) {
                mediaTimer = setInterval(function() {
                    // Return a current playback position
                    media.getCurrentPosition(
                        //A Callback function if it's success
                        function(position) {
                            if (position > -1) {
                                //If the playback stops at "-0.001" position, set the timer to 0.
                                if(position == -0.001){
                                    position = 0;
                                }
                                setAudioPosition((position) + " sec");
                            }
                        },
                        //A callback function in case of failure
                        function(error) {
                            console.log("Error getting pos=" + error);
                            setAudioPosition("Error: " + error);
                        }
                    );
                }, 1000);
            }
        }

        function pauseSound(){
            if (media) {
                media.pause();
            }
        }

        function stopSound(){
            if (media) {
                media.stop();
            }
        }

        function setAudioPosition(position) {
            document.getElementById('audio_position').innerHTML = position;
        }

        function onSuccess(){
            console.log("Successfully initialize a media file.");
        }

        function onError(error){
            console.log("Failed to initialize a media file. [ Error code: " + error.code + ", Error message: " + error.message + "]");
        }
    </script>
</head>
<body style="text-align: center">
    <h1>Playing Sound</h1>
    <button onclick="playSound()">Play</button>
    <button onclick="pauseSound()">Pause</button>
    <button onclick="stopSound()">Stop</button><br />
    <p id="audio_position"></p>
</body>
</html>

引用元）音楽の再生方法　＞　音の再生 ( Monaca プロジェクト内の音源を使用 )

このエラーが表示される際、その前に発火されるはずの17行目console.log(“ready”)が表示されていないことに気づきました。

“deviceready”はcordovaが読み込み完了してから発火されるらしい。
つまりcordovaが読み込めてない・・！？
あっこんな記事まであるぞ！？

とまで燃え上がった後…
ふと実機でみたら動いた。

cordovaは実機で確認しようね

以下公式HPです。

Cordova の読み込みが完了するまで、デバイス系の API は使用できません。そこで重要となるのが onDeviceReady() 関数です。この関数は、Cordova の読み込み完了後に実行される関数です。

ここでは、デバイス系の API を使用して、カメラ機能を起動するコードを例にしてみます。Monaca クラウド IDE 上のプロジェクトに、次の内容をコピー＆ペーストして、 Monaca デバッガー 上で実行してみましょう。

引用元）Cordova の読み込み

ということだそうです。
上記を読んで「Monaca デバッガー上で実行しよう(プレビューでも動くけどデバッガーの方がよりちゃんと確認できるからね)」と勝手に解釈していました。
それかどこかに「プレビュー上じゃ動かない」と明記されてたのかな、気づきませんでした。

また、先ほどの17行目console.log(“ready”)ですが、Monacaのデバッグパネルを見たところちゃんと出力されてました。
あ、このデバッグパネル実機と繋いで使うんですね。。(´∀`；)
通常console.logと記載した場合はdevツールのconsoleの方に出力されるのでデバッグパネル自体非表示にしてました。(チュートリアル見てない)

Monaca デバッガーと Monaca クラウド IDE を併用して、デバッグを行う手順を、次に記します。

  1. Monaca クラウド IDE 上で、プロジェクトを開きます。
  2. Monaca デバッガー上で、プロジェクトを実行します。
  3. IDE と端末が接続されていることを確認します。デバッグパネル上に、端末情報が表示されていれば、接続されています ( 下のスクリーンショットを参照のこと )。表示されない場合、IDE またはデバッガーをいったんリフレッシュさせます。IDE と端末の接続後に、アプリのデバッグを IDE 上で行えます。

引用元）Monaca デバッグパネル

あれ、超便利

チュートリアルはしっかり見ようと決意しました。
cordovaプラグインを使った機能は実機デバッガーじゃないとうまく動かないので、実機で確認しましょう。

おまけ

こちらはDevicereadyが発火されないケースがあるというもの。(2011年の記事です)
同じことが起きた時は参考にさせていただきます。