はじめに
訪れた場所、使った金額、移動手段等を記録することで旅行の詳細を体系的にまとめることができる旅行の記録・共有サービス『TriSto』をリリースしました。
私は旅行に行った際、次の旅行の参考にしたり、思い出にふけったりするために、旅行の記録をスマホにメモしていたのですが、より詳細かつ体系的に記録をまとめたいという思いから、本サービスを開発いたしました。
私のようにとにかく事細かに旅行の記録を残したいという方や、他人の旅行記録を参考にしたいという方に、本サービスを活用して頂ければ幸いです。
サービス概要
旅行が好きな人に
旅行の記録を詳細に残せる場を提供する
旅行記録・共有サービス
アプリURL：https://www.tristo.work/
（現在サービス停止中です🙇♂️）
GitHubリポジトリ：https://github.com/Manabu-Ito9772/tristo
ターゲット
- 旅行の記録を詳細に残しておきたい方
- 他人の旅行記録を参照したい方
ユーザーが抱える課題
- 自分が行った旅行を詳細かつ分かりやすくまとめたい。
- 実際に旅行に行ってきた人の情報を、自分の旅行計画の参考にしたい。
望む未来
旅行の詳細情報を記録したり、他者の旅行記録を参考にしたりすることで、旅行好きの人がより良い旅行を実現し、さらに旅行を好きになってくれることを願っています。
旅行記録作成方法
1. ペンアイコンをクリック
2. 旅行の概要を入力して「詳細入力ページへ進む」をクリック
3. 詳細入力ページで日付ごとにブロックを追加
4. ブロックを追加できたら「投稿する」をクリック
5. 旅行記録が作成されタイムラインに投稿される
※タイムラインの旅行記録のタイトルをクリックすることで詳細を確認できる
使用技術
バックエンド
- Ruby 2.6.5
- Rails 6.1.3.1
- RSpec 3.10.1
主要なGem
- sorcery 0.16.0
- jwt 2.2.2
- active_model_serializers 0.10.12
- kaminari 1.2.1
- rails_admin 2.0.2
- rspec-rails 5.0.1
ER図
フロントエンド
- Vue 2.6.12
- axios 0.21.1
- vue-router 3.5.1
- vuex 3.6.2
- vuex-persistedstate 4.0.0-beta.3
- vue-mq 1.0.1
- mobile-device-detect 0.4.3
- vee-validate 3.4.5
- vue-select 3.11.2
- vue-dropdown-menu 0.1.4
- vuejs-datepicker 1.6.2
- vue2-timepicker 1.1.6
- moment 2.29.1
- vue-infinite-loading 2.4.5
- vue-loader 15.9.6
- vue-js-modal 2.0.0-rc.6
- v-scroll-lock 1.3.1
- vue-fontawesome 2.0.2
- bootstrap 4.5.3
インフラストラクチャー
- Nginx 1.12.1
- Unicorn 6.0.0
- AWS
- VPC
- EC2
- Amazon Linux 2
- RDS
- MySQL 5.7.26
- S3
- ALB
- Route53
- ACM
インフラ構成図
工夫したところ
直感的なUI/UX
説明書がなくても直感的に操作できるシンプルで分かりやすいUI/UXにすることを心がけました。
SPA
VueによるSPAを採用することで、さくさくとストレスなく操作できようにすることを心がけました。
レスポンシブデザイン
スマートフォンでは指の位置を考慮してメニューバーをフッターに表示するなど、媒体ごとの使いやすさの違いを意識したレスポンシブなデザインにするように心がけました。
苦労したところ
検索機能
検索項目に単一入力しかできない項目と複数入力できる項目があり、それらを同時に検索できるようにロジックを組むのが大変でした。
javascript
主にVueによる開発だったのですがあまりjavascriptの知識がなかったので、少し複雑な処理を実装する際に手間取りました。ただ、Rubyを学習済みであったためか、割とすんなり文法は理解できたので、開発の後半はjavascriptで詰まるということはほとんどありませんでした。
レイアウト
事前に作成した画面遷移図の通りにレイアウトを組み立ててもしっくりこないことが多く、納得のいくレイアウトができるまでだいぶ時間がかかりました。
学んだこと
ググり方
普通にググって知りたいことを知れなかったときに、別のフレーズでググったり、関連するフレーズでググったり、英語でググったりすることで答えにたどり着くことがあったので、「いかにググるか」が非常に重要であるということが分かりました。
とくに英語でググるというのが最も有効で、日本語ではヒットしないけど英語だとヒットするみたいなことが何回かありました。当たり前といえば当たり前ですが日本語より英語の情報の方が圧倒的に多いので、プログラミングに限らず英語でのググり方に慣れればかなり世界が広がると感じました。
ライブラリの活用
ある機能を自力で実装している最中に同じ機能を簡単に実装できるライブラリを発見し、一瞬で実装できたことがありました。事前に調べてから実装を始めなかったことを反省しています。
先人の知恵にあやかり、極力車輪の再発明をしないことを心がけようと思いました。
詰まったら一旦リフレッシュ
エラー解決などで詰まってしまったときに、一旦昼寝したり別のことをしたりしてから再度問題に取り組むことですぐに問題が解決することがありました。詰まってイライラしているときに無理に解決しようとせず、一旦リフレッシュして凝り固まった脳をほぐすということがわりと有効であるということが分かりました。
今後実装したいこと / 改善したいこと
- 今のところ手動でテスト・デプロイしているので、CapistranoやCircleCIを活用してCI/CDパイプラインを確立したいです。
- 可読性が低いコードや重複コードをリファクタリングしたいです。