カテゴリー内の他の記事

Geolocation API(位置情報)を使ったモバイルアプリを作ってみよう

フォローする

(著者:kintoneエバンジェリスト 山下 竜

kintoneではスマートフォン用のJavaScriptも収容できるようになり、関連する情報も充実してきました。これでモバイルでの用途・使いやすさは更に増していくことと思います。今回は、HTML5の標準APIのひとつであるGeolocation APIを使ったシンプルなkintoneモバイルアプリを作ってみたいと思います。kintoneに保存するデータとして場所と時間を一緒に押さえておくことで、便利に使えることがあります。現場の懸案管理、訪問管理など屋外の動向管理に役に立つと思いますので、お試し頂ければと思います。

やや長めですが、お付き合い頂ければ幸いです。

準備とJavaScriptの適用方法

次のフィールドを含むアプリをご準備ください。

フィールドタイプ フィールド名(例) フィールドコード
文字列(1行) 緯度 lat
文字列(1行) 経度 lng
スペース Map
レコード番号 レコード番号 record_no

 

JavaScriptの適用方法としては「JavaScriptソースコード」をsample.js等ファイル名を付けて保存し、、「PC用のJavaScriptファイル」と「スマートフォン用のJavaScriptファイル」にそれぞれ同じファイルをアップしてください。(※ソースコードは下記に記載しています。)

出来上がりイメージ(モバイル画面)

見た目は、公式サンプルの「レコード一覧で顧客訪問リストを地図にピン表示する」と似たような感じになります。違うのは緯度経度の取得方法で、登録済みレコードの詳細画面で「緯度経度更新」ボタンを押すことで、緯度経度の値を更新することがきます。

JavaScriptソースコード

ソースコードの説明

「レコード一覧で顧客訪問リストを地図にピン表示する」との違いは次の3ポイントですので、この辺りを中心にご説明します。

  • 緯度経度をGeolocation APIで取得
  • スマートフォンに対応
  • PC用とスマートフォン用のJavaScriptを1つのファイルに記述(イベント以外の関数の共用)

【一覧画面に地図表示させる場合のレコード番号と緯度経度の取得】

スマホ用ではにrecordsはないのでAPIで情報を取得しました。むやみにAPIが走るのは好ましくありませんので、PCで開いたときにはevent.recordsから情報取得するようにし、これらの区別を"app.record.index.show"と"mobile.app.record.index.show"との間でif文に判断させます。

【一覧画面で地図を配置する要素の設定】

やはりPC用とスマホ用で違ってきます。スマホ用ではスクロールに耐えられるよう高さを150pxとしました。また、PC用とスマホ用でヘッダースペース要素の取得関数が「kintone.app.getHeaderSpaceElement(PC用)」と「kintone.mobile.app.getHeaderSpaceElement(スマホ用)」で異なるため、これらを使い分けます。

【詳細画面における地図を配置する要素の設定】

ここもPC用とスマホ用で違ってきます。PC用では要素IDが「Map」のスペースフィールドに、スマホ用では、「kintone.mobile.app.getHeaderSpaceElement」に対応する要素に配置します。合わせて、PC用では、親要素のサイズを変更しておきます。

【緯度経度を取得し、レコードを更新する関数】

Geolocation APIで取得した値を用いてレコード(緯度、経度)を更新します。なお、スマホ用では、アプリIDとレコードIDを取得する関数がないため、URLから取得しています。また、ここでこのようなPC用とスマホ用の区別が生じたため、位置情報取得成功時のコールバック関数を直接書き込むことで省力化しています。

【注意事項】

今回の注意点は次の通りです。

  • 筆者はMacintoshのGoogle ChromeとiOS7のSafariで動作確認を行っています。
  • 「xmlHttp」や「addEventListener」はブラウザによって対応が異なるので、それぞれご確認ください。
  • 今回は地図ライブラリとして「Google Maps API」を用いていますが、ライセンス等利用に関する制限は各自でご確認ください。

最後に

やや長めのTipとなってしまいましたが、いかがでしたでしょうか?今回はGeolocation APIを利用することで、タブレットやスマホからのレコード登録に合わせて位置情報を取り込む例をご紹介しました。

クラウドはモバイルとの親和性を高めることでより便利に使うことができますが、現状ではスマホ用のサンプルも少ないので、皆さまの参考になれば幸いです。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Eriko

いつも大変お世話になっております。
こちらの地図表示ですが、緯度経度ではなく住所で表示することは可能でしょうか?
もし可能であれば、サンプルコードをいただけるとありがたいです。

Avatar
にしかわ

Erikoさん
http://www.geocoding.jp/api/

住所から緯度経度を取得できそうなので、住所フィールドを用意しておいていっかい変換をかける感じでつくればいけるかと思います。

Avatar
橋本恵子

橋本です。

納品設置場所の地図を登録したいという話の中、納品場所によっては住所の番地では表示できない場所があり

現地に行った際に緯度・経度で地図表示・登録が出来るこちらのコードはまさに!といった感じです。

GPSでの緯度経度の取得だと、場所によっては微妙にずれます。

ピンを刺す場所を手動で指定するようには変更できないものでしょうか?

 

Avatar
cybozu Development team

橋本様

developer network事務局です。ピンを手動指定とは、具体的にはどのようなイメージでしょうか?

 

Avatar
橋本恵子

橋本です。

説明が雑ですみません。

自分のいる現在地を地点登録をしたいのですが、GPSでの登録だと微妙にずれるので、地図上の任意の位置に

しるしをつけた地図画面をKintone上に表示できるようにならないかという意味でした。

 

Avatar
cybozu Development team

橋本様

詳しいご説明をありがとうございます。地図上の緯度と経度を取得するには、Google Map APIでできるはずですので、手動取得用のボタンを別に作ってGoogle Map APIから取得するようにすれば実現可能だと思います。

Avatar
a_o_admin

お世話になっております。

本サンプルコードを参考にさせて頂きカスタマイズをしています。

現在スマートフォン版の実装で行き詰まっています。

下記のサンプルコードですとrecode_noを降順に全レコード出力することになりますが、

// スマホ用では、eventにrecordsはないのでAPIで直近の分を取得
var appUrl = kintone.api.url('/k/v1/records') + '?app='+ event.appId + '&query=' + encodeURI('order by record_no desc&fields[0]=record_no&fields[1]=lat&fields[2]=lng');

レコード絞込でプルダウンでレコードを絞り込んだタイミングで
絞込と同様の検索を上記の kintone.api.url(…で実現するにはどうすればよいでしょうか?
絞り込み条件の取得の仕方、その条件をクエリに入れ込む記法等がわかりませんでした。
お手数ですがご教授のほどよろしくお願いいたします。

Avatar
cybozu Development team
a_o_admin様
 
ご質問いただきありがとうございます。cybozu developer network運営チームです。
 
モバイルではkintone.app.getQueryを使えないので、location.href を使って一覧のURLを取得する方法があると思います。
具体的に、次のように指定した絞り込み条件を満たす一覧画面が表示されたタイミング(一覧表示event)でURLを取得します。
例:
    kintone.events.on("mobile.app.record.index.show", function(e) {
        var appUrl = location.href;
   
    })
 
上記サンプルコードの105行目のところ、次のように書き換えれば行けるかと思います。
} else if(event.type == "mobile.app.record.index.show"){ // スマホ用
   // スマホ用では、eventにrecordsはないのでAPIで直近の分を取得
 var appUrl = location.href;  
   
queryの指定方法について、次のページは参考になるかと思います。
Avatar
a_o_admin

cybozu developer network運営チーム ご担当者様

お世話になっております。ご回答ありがとうございます。

最終的に、絞り込み条件を満たす一覧画面のJSONを取得したいのですが、ご提案頂いたソースだと取得できませんでした。

location.hrefで取得したHTMLの中から絞り込み条件(cybozu.data.page['QUERY_STRING'])を取得すればいいのかと思いましたが、

cybozu.data.page['QUERY_STRING']以降の値を取得する処理を自作しなければいけないものなのでしょうか?

当方あまりJavascriptに明るくないので、申し訳ありません。ご回答の程よろしくお願いします。

 

Avatar
cybozu Development team

a_o_admin様

ご質問いただきありがとうございます。cybozu developer network運営チームです。

失礼しました。location.hrefだと、クエリ以外の部分も取得しますね。

location.searchを使えば、絞り込み条件を取得できます。

例:var qr = location.search;
  console.log(qr);  → ?view=20&q=f5318666%20%3E%3D%20LAST_WEEK()

ただし、必要なのは「q=f5318666%20%3E%3D%20LAST_WEEK()】だけですが、?view=20が入ってしまいますので、

/q=(.*?)(&|$)/ で 2番目のパラメータを取れるかと思います。

詳細は次のページをご参考ください。

http://did2memo.net/2015/12/28/javascript-url-parameter/

 

Avatar
a_o_admin

cybozu developer network運営チーム ご担当者様

お世話になっております。ご回答ありがとうございます。

kintoneはクエリまで出力する仕様なのでしょうか?

PC版、スマホ版両方で試してみましたが、 location.search;ですと 例にある ?view=20 部分しか取得できないようです。

 

ご回答の程よろしくお願いします。

 

 

Avatar
cybozu Development team

a_o_admin様

大変申し訳ございませんが、改めてa_o_admin様のコメントを読ませていただいたところ、

「レコード絞込でプルダウンでレコードを絞り込んだタイミングで」のところに認識がずれていることに気づきました。


をクリックして絞り込み条件を変えてレコードを絞り込んだタイミングではなく、

から一覧を切り替えたタイミングですよね?

一覧を切り替える場合、 location.searchを使って?view=20部分しか取れません。
「一覧の設定の取得」APIを使えば、レスポンスとして返ってくる「views.(ビュー名).filterCond」には絞り込み条件が入っています。
詳細は「一覧の設定の取得」をご参考ください。
https://cybozudev.zendesk.com/hc/ja/articles/204529784

ソースコード例:
(function() {
  "use strict";
  kintone.events.on("mobile.app.record.index.show", function(e) {

        var body = {
        "app": 1,
         "lang": "ja"
         };

        kintone.api(kintone.api.url('/k/v1/app/views', true), 'GET', body, function(resp) {
           // success
           console.log(resp);
       }, function(error) {
         // error
      console.log(error);
         });
     });
})(jQuery);

たびたび申し訳ございませんでした。
よろしくお願いいたします。

cybozu Development teamにより編集されました
Avatar
a_o_admin

cybozu developer network運営チーム ご担当者様

お世話になっております。

返信遅くなりました。

ご回答ありがとうございます。なんとか目的の通り実装できました。ありがとうございました。

ログインしてコメントを残してください。
Powered by Zendesk