OVERVIEW
概要
TravelPlanner は、旅行の行き先や予定を地図上で整理しながら確認できるWebアプリです。 スポットの登録や計画の保存に加えて、公開リンクを使った共有や、 条件付きでの共同編集にも対応しています。
BACKGROUND
作ろうと思った背景
旅行計画を立てるとき、地図・メモ・時系列の予定がバラバラになりやすく、 「どこに行くのか」「どの順番で回るのか」をまとめて見たいと感じたことがきっかけでした。
また、自分だけでなく他の人にも見せたり、一緒に調整したりできる形にしたいと考え、 共有や共同編集の仕組みも取り入れました。
PROBLEM
解決したい課題
旅行情報が分散しやすい
行き先、地図、予定、メモが別々になりやすく、全体を把握しづらいという課題がありました。
共有しにくい
旅行の計画を他の人に見せたいときに、地図・予定・補足情報をまとめて共有できる形が欲しいと感じました。
共同編集したい場面がある
複数人で予定を立てるとき、相手にも編集してもらえる仕組みがあると便利だと考えました。
SOLUTION
主な機能
地図上で旅行先を可視化
Leaflet を使って旅行先を地図上に表示し、位置関係を確認しながら計画を整理できるようにしました。
旅行プランの保存
Firestore に旅行プランを保存し、ログインユーザーごとに継続して編集できる構成にしています。
公開リンクで共有
共有用IDを使って、公開可能な旅行プランを他の人にも見せられるようにしています。
共同編集対応
指定したメールアドレスのユーザーが編集できる仕組みを入れ、複数人での利用も想定しました。
FLOW
データの流れ
- ユーザーがログイン
- 旅行プランを作成・編集
- Firestore に保存
- 必要に応じて shareId 付きで公開
- 他ユーザーが閲覧、または共同編集
TECHNICAL POINTS
技術的なポイント
Firebase Authentication
Googleログインやメール認証を扱える構成にして、ユーザーごとのプラン管理ができるようにしました。
Firestore でプランを管理
旅行プランを `travelPlans` として保存し、所有者や編集者の情報も含めて扱っています。
公開用 shareId の発行
公開リンク用のIDを作ることで、ログインなしでも閲覧できる共有導線を用意しました。
地図ライブラリの利用
React から Leaflet を使う構成で、位置情報をベースにした画面を作っています。
POINT
工夫した点
個人利用だけで終わらせない設計
ただ自分で使うだけでなく、共有や共同編集まで見据えて設計したことで、 サービスとしての使い方を意識できました。
「地図で見る」体験を中心にしたUI
テキストだけの予定表ではなく、位置関係を視覚的に把握しやすいことを重視しました。
Firebase を使った継続利用
保存・認証・共有までまとめて扱うことで、単発の画面ではなく継続利用しやすい形を目指しました。
LEARNING
この制作で得たこと
React での画面構成だけでなく、Firebase を用いた認証・保存・共有まで含めて、 Webアプリとして必要な流れを一通り形にする経験ができました。 また、単機能のツールではなく「他の人と使うこと」を意識した設計の大切さを学びました。