読者です 読者をやめる 読者になる 読者になる

CRUD Lab. Tech Blog

ギークス株式会社の沖縄開発拠点CRUDLab. (クラッドラボ)のIT技術(テック)ブログ。kintoneやAngularJSによる開発を行っています。

【kintone】スマホでkintone:Geocoding API との連携

kintone

0. 目次


1. 概要

ギークス株式会社CRUD Lab.まとめ役の、ATSUSHIです。

kintoneはPC/Macのブラウザだけでなく、スマホからも利用ができます。 スマホからのアクセス方法は、kintoneのネイティブアプリとWebブラウザからの2種類です。

今回はスマホのWebブラウザ版で JavaScriptを使ったkintoneカスタマイズを試していきたいと思います。

kintoneのスマートフォン利用方法は下記を確認してください。 - https://help.cybozu.com/ja/k/user/smartphone.html

2. スマホで位置情報を取得する

これから、GoogleのGeocoding APIとkintoneを組み合わせてみます。

Geocoding API について

Geocoding APIの全容については、下記を確認してください。 - https://developers.google.com/maps/documentation/geocoding/intro

(スマホのブラウザ版限定としているのは、Geocodingがネイティブアプリ版のkintoneでは使えないためです。いろいろと試してみたのですが、アプリで現在位置の取得が許可されていないためと思われます。)

Geocoding API "reverse geocoding"の機能を利用して、経緯度で住所を逆引きします。 今回は、Geolocation.getCurrentPosition()というメソッドを利用します。

navigator.geolocation.getCurrentPosition(
    処理成功時のコールバック, 
    処理失敗時のコールバック
);

上記の処理をkintoneのレコード新規作成イベント発生時に実行しデバイスの現在位置(経緯度)を取得します。 成功した場合にはジオコーディングを利用して文字列の住所情報を入力欄に設定します。

3. 実装

それでは、以下を参照して構築していきましょう。

アプリの設定

フィールドコードの設定を以下のように設定したアプリを用意してください。

フィールド名 フィールドコード 初期値 フィールドコードタイプ/その他
日時 datetime アクセス日時 日時 /
メモ memo -- 文字列(複数行) /
住所 address -- 文字列(1行) / Geocoding APIを利用して現在位置を登録する

JavaScriptのコーディング

アプリ設定「詳細設定」タブを開き、「JavaScript / CSSでカスタマイズ」>「スマートフォン用のJavaScriptファイル」に以下のファイルをリンクするようにしてください。 f:id:crud_lab_editor:20160304162755j:plain

'use strict';

// api のインクルード
document.write('<script type="text/javascript" src="//maps.googleapis.com/maps/api/js"></script>');


// レコード新規追加時に実行する
kintone.events.on(["mobile.app.record.create.show"], function(event){
  // コールバックを設定して実行
  navigator.geolocation.getCurrentPosition(
    successCallback, 
    errorCallback,{enableHighAccuracy:true}
  );
});


// 処理成功時のコールバック関数
var successCallback = function (p){

  var geocoder = new google.maps.Geocoder();
  var latlng   = new google.maps.LatLng(
    p.coords.latitude,
    p.coords.longitude
  );
  
  geocoder.geocode({latLng: latlng},
    function(res,status){
      if(status == google.maps.GeocoderStatus.OK){
          
          // フィールドコード「address」に取得した住所をセットする
          var  data = kintone.mobile.app.record.get();
          data["record"]["address"].value = res[0].formatted_address;
          kintone.mobile.app.record.set(data);
          
      }else{
        alert("geocode 取得に失敗 :"+status);
      }
    }
  );
}

// 処理失敗時のコールバック関数
var errorCallback = function (e){
  alert(e.message);
}

実行結果

f:id:crud_lab_editor:20160304162748j:plain

今回は、mobile.app.record.create.showを契機に処理を実行していますが、 kintone.mobileでは、使えるイベントハンドラに制限があることに注意してください。 詳しくは「PC-スマートフォン早見表」を参考にしてください。

4. まとめ

位置情報とGeocodingの機能を利用すれば、もっとkintoneを拡張できると思います。

  • mapの表示
  • テーブルビューと組み合わせ行動履歴を記録、行動mapを作成
  • ランドマークの検索
  • etc..

kintoneのスマホ版の魅力はもっと掘り下げる必要がありそうです。