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

0. 目次

0. 目次
1. 概要
2. スマホで位置情報を取得する
- Geocoding API について
3. 実装
4. まとめ

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);
}