目次
- はじめに
- 完成アプリのイメージ
- 実装方法
- 実装結果
- 最後に
はじめに
位置情報が必要な、地図アプリや美容室の場所を表示するようなアプリで、
アプリインストール後にこのような位置情報許可のポップアップが表示されるのをよく見ると思います。
今回は、iOSとAndroidで端末の位置情報のアクセス許可ステータスをみて、
位置情報のアクセスを許可するポップアップを表示する実装をご紹介していきたいと思います！
完成アプリのイメージ
・位置情報を許可しなかった場合 → アプリを強制終了
・位置情報を許可した場合 → メイン画面に遷移しアプリが使えるようになる
というアプリを作成していきたいと思います。
| 位置情報を許可しない場合 | 位置情報を許可した場合 |
|---|---|
 |
 |
実装方法
1. フォームの作成
今回は、例として
近くの飲食店を探すアプリをイメージして、このような画面を作成しました。
1ページ目：アプリの案内（frmOnboading）
「次へ」を押すと、次の画面に遷移します。
2ページ目： 位置情報のアクセス許可を促す画面（frmLocationAllow）
「次へ」を押すと、位置情報のアクセス許可のポップアップが表示され、
ポップアップが閉じると、次の画面に遷移します。
3ページ目： 次の画面に進むよう促す画面（frmStart）
今回は、位置情報を許可しない限り、このアプリは使えないという仕様にしたいので、
前の画面で
・位置情報を許可しなかった場合 → アプリを強制終了
・位置情報を許可した場合 → 4ページ目のメイン画面に遷移
という導線にしたいと思います。
4ページ目： アプリのメイン画面（frmMain）
フォームが作成できたので、早速実装に入っていきましょう！
2. 位置情報のアクセスを許可するポップアップを表示
位置情報許可を促す画面（フォーム名：frmLocationAllow）で、
位置情報のアクセスを許可するポップアップを表示したいので、
kony.application.requestPermission(kony.os.RESOURCE_LOCATION, statusCallback, options)
のメソッドを使用します。
この関数を使うと、位置情報のアクセスを許可するためのポップアップが表示されるようになります。
＜補足＞
kony.os.RESOURCE_LOCATIONと記載のある部分に、
他の値を設定すると、カメラや連絡先へのアクセスなど他にも様々なアクセスを許可することができます。
詳しく知りたい方は、こちらの記事も併せてご覧ください。
▶︎ Konyでデバイスのメディアを参照および共有する方法【iOS】【Android】
フォーム全体のコードはこのように記載しました。
PERMISSION_DENIED_IOS: "PermissionDenied",
PERMISSION_DENIED_ANDROID: 50001,
//「次へ」ボタン押下時に、デバイス上で位置情報の許可がされている確認
onClickStart : function(){
const resultPermission = kony.application.checkPermission(kony.os.RESOURCE_LOCATION);
const isIos = kony.os.isIos();
//位置情報が許可されていない場合、許可を促すポップアップを表示,それ以外の場合は次の画面へ
if(resultPermission.status !== kony.application.PERMISSION_GRANTED) {
this.setLocationPermission();
}
kony.router.goTo("frmStart", null, false);
},
//位置情報アクセスを許可するポップアップを表示
setLocationPermission: function(){
const isIos = kony.os.isIos();
let self = this;
kony.application.requestPermission(kony.os.RESOURCE_LOCATION, function permissionStatusCallback(response) {
//位置情報のアクセスが許可された場合は、次の画面に遷移
if (response.status === kony.application.PERMISSION_GRANTED) {
kony.router.goTo("frmStart", null, false);
//位置情報のアクセスが拒否された場合は、デバイスの設定画面を開く
} else if (isIos ? response.message === self.PERMISSION_DENIED_IOS : response.status === self.PERMISSION_DENIED_ANDROID) {
kony.application.openApplicationSettings(kony.os.RESOURCE_LOCATION);
}
});
},
位置情報を許可するためのポップアップを表示することができたので、
次の画面で、メイン画面に入る前に位置情報が許可されているかのチェックを行います。
3. メイン画面遷移前に位置情報の許可がされているか判定を行う
3ページ目の次の画面に進むよう促す画面（frmStart）で、
メイン画面に入る前に位置情報が許可されているか確認します。
onClickStart : function(){
onClickStart : function(){
const resultPermission = kony.application.checkPermission(kony.os.RESOURCE_LOCATION);
const isIos = kony.os.isIos();
//許可されている場合は、メイン画面に遷移
if (resultPermission.status === kony.application.PERMISSION_GRANTED) {
kony.router.goTo("frmMain", null, false);
} else {
//許可されていない場合は、エラーを表示しアプリを終了
kony.ui.Alert({ message: kony.i18n.getLocalizedString("Location.DoNotAllow"),
alertTitle: kony.i18n.getLocalizedString("ErrorAlertTitle"),
alertType: constants.ALERT_TYPE_ERROR,
yesLabel: "OK", alertIcon: "none",
alertHandler: function() {
kony.application.exit();
} }, {});
}
}
上記の説明をします。
kony.application.checkPermission(resourceId[constant/String], options[JSObject]);
リソースの許可状況をチェックし、ステータスを返却してくれる関数です。
今回は、位置情報の許可状況をチェックしたいので、
resourceIdの箇所に、kony.os.RESOURCE_LOCATIONを入れます。
先の手順でご紹介した、kony.application.requestPermissionと同様、
他にもカメラやアルバム、連絡先へのアクセスもチェックすることができるので、
必要なものに応じて使い分けしてみてください。
kony.application.exit：アプリを強制終了する関数。
この関数を使うことで、アプリを強制終了することができます。
今回の説明の主旨からは少し外れますが、
下記もよく利用する関数ですので、興味がある方は併せてご参考ください。
kony.i18n.getLocalizedString
i18nを使うことで端末の言語設定に応じて、表示メッセージを変更することができます。
i18nの設定に関しては、v9から設定する箇所が変更されており、
設定方法はこちらの記事で詳しく説明がされているので、併せてご参考下さい！
▶︎Kony V9でのi18n使用方法
kony.router.goTo("frmMain", null, false);
次の画面に遷移するための関数です。
以下の手順に沿ってNPMコマンドを実行すると、上記のメソッドを利用することができます。
https://github.com/mig82/kronin
一行で画面遷移の実装が済むのと、
kony.mvc.Navigation関数と異なる点として、kony.router.goToは
これまでの自分がどの画面にいて、その後どの画面にいたかを記録してくれるので、
画面遷移が多いプロジェクトに利用するととても便利です。
上記の関数以外にも便利な機能があるので、
また別の記事で詳しくご紹介したいと思います！
これまで通り、navigation関数を利用したい方は、
以下のように書き換えるようにしてください。
var x = new kony.mvc.Navigation("frmMain");
x.navigate();
4. （Androidのみ）Project SettingでPermissionの設定を行う
VisualizerのProject Settingを開き、
Native -> Android Mobile/Tabletの設定を開きます。
一番下までスクロールし、
Permissionsで赤枠の項目を追加してください。
右側の枠に追加されたら、「Done」をクリックして設定を完了させます。
この設定をしないと、Androidで位置情報アクセス許可がうまく動きません。
忘れやすいポイントなので、必ず設定をするようにしましょう
！
実装結果
実装が完了したので、アプリの動作を確認しましょう。
Androidの場合
| 位置情報を許可しない場合 | 位置情報を許可した場合 |
|---|---|
|
|
iPhoneの場合
| 位置情報を許可しない場合 | 位置情報を許可した場合 |
|---|---|
 |
 |
どちらのデバイスの場合も、
位置情報が許可されている場合に、メイン画面に遷移、
位置情報の許可がされていない場合は、アプリが強制終了になっていることがわかりますね！
最後に
今回ご紹介した、位置情報のアクセス許可のポップアップは、
よく見る機能なので是非参考にしてみてくださいね
参考
アクセス許可の関数について：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.application_functions_runtimepermissionsapi.htm#requestPermission
アプリの強制終了：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.application_functions.htm
kronin:
https://github.com/mig82/kronin