Cordovaアプリで終了確認ダイアログを出すよ

2017-06-11スマートフォンアプリ開発Cordova

まさかの連続Cordova記事です。

Cordovaを利用しAndroidのアプリを実機テストしていると、戻るボタンが押された時アプリの終了確認をしてほしいなと思ったので、その方法を備忘録的にまとめておこうと思います。めんどくさそうですが、Cordovaのプラグインを使うと意外と簡単にできちゃいます。

Cordova : 6.4.0
OS : MacOS Sierra

Contents

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

さて、今回はダイアログを出して終了確認を行うので、簡単にダイアログを出すことができるCordovaプラグインをインストールしちゃいます。インストールにはいつも通り以下のようなコマンドを使います。

$ cordova plugin add cordova-plugin-dialogs

1	$ cordova plugin add cordova-plugin-dialogs

上記のコマンドで簡単にインストールできると思いますが、追加しているプラットフォームによって、一手間かけないといけないかもしれません。というのも、自分の環境では、上記のコマンドを実行すると「一回 iosのプラットフォームを消してやり直せ」(実際の英文はメモし忘れました)という文言が出力されました。というわけで、文言と一緒に出力されていた以下のコマンドを実行しました。

$ cordova plugin save
$ cordova platform rm ios
$ cordova platform add ios

$ cordova plugin save

$ cordova platform rm ios

$ cordova platform add ios

2. ダイアログのコードを書く

では、ダイアログを表示させるためのコードを書いていきます。今回書き込んだのはCordovaプロジェクト作成時に生成されるindex.jsです。このファイルに以下のコードを追記しちゃってください。

onDeviceReady: function() {
        this.receivedEvent('deviceready');

        /*** 追記ここから ***/
        document.addEventListener("backbutton", onBackClickEvent, false);
        function confirmCallback(id) {
            if (1 == id) { //終了のボタンが押されたら
                navigator.app.exitApp(); //アプリ終了
            }
        }

        function onBackClickEvent() {
            navigator.notification.confirm ( // 確認用ダイアログを表示
                "アプリケーションを終了しますか？", // 本文
                confirmCallback,
                "終了確認", // タイトル
                "終了,キャンセル" // ボタンの表示名
            )
        }
        /*** 追記ここまで ***/
    },