【後半】フォームブリッジで位置情報を取得してみる
前回の続きです。
実装してみる<アプリを作ろう>
今回は”現地で何かを点検する”ツールを作ってみます。
フィールドは、日時、点検者、異常内容、緯度、経度です。
フィールドコードはこのように設定します。(お好みで)
緯度は”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のリンクまで生成されちゃいました。
これは必要に応じて非表示にしておくと良いと思います。
うまくいきましたね。
リンクをクリックすれば、送信した場所に行くはずです。
適当に1が並んだ座標はベトナム沖みたいです。笑
あとはフォーブリッジ連携を活用して、点検結果から異常解消の際のステータス更新なんかを実装してはいかがでしょうか。
結構位置情報って需要あると思うんですが、機能追加はいかがですか?
トヨクモさん!
最後に重要なことを言います。
カスタマイズについてはトヨクモさんはサポート対象外です。
自己責任でお願いしますね!
どなたかのお役に立てましたら幸いです。
読んでいただき、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?