🌐

【個人開発】海外旅行初心者さん向けのサポートアプリを作成しました✈️

2024/09/16に公開

はじめに

こんにちは!
プログラミングスクールRUNTEQでRuby on Railsを学習しているもちと申します。
この度、卒業制作として 「Travel Starter」 というアプリを本リリースしました!
海外旅行が不慣れな人に向けて必要な情報を一元管理し、必要な準備のサポートをするサービスです。
アプリを使うことで、海外旅行に行く際の不安を軽減し、旅行のハードルを下げることを目指しています。

読みづらい箇所もあるかと存じますが、ぜひご覧いただけると幸いです。

サービスはこちら

https://adventure-travel-starter.com/

GitHubリポジトリ

https://github.com/miki-ymmt/travel_app

Image from Gyazo

Travel Starter を開発した理由

私は航空会社に勤務しており、国内外のお客様と接するフロントラインで働いています。
飛行機を利用する人は様々なご事情があり、皆様の旅の始まりと終わりを見守ってきました。
日々の仕事や友人と話す中で以下のような状況になる方が多くいらっしゃるのではないかと感じていました。

  • 飛行機に不慣れなため空港で慌ててしまったり、飛行機に乗り遅れてしまいそうになる
  • 初めての海外旅行で飛行機移動が不安でゆっくり過ごせない
  • 海外旅行に行きたいけれど、そもそも何を準備したらいいか分からない

私は海外に行くことは、新しい文化や習慣に触れることができる素晴らしい経験だと考えています。
準備へのハードルが下がることで皆様の世界が広がるきっかけになれば嬉しいと思い、楽しく旅の準備ができるアプリを開発しようと考えました。

アプリの機能一覧

【認証】

  • ユーザー登録機能
  • ログイン機能(Sorcery, Googleログイン)
  • パスワードリセット機能
  • LINE認証(ログイン後アプリ内)
  • ログアウト機能

【メイン機能】

  • スケジュール作成機能

    • 行き先、出発日、帰国日の登録(登録日以降の日付から選択可能)
    • スケジュールの編集・削除
    • スケジュールの一覧表示
    • TO DOリストの自動作成
  • TO DOリスト機能

    • スケジュール作成時に選んだ国に応じたTo Doリストを表示
    • チェックボックスで完了したTo Doをチェックできる(非同期)
    • To Doリストの追加・削除(非同期)
  • パスポート写真登録機能

    • パスポート写真を任意でアップロードできる機能(非同期)
    • パスポート情報の削除機能
    • 画像拡大機能
  • フライトサポート機能(コラム)

    • 機内での過ごし方
    • 機内持ち込み制限品リスト
    • 空港到着から搭乗までの流れ
    • 時差ボケ対策
    • 機内食について
  • chatbot機能

    • AIによるチャットボット機能(非同期)
  • 旅先の天気・気温情報の表示機能

    • 旅先の天候情報を表示
  • LINE通知機能

    • 旅行の7日前、3日前、1日前にLINE通知を送る機能

【その他】

  • プロフィール編集機能
    • メールアドレス、名前の変更
    • アカウント削除機能
  • アプリの使用方法説明ページ(ログイン前・ログイン後共に閲覧可能)
  • Xへのシェア機能
  • お問い合わせフォーム

使い方イメージ

Image from Gyazo
Image from Gyazo

使用技術について

カテゴリー 使用技術
フロントエンド 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の選定理由は以下の記事に別途書きましたので、ご覧いただけると幸いです。

https://zenn.dev/mockey/articles/747f3abec389d5

工夫した点

①UI/UX

UI/UXを考える上で調査した結果、「ユーザーに考えさせないこと」が肝であると学びました。
私自身、初めて訪れるサイトでは注釈が全くなかったり、何がどこにあるのか分からないと使いづらさを感じていました。
そこでドロワーボトムナビゲーションを導入し、どのページにいても行きたいページにダイレクトに遷移できるようにしました。

以下はログイン後のホーム画面です。
最終的にこの画面に戻って来られるように、ホーム画面へのリンクを3つ設定しています。

  • 左上のロゴ
  • 左下のホームアイコン
  • ドロワー内

Image from Gyazo

アプリの使い方はログイン前、ログイン後関係なくいつでも確認できるようにしています。
Image from Gyazo



LINE通知を正しい日付で送れるよう、スケジュールの登録と編集時の日程を未来の日付のみ入力できるようにしています。

image.png

実装についてはこちらの記事に書いています↓
https://zenn.dev/mockey/articles/3130f325092f3c

②準備のハードルを下げる

今回のアプリの特徴です。
スケジュールを作成する際に「行き先」を選択すると、自動的に行き先に合ったTO DOリストが作成されます。
行き先を編集すると、自動的にリストが再生成されます。
これはスクールの同期とアイデア出しをしていた時に得たヒントから採用に至りました。

タスク管理アプリは自分で追加するものが主流です。しかし、そもそも初めて海外に行かれる方や不慣れな方が何をすればいいかが分からないことを踏まえると、自動で作成されることはユーザーのハードルを下げるために重要なポイントだと思いました。
調べるのが億劫な、入国に必要な手続きや通貨、変換プラグも国ごとに設定しています。

Image from Gyazo

③飛行機にまつわるtips

旅行のガイドブックを拝見すると、飛行機についての記載が少ないなと感じていました。
非日常な飛行機移動の不安を少しでも少なくして、楽しんでもらえる時間になればと思い、読み物として掲載しています。
image.png

今後の展望

  • 1 .テストコード
    開発中はテストコードがほとんど書けていないので、テストコードを追加します。

  • 2.Rubocopを使用してリファクタリング

  • 3.オフライン対応
    飛行機内でも使えるようにオフライン対応ができればいいなと考えています。

おわりに

まずはこのアプリを作成するにあたり、RUNTEQの講師の方やスクール生には数々の相談に乗って頂き本当にありがとうございました。
これからリリースを迎えますが、少しでも目に留めて頂き、誰かの役に立てるようなアプリに成長させていけたら嬉しく思います。
ここまでご覧いただきありがとうございました!!!

Discussion