概要
旅行プランを作成、共有、共同編集できるwebサイトをリリースしました
僕は旅行が好きで、長期休暇の時は家族で旅行に行っています。
旅行計画を立てるときはPCのエディタを使ったり表ソフトを使ったりして、メールやLINEで共有していました。
毎回ソフトを起動して作成、保存してファイルやテキストなどを送付する・・・というのは面倒でもう少し効率よくできないかと考えこのサイトを作りました
技術
-
サーバサイド
- Rails
-
フロントエンド
- React
- react material ui
-
マップ表示
- mapbox API
-
ホスティング
- Heroku
-
ssl
- cloud flare
簡単すぎる構成図
こんな感じで運用しています
各ページでできること
トップページ
- プラン作成ボタン
- 新しいプランを作成、プラン編集ページへ遷移
- プランリスト
- 作成したプランリストを表示
プラン編集ページ
- 日程追加ボタン
- 旅行日程を追加する。出発日から順に追加していく
- マップ表示
- マップを表示。スポットをクリックすることで対象のタイムラインの最後にスポット追加できる
- 日程のタイムライン
- 出発時間、タスクを管理する
- タスク
- タイトル、所要時間、費用、メモの編集ができる
重視したところ
僕は基本的に怠けたい人なので、プラン作成でいかに手間を減らせられるかを考えました
ログイン機能無し
会員登録？
出典：ジョジョの奇妙な冒険 33巻
調整さん好きですか！？僕は調整さんをよく使っています。
あのサイトはログイン無しで手軽に日程調整でき、共有しやすいところがすごい所だと思っています。調整さんを真似オマージュしてログイン無しで使えるようにしました。
また、アカウント登録は最初にサイトを使うか否か判断基準の一因になると考えているのでそういったハードルはなるべく取り払いたいというのもありました
登録ボタン無し
つまり「我々は登録ボタンを押さずにプランを保存できる・・・」
出典：ジョジョの奇妙な冒険 25巻
このサイトには編集系サイトにつきものの登録ボタン、submitするボタンはありません。日程追加やタスクの追加、編集作業をするたびにバックグラウンドで自動データ登録、更新するようになっています。
登録ボタンを押す1アクション省ける、また、保存前の不慮の事故で編集内容が無くなることを抑止できるのでこの機能をつけました。
共同編集
ほ、他の人の編集内容を上書きしてしまいますよォォ
出典：ジョジョの奇妙な冒険 27巻
プラン編集ページのURLを知っている人は誰でも同時に編集が可能です。複数ユーザが同時に編集していたとしてもそれぞれの更新状況はリアルタイムに反映していくので、「削除されたタスクを編集していた」「プランを再読み込みしたら実は全て上書きされていた」などということを抑止します。
こんな感じ。画質よくないですが・・
機能実現にはRailsのActioncableを使っています。
まとめ
最小限でリリースを！と最初は思っていたものの実装していくうちに
「合計金額を表示したい」
「このアクションではメッセージを入れたい」
など頭の中のエンドユーザー
が囁き続け、気がつけば予定リリース時期より月日が経っていました。個人開発は自由勝手にできるとはいえ要件定義から実装まで計画的にしっかりやるべきだったなと反省しています。
今後の追加機能では、時間や費用に固定数値ボタン(+1時間とか+1000円とか)を入れたり、閲覧履歴機能を入れたいと思っています。
もし旅行に行く機会があったらご活用ください。