Skip to content

観光履歴をhtml形式で地図上にプロットしつつ画像も閲覧できるように残す

Share
    6457文字(約10分)

モチベーション

たまにGoogleのタイムラインを眺めるのが好きだったのだが、気が付くと端末内に暗号化されてしまっておりPCから閲覧することができなくなっていた。仕方ないということでエクスポートして手元でプロットでもしようと思ったが、そもそも端末からエクスポートできない(アプリからできる人もいるっぽいが自分の環境ではできない、許せない)。スマートフォンで見ても良いがそういうものに縛られるのが嫌。
出不精の身としては、数少ない移動の記録を残し、暇なときに見返して楽しみたい。そのためウェブサービスを記録として利用するのは危険ということで自らの移動ログと写真のひもづけを統合的に管理する方法を検討する。
出てこない以上これまでの移動分は諦めるしかない。。。

要求

必須は★

  • ★半永久的にデータを保存したい
    • 何かのアプリケーション・ベンダーに依存しそこの都合で閲覧・出力できない、ということがない。すべての手段は代替可能である
    • 保管は自分でがんばる
  • ★移動データを地図上にプロットし移動経路がわかる形で閲覧したい(ただの点群プロットではなく時系列で線をつなぐなどしてほしい)
  • 移動データと画像データを同時に閲覧したい
  • 移動データを編集したい
    • 移動データが完全なものである保証がないため軽い修正を入れたい

最終成果物

プロットデータ

こんな感じにOpenLayers上に移動データをプロットし、取り込んだ写真もクリックすることで閲覧できる。

注意

本記事を参考にする方がどれだけいるかはわからないが念のため。
このシステムではある程度の個人情報が残る可能性がある。写真にはexif情報が付与されており、一部のSNSでは投稿時に自動で削除してくれるため気にする必要がない。だがこのシステムにそのような機能はないため自分で消さないと残ってしまう。
exif情報でよくある困るデータはGPS情報だがこれは地図に載せるためにやっているので問題はないだろう。しかし利用したカメラや日付などはやや個人・行動内容の特定につながる可能性もある(こっそり買ったカメラがばれるとか、日付をぼかしたはずの旅行がばれる的なもの)。そのため必要に応じて削除してからアップロードが必要。

なお上記プロットデータでは、それ以前の問題として容量が大きすぎた(元の写真データは1枚4MBほど)ため、圧縮のためavifに変換した(それに伴い表示用のjsも書き換えている)。その過程でexif情報はすべて消えている

システム全貌

alt

動作確認バージョン

ソフトウェア バージョン
GPSLogger 2024/01/28※
QGIS 3.38.3
(QGIS plugin)qgis2web 3.23.0
(QGIS plugin)ImportPhotos 3.0.6

※GPSLoggerを見るとv3.2.2

検討事項

今回の要求を実現するために次の2状態に分けて検討する

  1. ロギング
  2. プロット・加工・閲覧

1. ロギング

いくつかロギング用のアプリ(android)は見つかった。写真もまとめて管理してくれるアプリも当然あったが、今回の要件としてはプラットフォームに依存しないことのため選外。エクスポート機能があるかぐらいは確認してもよかったが、普通のアプリは囲い込むためにエクスポート機能はあまり作らないため望み薄。そのため手元でまとめられなかったら調べようと思い、実現できたため未調査。
またログをどの形式で保持することが望ましいのかは正直わからなかった。ひとまず地理情報といえばgpx, kmlでありこれらを出力してくれたGPSLoggerを利用することとした
このアプリは手動でロギング開始ボタンを押す必要がありやや面倒だが、普段GPSを付けていない系人間にとってはGPSボタンを押すのに加えて開始ボタンを押せばよいので許容範囲。
またGPXViewerと連携できるためスマートフォン上で簡単に見直すこともできる。
安全性は未調査。まあ抜かれたとて移動情報程度なので問題なしとする

2. プロット・加工・閲覧

閲覧は一度作成したら長い間(できれば永遠に)できることが望ましい、ついでにいうなればインタラクティブな操作ができるとより良いため画像形式というよりはhtmlのようなものが望ましかった。そのためhtmlに出力できるソフトを調べそこから逆引きしてログを地図データにプロットできるように調査をした。
htmlに出力するソフトはいくつか存在するようだが、最近?のトレンドはウェブアプリのようでローカルで動くアプリは少なかった。ウェブで動作したとしても最終成果物がhtmlなら問題はないが、サーバーを畳まれるとそれ以降作れなくなる恐れがあるためできるだけ避けたい。その結果GPSデータを地図にプロットしてくれるソフトウェアはQGISしか選択肢がなさそうだった。これを使わせてもらう。

以降ではQGISで詰まった点などを残す。

ディレクトリ構造

/
|- xxx.qgz	←QGISのプロジェクトファイル
|- log		←GPSログ(これはどこでもよい)
 |- xxx.gpx
 |- xxx.kml
|- images	←(GPSデータ付き)写真
 |- xxx.jpg
 |- xxx.gpkg	←ImportPhotosで作ったレイヤー(これはどこでもよい)
|- qgis2web_xxx	←出力フォルダ(これはどこでもよい)
 |- images	←写真はここを参照する
 |- layers
 |- resources
 |- styles
 |- webfonts
 |- index.html	←これを開けばローカルでも閲覧できる

(GPSデータ付き)写真はQGISのプロジェクトファイルから相対パスとしてimagesにいる必要がある。これはhtmlに変換してくれるqgis2webがエクスポート時に相対パスで画像も出力するのだが、画像データは一律?imagesに入る雰囲気がある。そのためプロジェクトに入れる時点で合わせておくと当該フォルダに移動すればよいため手間が省けるためだ(出力先のimagesをリネームしてもよい、写真以外にも入れるならそっちの方が良いかもしれない)。

取り込みから出力までの流れ

  1. gpx, kmlをインポート・表示レイヤーの絞り込み
  2. 地図の選択
  3. 写真をインポート
  4. 写真用レイヤーの修正
  5. 写真プロパティの変更
  6. 点群データの修正
  7. エクスポート
  8. 写真の移動

QGISのプロジェクトは相対パスで管理しているため、プロジェクト位置を変える場合はQGIS上で再保存などが必要。始めに置き場を考えておいた方が良い

gpx, kmlをインポート・表示レイヤーの絞り込み

プロジェクトを作成しドラッグドロップするとインポートできる。いろいろとデータはあるがgpxをインポートしtracks(線の方)だけを残すのがよさそう。長時間のログの場合にそれ以外(routesなど)も入れておくと点群が多いことから重くなり操作感が悪くなってしまう。

最終的に次のような感じにしている(写真・tracksを一部編集したレイヤー・地図の3つを表示している)
alt

地図の選択

忘れがち。次のXYZ Tilesで好きな地図を選択する。また描画順を一番下にしないと他のものが見えなくなる。
alt

写真をインポート

ImportPhotosで行う
注意：これでインポートできる写真はGPS情報が付いているものに限る。ついていない場合対象外とみなされる。そのため、うまく入らない写真がある場合GPS情報が付いているかを確認する

OutputFileLocationはどこでもよい

写真用レイヤーの修正

インポートにより追加したレイヤーを選択し、レイヤスタイルを「単一定義(single)」にする。これにしないとqgis2webで出力対象とならない、理由は調べていない
alt

写真プロパティの変更

既存のままだとファイル位置が縦横比が固定となっている。やや閲覧に向かないため幅だけ指定に変更したいが、プラグイン側に修正を入れるのは大変なのでImportPhotosで取り込み作成したデータに後処理を加え所望のhtmlに置き換える。

次のコードで一応動く。無理やり直している

layer = iface.activeLayer()  # アクティブなレイヤーを取得
with edit(layer):  # 編集モードをオン
    for feature in layer.getFeatures():
        print(f"before:{feature["images"]}")
        feature["images"] = feature["images"][:-26]
        feature["images"] = feature["images"] + "style=\"width: 300px; object-fit: contain;\">"
        layer.updateFeature(feature)  # 更新
        print(f"after:{feature["images"]}")

※「-26」：imagesの元の値は次のようになっている<img src="画像の絶対パス" width="300" height="225">。この既存のwidth部分までを消したいが、これは後ろから25文字分ある。これを消すため先頭～末尾から26文字目までの範囲に変更するための指定。その次の行で差し込みたいhtmlに変更している。もうちょっといい方法がありそうなものだが、まあできたから良いこととする。printはコンソールでの変更確認用なので消してもよい

UI上の手順は次のようになる。
alt

点群データの修正

ロギングの都合上どうしても不要な点群データが出てくる。これは人力で削除する。
まずインポートした生のデータは修正できないため、いったんQGISで編集可能な形に変換し、その後UI上で不要な点を消す。

当該レイヤー(今回はtracksを選択)を右クリック>エクスポート>新規ファイルに建物を保存とし、ジオメトリ型をラインストリングとする。これにより編集可能な形に変化する。
alt

その後編集モード>頂点ツールを有効化と進め、不要な部分を選択してDeleteボタンで消す。選択点数にもよるが意外と時間がかかる(10秒～)ため気長に待つ。
alt
最後に保存ボタンを押す。押さなくともエクスポートに支障はないが再度開いたときに反映されていない

エクスポート

いらないものを適当に非表示にする。routesのpopupsは画像と重なると複数出てしまい閲覧に少し邪魔なため消しておいた方が良い
またimagesは必要に応じて各フィールドを非表示にする。写真のexif情報は邪魔なので大抵を非表示にする(Commentぐらいは残してもよい)
※非表示にしたとしてもエクスポートされたファイルには残っている。見られて困るデータがある場合はレイヤーの設定からデータ自体を消すこと

alt

写真の移動

エクスポート先には画像がないため、「★1」から「★2」に画像を移動させる。一度だけなのでここは人力でがんばる

/
|- xxx.qgz	←QGISのプロジェクトファイル
|- log		←GPSログ(これはどこでもよい)
 |- xxx.gpx
 |- xxx.kml
|- images	←(GPSデータ付き)写真★1
 |- xxx.jpg
 |- xxx.gpkg	←ImportPhotosで作ったレイヤー(これはどこでもよい)
|- qgis2web_xxx	←出力フォルダ(これはどこでもよい)
 |- images	←写真はここを参照する★2
 |- layers
 |- resources
 |- styles
 |- webfonts
 |- index.html	←これを開けばローカルでも閲覧できる

懸念

本システムは先人の知恵により比較的疎な作りで実現できた。そのためどこかが使えなくなっても何とかなりそうな気はする。
今回は最終成果物をhtmlとしたが、pdfでも出力はできる。ただ写真は出せないのでhtmlがよさそう。

しかし要求の「半永久的」を守ろうと考えた場合、QGISのプロジェクトファイルも残す必要がある。というのも裏に敷いている地図情報はhtmlを開く際にwebからダウンロードしているためサーバーが畳まれてしまった場合閲覧できなくなってしまう。とはいえその際もこの世のすべての地図サーバーがなくなるとも思えないため別のものに差し替えられるはず、という思想のもと再発行できるように残す必要がある。
一番良いのはプロット範囲の地図データも合わせてhtmlにバンドルしてしまうことなのだろうが、できるかはわからない。(そこまでの開発は面倒)

ただポップアップで写真が出るが必ず上に表示されるのがやや見づらい。やる気がわいたらもうちょっと見やすいポップアップにしたい。

その他システム外で怖いこととして「保管は自分でがんばる」部分がある。作成したものは外付けやクラウドにも上げるがバックアップの一環で本サイトにアップした場合が怖い。このサイトはGithubリポジトリで管理している。そのためむやみやたらと写真を上げすぎるとリポジトリ容量で詰む。どうせそんなに写真は取らないし、そうなったらflicker辺りとの連携でも考えよう……

ひとまず、いい感じに残せるようになった！ばんざい

comments powered by Disqus

目次