【Android】 GPS ログをサイト/ブログに埋め込む
はじめに
登山や旅行、サイクリングの移動ログ（GPS ログ）を残して、サイト上の地図に記載したいと思う事があります。GPS ログの取得方法は色々ありますが、スマートフォンのアプリを使った方法が簡単です。スマートフォン用有料アプリで GPS ログを取得し、KML もしくは GPX データとして出力、出力されたデータを Google My Map などでサイトに埋め込む、というのが王道の方法になってくると思います。しかし、無料で簡単に埋め込む、となると意外としっくりくる方法が少ないのが現状です（全く無い訳ではない）。
そこで当サイトでは、無料/無広告のシンプルな GPS ロガーアプリ（Android版）と 埋め込み地図を編集できるフリーのサイト（DrawTrail）を作りました。GPS ログを自分のサイトに埋め込む手順はざっくり以下の通りです。
1. アプリ「TrekkingTrail」で GPS ログを取得する。
2. アプリからGPSログを CSV 形式で出力する。
3. CSV データを サイト「DrawTrail」 に読み込む。
4. 「DrawTrail」で GPS ログを含む埋め込み地図の HTML/JavaScript を生成する。
扱うデータはCSV データ（1列目が緯度、2列目が経度のデータ）なので、エクセルで要らない行を消したり、編集したりすることも容易かと思います。なお、当サイト管理人は Android ユーザーの為、iOS 版のアプリはまだありません。
DrawTrail
アプリのダウンロード
当サイトでは、Android 用 GPS ロガーのデモアプリを公開しています。下記のボタン、あるいはQRコードよりダウンロードできます。Android4.1 から Android13 まで対応。
備考：アプリの Google Play での公開はめんどくさすぎて心が折れました。
なお、当アプリ上で使用しているマップデータは当サイトのサーバーに保存しているため、サーバースペックにより低解像度の地図となっています。高解像度な地図をご所望の方は、こちらにソースコードを公開しているので、Android Studio でアプリを作成して、OpenStreetMap のサーバーにアクセスしてください。
機種によってはバッテリー消費を抑える為、アプリが強制停止されることがあります。その場合は、バッテリー設定より、バックグラウンドでの動作を常に許可してください。
→ プライバシーポリシー
GPS ログを取得、出力する
上記の GPSロガーアプリで、GPS ログを取得する方法と、CSV データに出力する方法です。
まず、アプリをダウンロードして、正確な位置情報へのアクセスの許可と、常に位置情報へアクセスする許可を行うと、以下のようなローディング画面が開きます。
数秒時間が経つと、現在位置が中央に表示されます。今回は天神（福岡）から別府（大分）まで高速バスで移動するときのログを取得してみます。サンプリング間隔を10秒に設定し、「GPSロガーを開始する」ボタンをタップするGPSロガーが開始されます。なお、サンプリング間隔を変更することも出来ますが、個人的には 10 秒間隔ぐらいがお勧めです（消費電力を減らしたい方はもっと長めに設定してください）。
GPSロガー動作の途中経過の様子です。移動距離が表示され、「GPSロガーを開始する」ボタンの表示が、「GPSロガーを停止する」の表示に書き換わっていることが分かります。なお移動距離の精度ですが、繰り返し精度がだいたい ±5% です（停止時間が長くなると、誤差が大きくなります）。
ゴールの別府北浜についたので、「GPSロガーを停止する」ボタンをタップして、GPSロガーを停止しました。「GPSロガーを停止する」ボタンの表示が「GPSログを削除する」に書き換わっていることが分かります。
ここで、GPSログを削除せず、「CSVを出力する」ボタンをタップします。すると入力ダイアログが立ち上がるので、ファイル名（拡張子抜き）を入力すると、Download フォルダに GPS ログが CSV 形式で保存されます。
CSV から HTML/JS を生成する
出力された CSV ファイルから HTML/JavaScript を生成するためには、DrawTrail を使います。
トップページ を開き、①「CSV読み込み」→ ②「ラインを描く」を順に選択すると、CSV ファイルを選択するためのウィンドウが開きます。そこで、先ほどアプリで出力した CSV ファイル（1列目が緯度、2列目が経度のデータ）を選択すると、地図上に GPS ログが表示されます。
読み込んだ GPS ログを HTML/JavaScript に変換するためには、マップの表示を好きな範囲に合わせて、③「エクスポート」→ ④「埋め込みコードを生成」→ ⑤「クリップボードにコピー」と順に選択すると、埋め込み用のHTMLが生成されます。WordPress を使っている場合は、「カスタムHTML」 にそのまま張り付ければ動作します。
あるいは試しに動かしてみたいだけの場合、③「エクスポート」→ ④’「HTMLファイルをダウンロード」と順にクリックすると、テストファイルが生成されます。
実際に以上の手順で作成した埋め込み地図は以下のようになります。なお割愛しましたが、マップタイルを変更したり、地図上に画像を埋め込んだりする機能もあります。興味のある方は色々と触ってみてください。
DrawTrail
スマホから DrawTrail を開く
スマートフォンから直接 DrawTrail を開くことも可能です。TrekkingTrail（アプリ）を開き、右上の「CSV editor: DrawTrail」をタップすると、DrawTrail が開きます。
PC 版と同様に、下から二番目の CSV 読み込みアイコンをタップします。
「ラインを描く」をタップします。ウィンドウが開くので、Download フォルダに保存されている、TrekkingTrail（アプリ）で取得した GPS ログを選択します。
スマートフォン上の DrawTrail で GPS ログを確認できました。TrekkingTrail（アプリ）の地図の解像度は高くないので、以上のようにして GPS ログを高解像度な地図上で確認することが出来ます。
まとめ
繰り返しにはなりますが、当サイトとそれに連携した Android アプリを使う事で、GPS ログを自分のサイトに埋め込むことが出来ます。
1. アプリ「TrekkingTrail」で GPS ログを取得する。
2. アプリからGPSログを CSV 形式で出力する。
3. CSV データを サイト「DrawTrail」 に読み込む。
4. 「DrawTrail」で GPS ログを含む埋め込み地図の HTML/JavaScript を生成する。
趣味レベルで開発したツールになりますが、どなたかのサイト運営の一助になれば幸いです。
