カテゴリー内の他の記事

Geolocation API(位置情報)を使ったモバイル用のカスタマイズをしよう

2020年8月改訂のセキュアコーディング ガイドラインに抵触する内容が含まれています。認証情報が漏洩した場合の影響を考慮して慎重に検討してください。
該当箇所:JavaScriptプログラムの10行目

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

kintoneではスマートフォン用のJavaScriptも収容できるようになり、関連する情報も充実してきました。
これでモバイルでの用途・使いやすさは更に増していくことと思います。

今回は、HTML5の標準APIのひとつであるGeolocation APIを使ったシンプルなkintoneモバイルアプリを作ってみたいと思います。
kintoneに保存するデータとして場所と時間を一緒に押さえておくことで、便利に使えることがあります。
現場の懸案管理、訪問管理など屋外の動向管理に役に立つと思いますので、お試し頂ければと思います。

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

※ サンプルでは、地図の常時にGoogle Maps PlatformのMaps JavaScript APIを使用しています。
ご利用方法によっては有償ライセンスの購入が必要になる場合があります。Googleのライセンスをご確認ください。

準備とJavaScriptの適用方法

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

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

 

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

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

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

JavaScriptソースコード

11行目の「YOUR_GOOGLE_MAPS_JAVASCRIPT_API_KEY」の部分を取得したMaps JavaScript APIキーに書き換えてください。

ソースコードの説明

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

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

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

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

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

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

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

Geolocation APIで取得した値を用いてレコード(緯度、経度)を更新します。

【注意事項】

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

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

最後に

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

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

変更履歴

  • 2019/04/05
    • Maps JavaScript API キーを使用したコードに修正
  • 2019/06/07
    • PC版とスマートフォン版での処理を共通化(スマートフォン版のレコード一覧表示イベントで event.records 取得可能になったため)

このTipsは、2019年5月版 kintoneで確認したものになります。

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
fttbs

cybozu developer network 事務局 ご担当者様
お世話になっております。
エラーですが、本記事のJavascriptをそのまま使用しております。
デバッグの方法を調べて見たのですが、APIの実行は重複していないように思います。
導入したJavascript以外にkintone自体も含めて確認する必要があるのでしょうか。
何卒宜しくお願い致します。

Avatar
cybozu Development team

fttbs 様

お世話になっております。cybozu develper network 事務局です。

こちらでは同様のエラーを再現することができませんでした。
エラーが出力されるのは「緯度経度更新」ボタンを押した時でしょうか。

本エラーにつきましては、Google Map の Map JavaScript API によるもののため、
Maps JavaScript API のリファレンスも参考にしていただければと思います。

サインインしてコメントを残してください。