ネイティブのダイアログ表示 Cordova(PhoneGap)
CordovaによるAndroidアプリ作成に於いて、アラートや確認、入力のダイアログを表示する場合、JavaScriptのalert()やconfirm()、prompt()を利用するのではなく、Android標準のネイティブなダイアログを利用する方が良いでしょう。
Cordovaには、ネイティブのダイアログを表示するために、標準のプラグインが用意されています。
今回は、Cordovaによるネイティブのダイアログ表示について、まとめてみました。
[前提]
作成済みのプロジェクト
--------------------------------------------
ディレクトリ「hello」
パッケージ名「papakingyo.application.hello」
プロジェクト名「HelloWorld」
--------------------------------------------
①プラグインのインストール
プロジェクトのディレクトリ配下で以下のコマンドを実行します。
>cordova plugin add org.apache.cordova.dialogs
Fetching plugin "org.apache.cordova.dialogs" via plugin registry
Installing org.apache.cordova.dialogs (android)
②インストールしたプラグイン一覧の確認
>cordova plugin list
[ 'org.apache.cordova.dialogs' ]
pluginsディレクトリ配下に「org.apache.cordova.dialogs」がインストールされます。
hello
+ plugins
+ org.apache.cordova.dialogs
android.json
③プラグインをプラットフォームに反映
>cordova prepare android
⑤入力ダイアログの表示
www/js/index.jsのonDeviceReady: function()の箇所を、以下のように編集します。
onDeviceReady: function() {
app.receivedEvent('deviceready');
function onPrompt(results) {
alert("You selected button number " + results.buttonIndex + " and entered " + results.input1);
}
navigator.notification.prompt(
'Please enter your name', // message
onPrompt, // callback to invoke
'Registration', // title
['Ok','Exit'], // buttonLabels
'Jane Doe' // defaultText
);
},
プラットフォームへ反映
>cordova prepare android -d
アプリのコンパイル
>cordova compile android
動作の確認
>cordova emulate android
以下のメソッドにより、アラートダイアログ、確認ダイアログも表示することができます。
・navigator.notification.alert
・navigator.notification.confirm
詳細は、以下のURLを参照してください。
https://github.com/apache/cordova-plugin-dialogs/blob/dev/doc/index.md
Cordovaには、ネイティブのダイアログを表示するために、標準のプラグインが用意されています。
今回は、Cordovaによるネイティブのダイアログ表示について、まとめてみました。
[前提]
作成済みのプロジェクト
--------------------------------------------
ディレクトリ「hello」
パッケージ名「papakingyo.application.hello」
プロジェクト名「HelloWorld」
--------------------------------------------
①プラグインのインストール
プロジェクトのディレクトリ配下で以下のコマンドを実行します。
>cordova plugin add org.apache.cordova.dialogs
Fetching plugin "org.apache.cordova.dialogs" via plugin registry
Installing org.apache.cordova.dialogs (android)
②インストールしたプラグイン一覧の確認
>cordova plugin list
[ 'org.apache.cordova.dialogs' ]
pluginsディレクトリ配下に「org.apache.cordova.dialogs」がインストールされます。
hello
+ plugins
+ org.apache.cordova.dialogs
android.json
③プラグインをプラットフォームに反映
>cordova prepare android
⑤入力ダイアログの表示
www/js/index.jsのonDeviceReady: function()の箇所を、以下のように編集します。
onDeviceReady: function() {
app.receivedEvent('deviceready');
function onPrompt(results) {
alert("You selected button number " + results.buttonIndex + " and entered " + results.input1);
}
navigator.notification.prompt(
'Please enter your name', // message
onPrompt, // callback to invoke
'Registration', // title
['Ok','Exit'], // buttonLabels
'Jane Doe' // defaultText
);
},
プラットフォームへ反映
>cordova prepare android -d
アプリのコンパイル
>cordova compile android
動作の確認
>cordova emulate android
以下のメソッドにより、アラートダイアログ、確認ダイアログも表示することができます。
・navigator.notification.alert
・navigator.notification.confirm
詳細は、以下のURLを参照してください。
https://github.com/apache/cordova-plugin-dialogs/blob/dev/doc/index.md
コメント
コメントを投稿