【Cordova】ダイアログを表示するためのプラグイン「cordova-plugin-dialogs」

今回は、Cordovaで開発しているアプリでダイアログを表示させる方法です。
使用したプラグインは、「cordova-plugin-dialogs」です。
GitHubのページは下記からご確認ください。

GitHub – Apache Cordova Plugin dialogs: apache/cordova-plugin-dialogs
https://github.com/apache/cordova-plugin-dialogs

シンプルなダイアログを簡単に表示することができます。

インストールは、下記のコマンドを実行してください。

cordova plugin add cordova-plugin-dialogs

次に使い方ですが、まず一般的なダイアログの表示には、navigator.notification.alert メソッドを使います。
サンプルコードは下記の通りです。

navigator.notification.alert(
    '[ダイアログのメッセージ]',
    function(){
        // ダイアログのボタンが押下された後に実行する処理
    },
    '[ダイアログのタイトル]',
    '[ボタンのテキスト]'
);

サンプルはこんな感じ。
なお、ボタンのテキストのデフォルトは「OK」です。
ボタンのテキストがこちらで問題がなければ省略しても大丈夫です。

次に、「OK」「キャンセル」など、ボタンが複数あるダイアログの表示方法です。
メソッドは、navigator.notification.confirm を使います。

navigator.notification.confirm(
    '[ダイアログのメッセージ]',
    function(buttonIndex){
        // ダイアログのボタンが押下された後に実行する処理
    },
    '[ダイアログのタイトル]',
    '[ボタンのテキスト(配列で指定する)]'
);

navigator.notification.alert とほぼ同じですが、違う点はボタンのテキストを配列で指定しているところと、コールバック関数に引数があるところですね。
ちなみに、ボタンは最初に指定した方が右側に表示されますのでご注意ください。
また、コールバック関数の引数には、押されたボタンのインデックスが渡されます。
ボタンごとに処理を変えたい場合は、この数値を参考にしてください。

最後は、navigator.notification.prompt メソッドです。
こちらは、テキストの入力欄があるダイアログです。
サンプルコードはこちら。

navigator.notification.prompt(
    '[ダイアログのメッセージ]',
    function(result){
        // ダイアログのボタンが押下された後に実行する処理
        // ボタンのインデックス：results.buttonIndex
        // テキストエリアの入力値：results.input1
    },
    '[ダイアログのタイトル]',
    '[ボタンのテキスト(配列で指定する)]'
    '[入力欄のデフォルトテキスト]'
);

コードにも記載しましたが、このメソッドのボタン押下後のコールバックでは、ボタンのインデックスと入力エリアのテキストが取得できます。
それぞれ、result.buttonIndex と result.input1 と指定して取得します。

ダイアログのメソッドについては以上です。
他にも、ビープ音を鳴らせたりもしますが、今回は使わなかったので割愛します。

以上、ダイアログを表示する方法でした。
このプラグインで表示できるダイアログはかなりシンプルなものなので、使い勝手はいいと思います。
ただ、デザインのカスタマイズをしたい！という場合には向かないですね。
どちらかと言うと、ちょっとデザインに手を加えたりしたいので、他にもダイアログを表示できるプラグインがないか調べてみたいと思います。