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

公開日: / 更新日:

だいぶ初歩的な話になります。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
というエラーがでていて、音楽が再生できませんでした。

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

引用元)音楽の再生方法 > 音の再生 ( 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年の記事です)
同じことが起きた時は参考にさせていただきます。

  • このエントリーをはてなブックマークに追加