投稿型マッピングアプリ

依頼人から、地域の環境データを記録し、今後の環境保護活動に活用したいという相談を受けました。具体的には、現場で撮影した画像を地図上に掲載し、一般ユーザーが閲覧できる仕組みや、管理者が投稿内容を確認・選別できる管理画面が求められていました。 既存のマップアプリでは、画像投稿を地図上で扱う機能や、複数ユーザーの投稿を管理者が確認して公開判断するフローが十分ではなかったため、本アプリでは画像投稿から地図表示、管理者による確認・公開管理までを一連の流れとして設計しました。

1. 01

   画像と位置情報の紐付け

   現場で撮影した画像を、地図上の地点と自然に結びつけて共有したい。

2. 02

   承認フローの一元化

   投稿後の確認、承認、公開判断までを別ツールに分散させず一画面で扱いたい。

3. 03

   環境データの可視化・利用

   蓄積された環境データをユーザー側ではアプリの地図上で閲覧可能にしたい。 管理者はデーターベースのように投稿を閲覧し、そのデータを活用したい。

1. 01

   撮影時の位置情報の取得

   投稿画像そのものからExif情報を用いて位置情報を取得することは、Webアプリ上では難しいため、アプリ起動時に現在地を取得開始し、撮影時に位置情報を確定するフローを実装して対応しました。

2. 02

   Supabase を軸にした構成

   認証、データ保存、画像保管を同一基盤でまとめ、運用負荷を抑えています。

3. 03

   地図 UI の軽量化

   Maplibre を採用し、投稿件数が増えてもクラスターとしてピンをまとめる・ばらける動作を自動化し、閲覧体験の向上を意識しました。

4. 04

   画像のキャッシュ最適化

   デプロイにはVercelを採用し、Imageコンポーネントの利用によるキャッシュの最適化を行いました。 また、管理画面の画像はVercelキャッシュではなく、Supabaseキャッシュを用いることによる負荷分散をしました。

• 管理画面からの投稿確認フロー整備
• AI による環境データ解説
• データCSV書き出しアプリUI