はじめに
初めまして！
私はプログラミングスクールRUNTEQでRuby on Railsを学習しているもちと申します。
この度、卒業制作として 「Travel Starter」 というアプリを本リリースしました！
海外旅行が不慣れな人に向けて必要な情報を一元管理し、必要な準備のサポートをするサービスです。
アプリを使うことで、海外旅行に行く際の不安を軽減し、旅行のハードルを下げることを目指しています。
実は今回が初めてのQiita投稿です。卒業制作の記事はこちらで書きたいという入学時からの目標がありました。
読みづらい箇所もあるかと存じますが、ぜひご覧いただけると幸いです。
サービスはこちら
GitHubリポジトリ
Travel Starter を開発した理由
私は航空会社に勤務しており、国内外のお客様と接するフロントラインで働いています。
飛行機を利用する人は様々なご事情があり、皆様の旅の始まりと終わりを見守ってきました。
日々の仕事や友人と話す中で以下のような状況になる方が多くいらっしゃるのではないかと感じていました。
- 飛行機に不慣れなため空港で慌ててしまったり、飛行機に乗り遅れてしまいそうになる
- 初めての海外旅行で飛行機移動が不安でゆっくり過ごせない
- 海外旅行に行きたいけれど、そもそも何を準備したらいいか分からない
私は海外に行くことは、新しい文化や習慣に触れることができる素晴らしい経験だと考えています。
準備へのハードルが下がることで皆様の世界が広がるきっかけになれば嬉しいと思い、楽しく旅の準備ができるアプリを開発しようと考えました。
アプリの機能一覧
【認証】
- ユーザー登録機能
- ログイン機能(Sorcery, Googleログイン)
- パスワードリセット機能
- LINE認証(ログイン後アプリ内)
- ログアウト機能
【メイン機能】
-
スケジュール作成機能
- 行き先、出発日、帰国日の登録（登録日以降の日付から選択可能）
- スケジュールの編集・削除
- スケジュールの一覧表示
- TO DOリストの自動作成
-
TO DOリスト機能
- スケジュール作成時に選んだ国に応じたTo Doリストを表示
- チェックボックスで完了したTo Doをチェックできる(非同期)
- To Doリストの追加・削除（非同期）
-
パスポート写真登録機能
- パスポート写真を任意でアップロードできる機能（非同期）
- パスポート情報の削除機能
- 画像拡大機能
-
フライトサポート機能（コラム）
- 機内での過ごし方
- 機内持ち込み制限品リスト
- 空港到着から搭乗までの流れ
- 時差ボケ対策
- 機内食について
-
chatbot機能
- AIによるチャットボット機能(非同期)
-
旅先の天気・気温情報の表示機能
- 旅先の天候情報を表示
-
LINE通知機能
- 旅行の7日前、3日前、1日前にLINE通知を送る機能
【その他】
- プロフィール編集機能
- メールアドレス、名前の変更
- アカウント削除機能
- アプリの使用方法説明ページ（ログイン前・ログイン後共に閲覧可能）
- Xへのシェア機能
- お問い合わせフォーム
使い方イメージ
| スケジュール作成機能 | TO DOリスト |
|---|---|
 |
 |
| 行き先、出発日、帰国日を登録できます。 | 旅先に応じたTO DOリストを確認できます。チェックボックスは画面遷移をしても内容が保持されます。 |
| パスポート写真登録機能 | フライトサポート機能 |
|---|---|
 |
 |
| パスポートの写真を登録・削除・拡大できます。 | フライトに向けて知っておくと便利な情報が確認できます。 |
| chatbot機能 | 天気・気温情報表示機能 |
|---|---|
 |
 |
| AIに旅について気になることを気軽に聞けます。 | ボタンをクリックすると直近の旅先の天気と気温が表示されます。定期的に新しい情報に更新されます。 |
| プロフィール編集 | LINE通知機能 |
|---|---|
 |
 |
| メールアドレス、名前を変更できます。 | 旅詳細画面からLINEと連携すると、旅の7日前、3日前、1日前の朝9時にメッセージが届きます。 |
使用技術について
| カテゴリー | 使用技術 |
|---|---|
| フロントエンド | Rails 7.1.3.4（Hotwire/Turbo/Stimulus）, JavaScript, TailwindCSS, DaisyUI |
| バックエンド | Rails 7.1.3.4 (Ruby 3.2.2 ) |
| インフラ | Render.com, AWS S3 |
| データベース | PostgreSQL |
| 認証 | Sorcery, Googleログイン, LINE認証 |
| 開発環境 | Docker |
| API | OpenAI API, LINE Messaging API, OpenWeather API |
使用した技術やgemの選定理由は以下の記事に別途書きましたので、ご覧いただけると幸いです。
工夫した点
①UI/UX
UI/UXを考える上で調査した結果、「ユーザーに考えさせないこと」が肝であると学びました。
私自身、初めて訪れるサイトでは注釈が全くなかったり、何がどこにあるのか分からないと使いづらさを感じていました。
そこでドロワーとボトムナビゲーションを導入し、どのページにいても行きたいページにダイレクトに遷移できるようにしました。
以下はログイン後のホーム画面です。
最終的にこの画面に戻って来られるように、ホーム画面へのリンクを３つ設定しています。
- 左上のロゴ
- 左下のホームアイコン
- ドロワー内
アプリの使い方はログイン前、ログイン後関係なくいつでも確認できるようにしています。
LINE通知を正しい日付で送れるよう、スケジュールの登録と編集時の日程を未来の日付のみ入力できるようにしています。
実装についてはこちらの記事に書いています↓
https://zenn.dev/mockey/articles/3130f325092f3c
②準備のハードルを下げる
今回のアプリの特徴です。
スケジュールを作成する際に「行き先」を選択すると、自動的に行き先に合ったTO DOリストが作成されます。
行き先を編集すると、自動的にリストが再生成されます。
これはスクールの同期とアイデア出しをしていた時に得たヒントから採用に至りました。
タスク管理アプリは自分で追加するものが主流です。しかし、そもそも初めて海外に行かれる方や不慣れな方が何をすればいいかが分からないことを踏まえると、自動で作成されることはユーザーのハードルを下げるために重要なポイントだと思いました。
調べるのが億劫な、入国に必要な手続きや通貨、変換プラグも国ごとに設定しています。
③飛行機にまつわるtips
旅行のガイドブックを拝見すると、飛行機についての記載が少ないなと感じていました。
非日常な飛行機移動の不安を少しでも少なくして、楽しんでもらえる時間になればと思い、読み物として掲載しています。
今後の展望
- 1 .テストコード
開発中はテストコードがほとんど書けていないので、テストコードを追加します。
- 2.Rubocopを使用してリファクタリング
- 3.オフライン対応
飛行機内でも使えるようにオフライン対応ができればいいなと考えています。
おわりに
まずはこのアプリを作成するにあたり、RUNTEQの講師の方やスクール生には数々の相談に乗って頂き本当にありがとうございました。
これからリリースを迎えますが、少しでも目に留めて頂き、誰かの役に立てるようなアプリに成長させていけたら嬉しく思います。
ここまでご覧いただきありがとうございました！！！