ネイティブのダイアログ表示 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