Apache Cordova 入門

ホーム > Apache Cordova の基礎 > Cordova イベント

Cordova イベント

Cordova ではアプリケーションから利用できるイベントがいくつか用意されています。

例えば、端末が起動しプログラムの実行の準備ができたことを示す deviceready イベントや、 プログラムが一時停止状態になったことを示す pause イベント、 プログラムが再開したときの resume イベントなどです。

以前はネットワークの online、offline なども、「ライフサイクルイベント」としてひとまとめに含められていましたが、 現在はそれらは Cordova のコアのイベントとされていません。

ネットワーク関連のイベントなどは Network Information プラグインのイベントに分類されています。

ここでは、deviceready、pause、resume のイベントハンドラをセットし、イベントが呼ばれたときにハンドラ名を記録し、 イベントが確かに呼ばれることを確認してみましょう。

新しくプロジェクトを作成します。

$ cordova create myapp1

作成されたサブディレクトリに移動します。

$ cd myapp1

プラットフォームとして browser と android を追加します。

$ cordova platform add browser
$ cordova platform add android

コードを編集します。

www/index.html は次の通り。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
        <meta name="viewport" content="user-scalable=no, initial-scale=1,width=device-width">
        <title>Event Test</title>
    </head>
    <body style="font-family: sans-serif;">
      <div id="log"></div>
      <script type="text/javascript" src="cordova.js"></script>
      <script type="text/javascript" src="js/index.js"></script>
      <script>
      init();
      </script>
    </body>
</html>

Content-Security-Policy は、js/index.js を読み込むのと、script タグ内で init を呼び出しているところから、'self' と 'unsafe-inline' を設定しています。

cordova.js は基本的に常に読込みます。

最後に index.js 内の関数 init を呼んでいます。

www/js/index.js は次の通り。

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

function onDeviceReady(){
  appendLog("onDeviceReady()");
  document.addEventListener('pause', onPause, false);
  document.addEventListener('resume', onResume, false);
}

function onPause(){
  appendLog("onPause()");
}

function onResume(){
  appendLog("onResume()");
}

function appendLog(s){
  var log = document.getElementById('log');
  log.innerHTML += "<br>" + s;
}

初期化時に deviceready イベントのリスナだけ設定。deviceready にて resume と pause を設定しています。

browser での動作確認は次の通りです。

$ cordova build browser
$ cordova serve

上記コマンド実行後、ブラウザから動作確認できます。

ブラウザのタブを切り替え戻ると、onPause、onResume が追加されていくのがわかります。

android での動作確認は次の通り。

$ cordova run android

ホーム > Apache Cordova の基礎 > Cordova イベント