はじめに

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

TL;DR

  • cordova-plugin-dialogs はネイティブのダイアログを呼び出す
  • タイトルやボタン名も変更可能
  • 見た目の比較(window.alert などとの違い、iOS, Android での違い)をまとめた
  • 通常の window.alert なども考慮した Wrapper を作った
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. cordova-plugin-dialogs について
    2. セットアップ
    3. 使い方
    4. 見た目の比較
      1. Alert
      2. Confirm
      3. Prompt
    5. Wrapper
  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-dialogs の navgator.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

Wrapper

以下の理由で簡単な Wrapper を作った。
(個人的な事情により alert と confirm のみ、prompt は無し。必要なら同じノリで実装すれば OK)

  • Cordova 環境では navigator.notification.xxxx を使いたいし、ブラウザでは [window.]xxxx を使いたいが、いちいち環境チェックするのダルい
  • confirm の結果に応じた分岐を同じように書きたい(navigator.notification.confirm でコールバック設定とかしたくない)

なお Vue.js の mixin として実装しているので、それ以外なら適当に修正が必要。

src/mixins/Dialogs.js

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
32
export default {
  methods: {
    hasCordovaDialogs() {
      return typeof cordova !== 'undefined' && navigator?.notification !== 'undefined';
    },
    async alert(message, title = 'Alert', buttonName = 'OK') {
      return new Promise((resolve) => {
        if (this.hasCordovaDialogs()) {
          navigator.notification.alert(message, () => resolve(), title, buttonName);
        } else {
          alert(message);
          resolve();
        }
      });
    },
    async confirm(message, title = 'Confirm', buttonLabels = ['OK', 'Cancel']) {
      return new Promise((resolve) => {
        if (this.hasCordovaDialogs()) {
          navigator.notification.confirm(
            message,
            (i) => resolve(buttonLabels[i - 1]),
            title,
            buttonLabels
          );
        } else {
          const result = confirm(message);
          resolve(result);
        }
      });
    },
  },
};

利用例、Promise を使って実装しているので async/await で処理。

xxxx.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div></div>
</template>

<script>
import Dialogs from '@/mixins/Dialogs';

export default {
  mixins: [Dialogs],
  async mounted() {
    await this.alert('Alert!!');

    const res = await this.confirm('Are you OK?');
    if (res === true || res === 'OK') {
      // OK 時の処理
    } else {
      // Cancel 時の処理
    }
  },
};
</script>

まとめ

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

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list