ダイアログを表示する
ネイティブで表示するダイアログを利用するためのプラグインです。ダイアログなどは、HTMLとJavaScriptを使っても実現できますが、ダイアログを手軽に使いたい場合やデザインをネイティブと合わせたい場合などに利用できます。
インストール方法
インストールするプラグインは、「cordova-plugin-dialogs」です。インストールはリスト7のように行います。
$cordova plugin add cordova-plugin-console
プラグインの使い方
このプラグインでは、図2のような3種類のダイアログ（alert、confirm、prompt）とBEEP音を鳴らすことができます。
アラートダイアログを表示するためのメソッドの定義は以下のようになっています。
navigator.notification.alert(message, callback, [title], [buttonLabel]);
| 変数名 | 説明 |
|---|---|
| message | ダイアログに表示するメッセージを設定します |
| callback | ボタンが押された時に実行する関数を指定します |
| title | ダイアログのタイトルを指定します。指定しない場合には「Alert」になります |
| buttonLabel | 表示するボタンのラベルです。指定しない場合には、「OK」になります |
確認ダイアログを表示するためのメソッドの定義は以下のようになっています。
navigator.notification.confirm(message, callback, [title], [buttonLabels])
| 変数名 | 説明 |
|---|---|
| message | ダイアログに表示するメッセージを設定します |
| callback | ボタンが押された時に実行する関数を指定します。引数には押されたボタンのインデックスが入ります |
| title | ダイアログのタイトルを指定します。指定しない場合には「Confirm」になります |
| buttonLabels | 表示するボタンのラベルを配列で指定します。指定しない場合には、["OK","Cacel"]と同じになります |
入力ダイアログを表示するためのメソッドの定義は以下のようになっています。
navigator.notification.prompt(message, callback, [title], [buttonLabels], [defaultText])
| 変数名 | 説明 |
|---|---|
| message | ダイアログに表示するメッセージを設定します |
| callback | ボタンが押された時に実行する関数を指定します。引数には押されたボタンのインデックスと入力値が入ります |
| title | ダイアログのタイトルを指定します。指定しない場合には「Prompt」になります |
| buttonLabels | 表示するボタンのラベルを配列で指定します。指定しない場合には、["OK","Cacel"]と同じになります |
| defaultText | 入力値にデフォルトで入る文字列を指定します。指定しない場合には、空文字と同じになります |
BEEP音を鳴らすためのメソッドの定義は以下のようになっています。
navigator.notification.beep(times)
| 変数名 | 説明 |
|---|---|
| times | BEEP音を鳴らす回数を指定します |
これらのメソッドを使ったときの例がリスト8です。
function DialogController($scope) {
$scope.alert = function () {
// アラートダイアログを表示
navigator.notification.alert(
'ご注意下さい',
function () {
console.log("pressed alert");
},
'アラート','OK'
);
};
$scope.confirm = function () {
// 確認ダイアログを表示
navigator.notification.confirm(
'ご確認下さい',
function (buttonIndex) {
// buttonIndexに押されたボタンのインデックス（1〜）
console.log("button [" + buttonIndex + "] pressed");
},
'ご注意',['OK', 'CANCEL']
);
};
$scope.prompt = function () {
// 入力ダイアログを表示
navigator.notification.prompt(
'入力してください',
function (results) {
// buttonIndexに押されたボタンのインデックス（1〜）とinput1に入力値
console.log("button [" + results.buttonIndex + "] pressed , input value is " + results.input1);
},
'郵便番号',['OK', 'CANCEL'],'000-0000'
);
}
$scope.beep = function () {
// BEEP音を指定回数だけ鳴らす
navigator.notification.beep(3);
}
}
ログを表示する
JavaScript側で出力したconsole.logはChromeでの開発ツールを利用すると確認できますが、ネイティブ側のログ（adb logcatやXcodeでのデバッグ出力等）に出力することもできます。ただし、iOSの場合には、プラグインが必要になっています。そのために導入するプラグインです。
インストール方法
インストールするプラグインは、「cordova-plugin-console」です。インストールはリストXXのように行います。
$cordova plugin add cordova-plugin-console
使い方
ログを使うには、リスト10のようにJavaScript側からconsole.log()メソッドでログを出力するだけです。Andoridはこのプラグインを利用した出力ではありませんが、iOSと比較するためにも例として示してあります。
// JavaScriptでの記述
console.log("app started",this);
// Androidでの出力例
I/chromium( 6628): [INFO:CONSOLE(4)] "app started", source: file:///android_asset/www/js/controllers/AppController.js (4)
// iOSでの出力例
2016-03-20 23:53:25.792 Cdv4[2211:1443028] app started [object Object]
このようにどちらも、ブラウザでの開発ツールを利用した出力ほど詳細に確認できるわけではありません。また、ドキュメントではconsole.log以外のメソッドもサポートされていると記述されていますが、iOS側の実装を見る限りではconsole.log以外のメソッドは未実装となっているために、実際には出力されません。
従って簡単な確認程度で利用し、詳細な確認は、ブラウザ側の開発ツールを利用するなどのようにすることをおすすめします。
最後に
今回はよく使われていて、また、簡単に利用できるプラグインを紹介しました。プラグインを追加していくことで、いろいろな機能が増えていき、実際のアプリ開発ではそれらのプラグインをどれだけ応用できるかや、また、より便利なプラグインを知っているかで楽しみがどんどん広がって行くことでしょう。
今回紹介したプラグインよりも、もっと便利なプラグインも探せば見つかることと思います。是非、いろいろなプラグインを探してみてください。
