【後半】フォームブリッジで位置情報を取得してみる

前回の続きです。

実装してみる＜アプリを作ろう＞

今回は”現地で何かを点検する”ツールを作ってみます。
フィールドは、日時、点検者、異常内容、緯度、経度です。
フィールドコードはこのように設定します。（お好みで）
緯度は”location_lat”
経度は”location_long”

アプリを作ったらサクッとAPIキーを発行してフォームブリッジを作成します。

ここまでは簡単ですね。
では、JavaScriptを入れてみましょー。
下をメモ帳にコピー、適当なファイル名.jsで保存。
（GPS非対応の際のエラー処理も入ってない適当なコードなのであくまで検証用ですよ）
フィールドコードを変えた人は太字の部分を変えてくださいね。
state.record.location_lat.value
state.record.location_long.value

(function() {
  "use strict";

  //DOM生成後イベント発火
  fb.events.form.mounted = [function (state) {
    //geolocation宣言
　　navigator.geolocation.getCurrentPosition(location);

	function location(position) {
		//緯度を取得し、フォームに記載
		state.record.location_lat.value = position.coords.latitude;
		//経度を取得し、フォームに記載
		state.record.location_long.value = position.coords.longitude;

	};
    return state;
  }];
})();

フォーブリッジに保存して、反映してください。
GPS対応の端末で開いてみましょう。許可ボタンが出てきたら許可してください。

写真の緯度経度は加工しています

緯度経度出てきましたか？
その調子でkViewerも行っちゃいましょう。

これで完成です。
ん？緯度経度表示されても、場所わかんないやん。
そうでした。
よくあるのはkViewer上でGoogleMAPを表示させてピンを立てるやつ。
これ結構面倒くさいし、アクセス頻度によってはGCP(ぐーぐるくらうど)のお金かかるんですよね。
簡単にしちゃいましょう。
”GoogleMAP”という”リンク”フィールド足しちゃってください。
フィールドコードは、location_link　にしてみましょう。
で、JavaScriptをちょっと追加。//URL生成の行です。

(function() {
  "use strict";

  //DOM生成後イベント発火
  fb.events.form.mounted = [function (state) {
    //geolocation宣言
　　navigator.geolocation.getCurrentPosition(location);

	function location(position) {
		//緯度を取得し、フォームに記載
		state.record.location_lat.value = position.coords.latitude;
		//経度を取得し、フォームに記載
		state.record.location_long.value = position.coords.longitude;
		//URL生成
		state.record.location_link.value = "https://www.google.co.jp/maps?q=" + position.coords.latitude + "," + position.coords.longitude;

	};
    return state;
  }];
})();

さて、これでどうでしょう！

緯度経度は加工しています

GoogleMAPのリンクまで生成されちゃいました。
これは必要に応じて非表示にしておくと良いと思います。

うまくいきましたね。
リンクをクリックすれば、送信した場所に行くはずです。

地図データ©2023 Google

適当に1が並んだ座標はベトナム沖みたいです。笑
あとはフォーブリッジ連携を活用して、点検結果から異常解消の際のステータス更新なんかを実装してはいかがでしょうか。

結構位置情報って需要あると思うんですが、機能追加はいかがですか？
トヨクモさん！

最後に重要なことを言います。

カスタマイズについてはトヨクモさんはサポート対象外です。

自己責任でお願いしますね！

どなたかのお役に立てましたら幸いです。
読んでいただき、ありがとうございました。