はじめに

Cordova でネイテイブのダイアログを表示できる cordova-plugin-dialogs について調べた。

TL;DR

  • cordova-plugin-dialogs はネイティブのダイアログを呼び出す
  • タイトルやボタン名も変更可能
  • 見た目の比較(window.alert などとの違い、iOS, Android での違い)をまとめた

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. cordova-plugin-dialogs について
    2. セットアップ
    3. 使い方
    4. 見た目の比較
      1. Alert
      2. Confirm
      3. Prompt
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.14.5
BuildVersion: 18F132

$ npm --version
6.10.3

$ node --version
v12.7.0

$ vue --version
3.10.0

$ cordova --version
8.1.2 (cordova-lib@8.1.1)

$ cordova plugin ls
cordova-plugin-dialogs 2.0.2 "Notification"

$ cordova platform
Installed platforms:
android 7.1.4
ios 4.5.5

$ cordova run --list
Available android virtual devices:
Pixel_2_API_26
Available ios virtual devices:
...
iPhone-XR, 12.2

詳細

cordova-plugin-dialogs について

cordova-plugin-dialogs の特徴。

  • ネイテイブのダイアログを表示
  • タイトルなど window.alert などでは変更できない箇所もカスタム可能

セットアップ

事前に cordova 環境はできているものとする。

cordova plugin add でプラグインの追加

1
2
3
$ cordova plugin add cordova-plugin-dialogs
Installing "cordova-plugin-dialogs" for android
...

使い方

alert, confirm, prompt があって、それぞれの差分は以下の通り。

1
2
3
4
5
6
7
8
window.alert(message);
navigator.notification.alert(message, alertCallback, [title], [buttonName]);

result = window.confirm(message);
navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels]);

result = window.prompt(text, value);
navigator.notification.prompt(message, promptCallback, [title], [buttonLabels], [defaultText]);

cordova-plugin-dialogs で、ユーザー操作後に何か処理したい場合は xxxxCallback で行う。

1
2
3
4
5
6
navigator.notification.alert(
message,
() => {
location.href = "#hoge";
}
);

見た目の比較

JS の windows.alert などと、cordova-plugin-dialogsnavgator.notifiction.alert などの比較。

iOS, Android ともにエミュレータでの実行。

Alert

window.alert
1
alert("window.alert");
iOS

Android

Android window alert

1
navigator.notification.alert("cordova.alert1");
iOS

Android

Android cordova alert 2

1
2
3
4
5
6
navigator.notification.alert(
"cordova.alert2",
null,
"with title",
"my button"
);
iOS

Android

Android cordova alert 2

1
navigator.notification.alert("cordova.alert3 without title", null, "");
iOS

Android

Android cordova alert 3

Confirm

window.confirm
1
confirm("window.confirm");
iOS

Android

1
navigator.notification.confirm("cordova.confirm1");
iOS

Android

1
2
3
4
5
6
navigator.notification.confirm(
"cordova.confirm2",
null,
"with title",
["button1", "button2"]
);
iOS

Android

1
navigator.notification.confirm("cordova.confirm3 without title", null, "");
iOS

Android

Prompt

window.prompt
1
const result1 = prompt("window.prompt");
iOS

Android

1
navigator.notification.prompt("cordova.prompt1");
iOS

Android

1
2
3
4
5
6
7
navigator.notification.prompt(
"cordova.prompt2",
null,
"with title",
["button1", "button2"],
"my default text"
);
iOS

Android

1
navigator.notification.prompt("cordova.prompt3 without title", null, "");
iOS

Android

まとめ

  • cordova-plugin-dialogs はネイティブのダイアログを呼び出す
  • タイトルやボタン名も変更可能
  • 見た目の比較(window.alert などとの違い、iOS, Android での違い)をまとめた

参考文献

関連記事