地域ボランティアの「今どこ？」を可視化。無料でつくるリアルタイムGPSトラッキングシステムの実装録（S著）

出典: note.com / 2026-05-04

こんにちは！今回は、地域の移動支援（乗り合い送迎サービス）向けに開発した「リアルタイムGPSトラッキングシステム」の構築プロセスをご紹介します。

「ボランティアのドライバーさんが今どこを走っているか、管理側でサクッと把握したい」という課題からスタートし、ランニングコストゼロ、かつ特別な専用アプリ不要（ブラウザのみ）で動作するシステムを構築しました。

技術スタックはフロントエンド中心で非常にシンプルです。同じような地域活動やイベント運営で位置情報トラッキングを導入したい方の参考になれば幸いです。

🛠 使用した技術スタック本システムの最大の特徴は、「サーバーレス・アプリレス」であることです。

フロントエンド (地図描画): HTML/CSS/JS + Leaflet.js (軽量なオープンソース地図ライブラリ) バックエンド (リアルタイム同期): Firebase Realtime Database GPS取得: HTML5 Geolocation API ホスティング: Cloudflare Pages / GitHub Pages など静的ホスティングネイティブアプリをインストールしてもらうハードルを無くすため、すべてWebブラウザ上で完結するように設計しました。

🚗 システムの全体像と実装フローシステムは大きく分けて「ドライバー用送信画面」と「管理者用マップ監視画面」の2つから構成されます。

Step 1: ドライバー用画面（位置情報の送信）ドライバーはスマートフォンで専用のURLを開き、「追跡を開始する」ボタンを押すだけです。

実装のポイント：

Geolocation APIで現在地を取得: navigator.geolocation.watchPosition を使用して、デバイスの位置情報（緯度・経度・速度など）を継続的に取得します。 Firebaseへのリアルタイム送信: 取得した座標データをFirebase Realtime Databaseにプッシュします。データの構造は非常にシンプルで、vehicles/{vehicleId} の配下に最新の緯度経度とタイムスタンプを上書きしていくだけです。画面スリープの防止 (Wake Lock API): スマートフォンの画面が暗くなってGPS取得が途切れるのを防ぐため、Screen Wake Lock API を導入しました。これにより、ブラウザを開いている間はスリープしません。 Step 2: Firebase Realtime Database の設定今回、Firestore ではなく Realtime Database を採用しました。理由は「最新の1点だけを高速に同期できればよい」「オフライン時の挙動よりも低レイテンシを重視したい」ためです。

データ構造例:

json { “vehicles”: { “car1”: { “lat”: 34.xxxxx, “lng”: 135.xxxxx, “speed”: 10.5, “ts”: 1715000000000, “active”: true } } } Step 3: 管理者用画面（Leaflet.jsによる可視化）管理者はPCやタブレットで監視用マップを開きます。

実装のポイント：

Firebaseデータのサブスクライブ: onValue を使用して、Firebase上のデータ変更をリアルタイムに検知します。 Leaflet.js での描画: 受信した緯度・経度をもとに、Leaflet.jsで地図上にマーカーを配置します。今回は見栄えを良くするために、CartoDBのダークテーマタイル（Dark Matter）を採用し、サイバーな雰囲気に仕上げました。軌跡（ポリライン）の描画: 過去数十分の座標履歴を配列に保持し、L.polyline で車の移動軌跡を点線で描画するようにしました。

ブラウザの標準APIとBaaS（Firebase）を組み合わせることで、驚くほど手軽にリアルタイムトラッキングシステムを構築できました。

GAS (Google Apps Script) との連携: 1日の終わりに稼働ログ（移動距離や時間）をGoogleスプレッドシートに自動出力する機能。小規模な自治会やコミュニティのボランティア活動において、こういったIT技術が少しでも運用負荷の軽減や安心感につながれば素晴らしいなと思います。

お読みいただきありがとうございました！

この記事は note.com から KTBLOG に移行されました。元記事: https://note.com/famous_prawn2009/n/n090dacacd5b9