イベント
Cordovaでは、アプリケーションで使用できるさまざまなイベントが提供されています。アプリケーションコードは、これらのイベントのリスナーを追加できます。例
HTMLファイル
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="example.js"></script>
</head>
<body onload="onLoad()">
</body>
</html>
JSファイル
// example.js file
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
// Add similar listeners for other events
}
function onPause() {
// Handle the pause event
}
function onResume() {
// Handle the resume event
}
function onMenuKeyDown() {
// Handle the menubutton event
}
// listen for uncaught cordova callback errors
window.addEventListener("cordovacallbackerror", function (event) {
// event.error contains the original error object
});
注:一般的に、アプリケーションはdocument.addEventListener
を使用して、devicereadyイベントが発生した後に、イベントリスナーをアタッチする必要があります。
次の表に、Cordovaイベントとそのサポートされているプラットフォームを示します。
サポートされているプラットフォーム/ イベント |
android | ios |
---|---|---|
deviceready | ||
pause | ||
resume | ||
backbutton | ||
menubutton | ||
searchbutton | ||
startcallbutton | ||
endcallbutton | ||
volumedownbutton | ||
volumeupbutton | ||
activated | ||
cordovacallbackerror |
deviceready
デバイスクレディイベントは、Cordovaが完全にロードされたときに発生します。このイベントは、すべてのアプリケーションに不可欠です。CordovaのデバイスAPIがロードされ、アクセスできる状態になったことを示します。
Cordovaは、ネイティブとJavaScriptの2つのコードベースで構成されています。ネイティブコードがロードされると、カスタムのローディング画像が表示されます。ただし、JavaScriptはDOMがロードされた場合にのみロードされます。つまり、Webアプリケーションは、対応するネイティブコードが利用可能になる前に、根本的にCordova JavaScript関数を呼び出す可能性があります。
deviceready
イベントは、Cordovaが完全にロードされると1回発生します。イベントが発生すると、Cordova APIを安全に呼び出すことができます。HTMLドキュメントのDOMがロードされたら、アプリケーションは通常、document.addEventListener
を使用して、イベントリスナーをアタッチします。
deviceready
イベントは、他のイベントとやや異なる動作をします。deviceready
イベントの発生後に登録されたイベントハンドラがあれば、そのコールバック関数がすぐに呼び出されます。
簡単な例
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use device APIs
}
pause
一時停止イベントは、ネイティブプラットフォームがアプリケーションをバックグラウンドに置くときに発生し、通常はユーザーが別のアプリケーションに切り替えたときに発生します。
簡単な例
document.addEventListener("pause", onPause, false);
function onPause() {
// Handle the pause event
}
iOSの癖
一時停止
ハンドラのObjective-Cを通過するCordovaAPIまたはネイティブプラグインへの呼び出しは機能せず、アラートやconsole.log()
などの対話的な呼び出しは機能しません。それらは、次の実行ループのアプリが再開されたときにのみ処理されます。
iOS 固有の resign
イベントは pause
の代替として使用でき、ユーザーがロックボタンを使用してデバイスをロックし、アプリがフォアグラウンドで実行されていることを検出します。アプリ(とデバイス)がマルチタスク用に有効になっている場合、このイベントは後続の pause
イベントとペアになりますが、iOS 5の場合のみです。実際には、マルチタスクが有効になっているiOS 5のロックされたアプリはすべてバックグラウンドにプッシュされます。iOS 5でロック時にアプリを実行し続けるには、[UIApplicationExitsOnSuspend][UIApplicationExitsOnSuspend]をYES
に設定してアプリのマルチタスクを無効にします。iOS 4でロック時に実行するには、この設定は関係ありません。
resume
ネイティブプラットフォームがアプリケーションをバックグラウンドからプッシュアウトすると、resume
イベントが発生します。
簡単な例
document.addEventListener("resume", onResume, false);
function onResume() {
// Handle the resume event
}
iOSの癖
resume
イベントによってシグナルが送信されると、pause
イベントハンドラから呼び出されたインタラクティブ関数は、アプリが再開すると後に実行されます。これらにはアラート、console.log()
、Objective-Cを介して移動するプラグインやCordova APIからの呼び出しが含まれます。
-
active イベント
iOS 固有の
active
イベントはresume
の代替として使用でき、ユーザーがロックボタンを使用してデバイスのロックを解除し、アプリがフォアグラウンドで実行されていることを検出します。アプリ(とデバイス)がマルチタスク用に有効になっている場合、このイベントは後続のresume
イベントとペアになりますが、iOS 5の場合のみです。実際には、マルチタスクが有効になっているiOS 5のロックされたアプリはすべてバックグラウンドにプッシュされます。iOS 5でロック時にアプリを実行し続けるには、[UIApplicationExitsOnSuspend][UIApplicationExitsOnSuspend]をYES
に設定してアプリのマルチタスクを無効にします。iOS 4でロック時に実行するには、この設定は関係ありません。 -
resumeイベント
resume
イベントハンドラから呼び出されると、alert()
などのインタラクティブ関数は、タイムアウト値を 0 に設定したsetTimeout()
呼び出しでラップする必要があります。そうでない場合、アプリはハングします。次のような場合などdocument.addEventListener("resume", onResume, false); function onResume() { setTimeout(function() { // TODO: do your thing! }, 0); }
Android の癖
resume
イベントでの Android の癖の詳細については、[Android ライフサイクルガイド][AndroidLifeCycleGuide] を参照してください。
backbutton
ユーザーが戻るボタンを押すと、そのイベントが発生します。デフォルトの戻るボタンの動作をオーバーライドするには、backbutton
イベントのイベントリスナーを登録してください。他のメソッドを呼び出して戻るボタンの動作をオーバーライドする必要はなくなりました。
簡単な例
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown() {
// Handle the back button
}
menubutton
ユーザーがメニューボタンを押すと、そのイベントが発生します。イベントハンドラを適用すると、デフォルトのメニューボタンの動作がオーバーライドされます。
簡単な例
document.addEventListener("menubutton", onMenuKeyDown, false);
function onMenuKeyDown() {
// Handle the menu button
}
searchbutton
ユーザーが Android で検索ボタンを押すと、そのイベントが発生します。Android でデフォルトの検索ボタンの動作をオーバーライドする必要がある場合は、「searchbutton」イベントのイベントリスナーを登録できます。
簡単な例
document.addEventListener("searchbutton", onSearchKeyDown, false);
function onSearchKeyDown() {
// Handle the search button
}
startcallbutton
ユーザーが通話開始ボタンを押すと、そのイベントが発生します。デフォルトの通話開始の動作をオーバーライドする必要がある場合は、「startcallbutton」イベントのイベントリスナーを登録できます。
簡単な例
document.addEventListener("startcallbutton", onStartCallKeyDown, false);
function onStartCallKeyDown() {
// Handle the start call button
}
endcallbutton
ユーザーが通話終了ボタンを押すと、このイベントが発生します。このイベントはデフォルトの通話終了動作をオーバーライドします。
簡単な例
document.addEventListener("endcallbutton", onEndCallKeyDown, false);
function onEndCallKeyDown() {
// Handle the end call button
}
volumedownbutton
ユーザーが音量ダウンボタンを押すと、そのイベントが発生します。デフォルトの音量ダウン動作をオーバーライドする必要がある場合は、「volumedownbutton」イベントのイベントリスナーを登録できます。
簡単な例
document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);
function onVolumeDownKeyDown() {
// Handle the volume down button
}
volumeupbutton
ユーザーが音量アップボタンを押すと、そのイベントが発生します。音量アップ動作をオーバーライドする必要がある場合は、「volumeupbutton」イベントのイベントリスナーを登録できます。
簡単な例
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
function onVolumeUpKeyDown() {
// Handle the volume up button
}
activated
このイベントは Cordova では発生しません。
cordovacallbackerror
ネイティブのコールバック(成功またはエラー)によってキャッチされていないエラーがスローされると、このイベントが発生します。
このイベントはエラーの伝播を停止しません。(例:window.onerror イベントも発生します。)
他のイベントとは少し異なります。document
オブジェクトではなく、window
オブジェクトでリッスンする必要があります。
event
オブジェクトには次のプロパティがあります
error
: コールバック内で発生した元のError
。
簡単な例
window.addEventListener("cordovacallbackerror", function (event) {
// event.error contains the original error object
});