Cordova アプリでダイアログ表示したりビープ音を鳴らしたりして通知できる「cordova-plugin-dialogs」

cordova-plugin-dialogs というプラグインを使うと、ユーザへの通知に関する処理が手軽に実装できる。

• GitHub - apache/cordova-plugin-dialogs: Mirror of Apache Cordova Plugin dialogs

今回も iOS 向けのサンプルアプリを作ったので、以下の feat/pluginDialogs ブランチを見てみてもらいたい。

• GitHub - Neos21/CordovaExamples at feat/pluginDialogs

プラグインのインストール

いつもどおり cordova コマンドでプラグインをインストール。

$ cordova plugin add cordova-plugin-dialogs

このプラグインをインストールすることで使えるようになるメソッドは以下の4つ。

• navigator.notification.alert()
• navigator.notification.confirm()
• navigator.notification.prompt()
• navigator.notification.beep()

順に説明していく。

alert() : アラート表示

JavaScript だと、通常の alert() 関数 (window.alert()) が存在していて、Cordova アプリ上でも window.alert() は使えるのだが、このプラグインの navigator.notification.alert() を使うと、ボタンラベルを変えたりコールバック関数を設定したりなど、よりリッチなアラートが表示できる。

window.navigator.notification.alert(
  'アラートメッセージ',
  function() {
    console.log('「オッケー」ボタン押下後のコールバック関数');
  },
  'アラートタイトル',
  'オッケー'
);

confirm() : 確認ダイアログ表示

こちらも、window.confirm() でも最低限の確認ダイアログを表示させることはできるが、navigator.notification.confirm() はよりカスタマイズしやすい API になっている。

window.navigator.notification.confirm(
  '確認ダイアログメッセージ',
  function(buttonIndex) {
    console.log('押下したボタンの Index (1 から始まるので注意) : ' + buttonIndex);
    if(buttonIndex === 1) {
      console.log('オッケー ボタンが押されました');
    }
    else if(buttonIndex === 2) {
      console.log('ダメー ボタンが押されました');
    }
  },
  '確認ダイアログタイトル',
  ['オッケー', 'ダメー']
);

通常の confirm() だと「OK」と「キャンセル」ボタンのみだが、このプラグインを使うと3つ以上のボタンを用意することができる。それぞれラベルを自分で指定できる他、コールバック関数で押されたボタンを判別できる。ただし、buttonIndex は 0 からではなく 1 から始まるので注意。

prompt() : プロンプト表示

ユーザに任意の情報を入力させるプロンプトを表示する navigator.notification.prompt()。これも window.prompt() よりリッチなカスタマイズができる。

window.navigator.notification.prompt(
  'プロンプトメッセージ',
  function(results) {
    console.log('押下したボタンの Index : ' + results.buttonIndex);
    console.log('入力内容 : ' + results.input1);
  },
  'プロンプトタイトル',
  ['オッケー', 'ダメー'],
  'デフォルトテキスト'
);

こちらもボタンを3つ以上置いたりできる。押下したボタンの情報と入力値はコールバック関数にオブジェクトにまとめて渡されるので、それぞれ results.buttonIndex と results.input1 で取り出して使える。

beep() : ビープ音再生

このプラグインの本命かもしれない。手軽にビープ音を再生できるのが navigator.notification.beep() メソッド。プラットフォームに合わせて、プラグインがお抱えの音声ファイルを裏で持っているらしく、iOS の場合はピロロロという音が再生される。

// ビープ音を2回繰り返して再生する
window.navigator.notification.beep(2);

引数でリピート回数を指定できる。音色の変更には対応していないが、サクッと通知音を鳴らすにはもってこいだろう。ちなみに Browser プラットフォームでの検証時も、うまくバックグラウンドでそれらしいビープ音を再生してくれる。

以上。ビープ音とともにアラートでユーザの操作を一度奪い、強くユーザにお知らせを出すなど、色々な使い方ができそうなプラグインだ。