openURLを使って指定されたWebページを開く方法

目次

1. はじめに
2. 実装方法
3. まとめ

はじめに

Konyで開発したアプリから、
アプリをアップデートするためにAppStoreに飛ばしたり、
場所を表示するためにマップを開かせるような機能を実装することがあるかと思います。

今回は、iOS、Androidで指定されたWebページを開く方法についてご紹介したいと思います！

実装方法

①画面の作成

今回は、サンプルとしてアプリ上で場所が表示されており、
地図アイコンをタップするとその場所がマップで表示されるようなアプリを作成したいと思います。

このような画面を作成してみました。

右にある黄緑色の地図アイコンボタンをタップすると、マップアプリに移動し、東京駅の場所を表示します。

②コーディング

Form1Controllerのコーディングを行います。

Form1Controller.js

define({ 
 //iPhoneの場合
 openMapsApp: function(){
    var mapURL = "http://maps.apple.com/";
    var lat = "35.6809591";
    var long = "139.7673068";
    if (lat && long) {
      mapURL = mapURL + "?q=" + lat + "," + long;
    }
    kony.application.openURL(mapURL);
  },

  //Androidの場合
  openGoogoleMapsApp: function() {
    var mapURL = "https://www.google.com/maps/search/?api=1";
    var lat = "35.6809591";
    var long = "139.7673068";
    if (lat && long) {
      mapURL = mapURL + "&query=" + lat + "," + long;
    }
    kony.application.openURL(mapURL);
  }, 
  
  // iPhoneかAndroidか判断
  openMap: function(){
    //#ifdef iphone
    this.openMapsApp();
    //#else
    this.openGoogoleMapsApp();
    //#endif
  }
 });

上を説明します。
let：緯度
long：経度
ここでは東京駅の緯度経度を表しています。
緯度と経度の調べ方はこちらを参考にしてください。

kony.application.openURL（URL）：このAPIは指定されたURLでWebページを開きます。
今回はマップアプリのURLと緯度と経度を組み合わせたURLでWebページを開いています。

#ifdef iphone：デバイスごとの条件分けを行うことができます。
今回はiPhoneの場合、this.openMapsApp();を実行し、
それ以外の場合は、this.openGoogoleMapsApp();を実行します。

③Actionの紐付け

関数の準備ができたらActionと紐づけていきます。
btnSearchを選択し、ActionタブからonClickのEditをクリックしてActionの紐づけを行います。

ここまでで、マップ（iOS）/Google Maps（Android）を開くための実装が完了しました。
実際にどうなるかみていきましょう！

④実装の確認

iPhone

pic.twitter.com/UQhrtlXCjP

— Kony (@Kony12763790) January 13, 2021

**Android**

pic.twitter.com/CJsELy80SX

— Kony (@Kony12763790) January 13, 2021

マップアプリに移動して、東京駅の位置を表示していることが分かりますね！

まとめ

今回は、openURLを使って指定されたWebページを開く方法について説明しました。
みなさんもぜひ活用してみてくださいね

参考

kony.application.openURL（URL）：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.application_functions.htm#kony.app4

緯度と経度の出し方：
https://www.geocoding.jp/