見出し画像

フォームブリッジに地図を表示し、現在地（緯度と経度）を取得するjsカスタマイズ

てっぺ

フォームブリッジ（FormBridge）のフォームに地図を表示し（初期値は現在地）、緯度と経度を取得するJavaScript(以下、js)を作りました。

kintoneの活用に役立てていただければと思います。
ソースはGitHubにありますので、自由にアレンジしていただけます。

注意点

なお、シンプルなスクリプトですので動作しなくなる可能性は低いと考えていますが、フォームブリッジの仕様変更などの影響を受けることも考えられます。（jsのカスタマイズはフォームブリッジのサポート対象外です）
ミッションクリティカルな業務で使う場合は、有償のサービスを検討してください。


主な機能

  • フォームを開くと地図（OpenStreetMap もしくは 国土地理院地図）を開く。

  • フォームを開くと現在の位置情報（緯度、経度）を取得する。（使用中のブラウザの標準機能を使います。Chrome, Safariで動作確認済）

  • 緯度フィールドと経度フィールドに値を設定する。

  • 地図上のマーカーをドラッグで移動でき、その都度緯度と経度が更新される。

想定する利用シーン

屋外でフォームブリッジからkintoneに位置情報を送ることができれば便利そうなケースを想定します。
例えば、

  • 街なかの街灯が切れたら、気づいた人が誰でも管理者に報告できる仕組み

  • 街なかにイノシシが出てきたら「ここから出たよ」とスマホから報告してもらう仕組み

  • 〇〇調査員みたいな人が現地で写真を撮って報告する際、その位置も座標で記録しておきたい場合

など、位置情報をkintoneに放り込めるだけで役立つ業務はたくさんあるかと思います。

前提条件（基礎知識）

トラブルを避けるために、最低限以下について理解している方のみ、利用してください。

  1. kintoneアプリのフィールド名とフィールドコードの違いが分かっていること。

  2. フォームブリッジでフォームを作る基本的な手順を知っていること。
    （基本的な手順はここでは解説していません）

前提条件（kintoneとフォームブリッジの契約）

kintoneはスタンダードコースが必要です。
（ライトコースではフォームブリッジが使えないため）

フォームブリッジのプレミアムコース以上を契約していること。
（ライトプラン、スタンダードプランではJavaScript/CSSでのカスタマイズができないため）

設定内容

最低限必要なフィールド

最低限以下2つのフィールドを用意してください。

  • 緯度

    • 種類：数値フィールド

    • フィールド名：緯度

    • フィールドコード: latitude

  • 経度

    • 種類：数値フィールド

    • フィールド名：経度

    • フィールドコード: longitude

フィールド名は「緯度」「経度」が基本かと思いますが、変えても動作します。
フィールドコードは、必ず上記のように英語で設定してください（kintoneアプリも、フォームブリッジのフォームもどちらも合わせておく）。

formbridge-location-picker.jsのダウンロード

フォームブリッジに設定する「formbridge-location-picker.js」は、以下のGitHubから入手してください。

formbridge-location-picker.js を開き、
画面右上あたりに「Raw」とあるあたりの「Download raw file」からjsファイルをダウンロードできるかと思います。

必要なjsファイルはこれ1つです。

フォームブリッジの設定箇所

詳しい設定 ＞ JavaScript/CSSでカスタマイズ に移動し、
「フォーム用のJavaScript/CSSファイル」で以下の設定を行ってください。

うまく動作したら、以下も気にしてください

一旦上記のシンプルな形で動作が確認出来たら、以下の点も気にしてみてください。

  1. フォーム上では、緯度と経度は「編集不可にする」
    地図上のマーカーを移動させれば緯度と経度は自動的に変わります。
    なのでフォーム上では編集できないようにするのがよいです。

  2. kintoneアプリ側で緯度と経度の数値の桁数を上げておく
    kintoneアプリの数値フィールドの小数点以下の桁数はデフォルトで4桁になっています。これを6桁にしておくとよいです。
    設定 ＞ 高度な設定 ＞ 小数部の桁数 から変更できます。

設定に必要な最低限の情報は以上です。kintoneやフォームブリッジに慣れている方であれば、これで設定できるかと思います。

補足：国土地理院の地図を表示したい場合

jsファイルの先頭にはいくつかパラメータがありますが、
　useOpenStreetMap = true
を
　useOpenStreetMap = false
にすると、国土地理院の地図を表示することができます。

この記事が気に入ったらサポートをしてみませんか？