PhotoLog再構築 on Vue.js & Firebase

4年半程、当ブログの片隅でも運用を続けているPhotoLog。自分が訪れたことのある場所に、1枚の写真をピン留めして記録するこのツールを、この度 Vue.jsとFirebase上に再構築してみた。

PhotoLogの歩み

PhotoLogは、自分の訪れたことのある場所を写真とともに地図上に記録するツール（現在は廃止されてしまったかつてのInstagramのフォトマップのようなもの）として、2015年9月頃から運用を開始。

PhotoLogを作ってみた - pieces of daily life

初期は、GoogleMapのマイマップ機能を使用し実装していたものの、データを更新するためのAPI等インターフェースが弱いという欠点もあり。モバイルデバイスからの更新アプリ等拡張を目指し、2018年6月頃、Googleが提供していた簡易RDB Fusion Tables と Google Apps Script上に構築したWEBアプリに移行、したものの…。その数か月後に2019年末をもってFusion Tablesの廃止が発表され、路頭に迷うことに（マイマップ→Fusion Tablesへの移行と、Google Apps Scriptを使った更新についての記事を書いていたものの、直後の廃止発表で下書き止まりに）。

結局廃止までに代替手段が見つけられず、廃止直前にデータバックアップをとるだけで、以後しばらくはPhotoLogは停止状態に…。

さすがにいつまでも止めておくの癪なので、年末年始にFirebaseの技術検証した後の3月頭に、再構築を完了させた。

New PhotoLog の構成

今回、再構築したNew PhotoLogの構成は下記の通り。

PhotoLog構成図

フロントエンド
- Vue.js のSPA
- デザインはほぼ素の状態のVuetifyを使用
- 一般公開用ページ（地図ビュー）と、管理ページ（レコード追加・画像upload）用意
- 座標情報をGoogleMap APIに渡し、地図上へピン留め
- netlify上で静的ホスティング
バックエンド
- Firebase Cloud Firestore
  場所の座標情報・コメント・画像URLを記録
- Firebase Storage
  フロントからuploadされた画像ファイルを保持
- Firebase Authentication
  Cloud Firestore・Storageへの書き込み権限管理

データの取得から地図上へのマッピング、すべてをフロント（クライアント）側に寄っているため、ブラウザに負荷がかかり、若干読込がもたつくことが欠点ではあるものの、一先ずこれまでと同じものを作り直すことができたので、第一目的は達成したことにさせてください。（いずれは、一部機能をSSR化できないか等、検討してみるつもり）

Firebase is 神

まだFirebaseを使った開発を始めたばかりではあるけれど、ものによってはバックエンドの開発がほとんど必要ないという点はものすごく楽。単純なデータ取得・更新くらいであれば、（これまで必要だった）データ更新用のAPIを作って、バックエンド環境（herokuとか）にデプロイして、みたいなことを、FirebaseのAPIがすべてやってくれるので、フロントエンドの開発に集中できる（その分値チェック等の独自処理はすべてフロント側に寄せる必要が出てしまうけれど）。今回は使用しなかったものの、Cloud Functionsを使えば、サーバーサイド処理もある程度作りこむことができる。

休日の暇つぶしや趣味で、ちょこちょこっとモノづくりするためのプラットフォームとしては、かなり有用だと思う。便利な世の中になったものだ。

また気ままに出歩ける日が来るまで

何かと難しい情勢ですが、状況が好転し、また気ままな散策を楽しめる日がはやく訪れることを願い、今は引きこもりツール開発に勤しむ日々。

Source Code

ソースコードをGithubへ掲載

2020/04/18