search
LoginSignup
23
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

[Monaca] イベントの発生順序について

Monacaでアプリ開発をするときに気をつけなければいけない点として、使いたい機能が使える状態になっているかが挙げられます。

Cordovaプラグインを組み込んだ場合は、JavaScriptからネイティブ機能へアクセスが可能になっていないとCordovaプラグインの機能を利用することはできません。また、Onsen UIを利用する場合も、Onsen UIのコンポーネントの読み込みが完了していないと利用することができません。

そこで今回は、Monacaで開発したアプリが起動した時のJavaScriptのイベント発生順序を見ていきたいと思います。

イベント発生順序は、以下になります。

順番 イベント名 発生のタイミング
1 DOMContentLoaded HTMLのすべてのDOM要素が読み込まれた時に発生します。
2 load HTMLのレンダリングに必要なリソースがすべて読み込まれた時に発生します。
3 deviceready JavaScriptからネイティブ機能へアクセスが可能になった時に発生します。
4 ons.ready Onsen UIコンポーネントの読み込みが完了し、devicereadyイベントの後に発生します。

Monacaで開発するアプリでCordivaプラグインやOnsen UIを使用する場合は、このように発生するイベントの順番を意識する必要があります。

イベントの発生順序は、次のHTML内の<script>タグで確認できます。
注意点として、MonacaクラウドIDEのプレビューでは、実機での発生順序とは異なった動きになります。
テストをする場合は、実機をお使いください。

<script src="components/loader.js"></script>
<script>

    document.addEventListener('DOMContentLoaded', function() {
        alert('DOMContentLoaded');
    }, false);

    window.addEventListener('load', function() {
        alert('load');
    }, false);

    document.addEventListener('deviceready', function() {
        alert('deviceready');
    }, false);

    // Onsen UIを使用している場合
    ons.bootstrap();
    ons.ready(function() {
        alert(‘Onsen UI ready’);
    });

</script>

Android端末で検証してみました。
このJavaScriptが実行されると、

順番 メッセージ
1 DOMContentLoaded
2 load
3 deviceready
4 Onsen UI ready

の順番で実行されることを確認することができます。

devicereadyイベントは、loadイベントの後に発生します。
HTMLのレンダリングに必要なリソースが多い場合は、その分devicereadyイベントの発生が遅れることになります。CordovaプラグインやOnsen UIを利用する際は、この点も注意する必要があります。

Monacaでのアプリ開発で、

「Cordovaプラグインが動作していないのでは?」
「Onsen UIが動作していないのでは?」

と感じた時は、一度CordovaプラグインやOnsen UIが利用可能な状態になっているかどうか確認してみてください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
23
Help us understand the problem. What are the problem?