FileMakerエンジニア
今回は FileMaker Go （ファイルメーカーゴー）で現在地（GPS）を取得し、地図上に表示する仕組みを作ってみました。
FileMaker Go では、GetSensor() 関数を利用してGPSデータを取得することができます。
現在地の情報がわかれば、
①登録済み住所までのルート案内
②現場作業アプリでの出勤・退勤地記録
③配送・点検などの位置ログ管理
④近くの拠点検索（Nearest検索）
など、FileMaker Goでできることが大きく広がります。
この記事では、以下を実装しています。
①FileMaker の GetSensor() で緯度・経度を取得
②取得した位置情報を地図に表示
③FileMakerに登録された住所までの ルート案内ボタンを表示
目次
GetSensor() で現在地を取得する
FileMaker Go には標準で デバイスのセンサー情報を取得する関数「GetSensor()」 が用意されています。
現在地（GPS）を取得する場合は以下のようにします。
GetSensor ( sensorName ; { オプション })
現在地（GPS）の情報を取得する場合は、sensorName にlocationを指定します。
このほかにも、バッテリー残量 や 充電中かどうか など、iPhone に搭載されている各種センサーの情報を取得することが可能です。
現在地（GPS）
GPS（Global Positioning System）とは、地球を周回する複数の人工衛星からの電波を受信しています。
地球上のどこでも現在地の情報（緯度・経度・標高）や時刻を正確に特定できる仕組みです。
緯度経度の取得
では実際にGetSenserを使って情報を取得してみたいと思います。
画像のようなスクリプトを作成しました。
実際にFileMaker Goで動かすと画像のようなダイアログが表示されます。
緯度：35.681236
経度：139.767125
水平精度：6.061376
の３つの情報が取得できました。
今回は地図を実装しますので緯度経度を使用していきます。
地図に現在地を表示表示
地図を表示するためにはFileMakerの機能のWebViewerを使用します。
表示するHTMLを以下のように準備いたしました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>現在地表示</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""
/>
</head>
<body>
<div id="map"></div>
<script
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin="">
</script>
<script>
const LAT = 35.681236;
const LNG = 139.767125;
const ZOOM = 15;
const map = L.map('map').setView([LAT, LNG], ZOOM);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
const marker = L.marker([LAT, LNG]).addTo(map);
marker.bindPopup(`緯度: ${LAT}<br>経度: ${LNG}`).openPopup();
</script>
</body>
</html>
const LAT = 35.681236;
const LNG = 139.767125;
の部分を以下のFileMakerの計算式に置き換え、先ほどの取得した緯度経度の情報を入れていきます。
const LAT = " & GetValue ( GetSensor ( "location" ) ; 1 ) & ";
const LNG = " & GetValue ( GetSensor ( "location" ) ; 2 ) & ";
すると画像のように表示されました。
これで現在地の地図が開けるようになりました。
目的地までの地図
では次は、目的地までのルートが表示されるようにしてみたいと思います。
先ほどの緯度経度を出発地点と目的地で分けます。
const LAT = 35.681236;
const LNG = 139.767125;
↓
const START_LAT = 35.681236;
const START_LNG = 139.767125;
//目的地は東京スカイツリーに設定
const GOAL_LAT = 35.710063;
const GOAL_LNG = 139.8107;
目的地までのルートを作成する処理を追加。
L.Routing.control({
waypoints: [
L.latLng(START_LAT, START_LNG),
L.latLng(GOAL_LAT, GOAL_LNG)
],
routeWhileDragging: false,
show: false,
addWaypoints: false,
draggableWaypoints: false,
lineOptions: {
styles: [{ color: '#0078ff', weight: 5 }]
},
createMarker: function(i, wp) {
return L.marker(wp.latLng).bindPopup(
i === 0 ? '出発地：現在地' : '目的地：__目的地__'
);
}
}).addTo(map);
不要になった要素を削除。（緯度経度の表示）
const marker = L.marker([LAT, LNG]).addTo(map);
marker.bindPopup(`緯度: ${LAT}<br>経度: ${LNG}`).openPopup();
これでもう一度FileMaker Goで確認してみると画像のようにルートが表示されました。
まとめ
いかがでしょうか。
今回は簡易的な地図を準備したので簡単なルートだけの表示となりますが、もっと作り込むことができれば案内などの機能を入れ込むこともできます。
また、GetSenser()には他にも歩数を取得したり、移動した距離など取得ができますので健康アプリなんかを作ると面白そうですね。
また、株式会社ブリエでは、FileMakerを活用したシステム開発や運用支援を行っています。
業務システムのセキュリティについてのご相談もお気軽にお問い合わせください。
多岐にわたる業種での経験を経て、現在はFileMakerを中心に活躍中のエンジニアです。ローコード開発を得意としながらも、Django、React、Flutterなどの技術にも挑戦し、幅広い開発スキルを習得。常に自分の技術を磨き、より良いソリューションを提供できるよう、継続的にスキルアップを図っています。多彩な技術を駆使して、クライアントのニーズに応える柔軟性と、迅速かつ効果的な開発力が強みです。
