【個人開発】webアプリを作成しました【Rails,Javascript,MySQL,GitHub Actions,AWS EC2】

アプケーション名

Quick Clean Restroom Map

アプリケーション概要

最寄りの綺麗なトイレの位置をリアルタイムで案内し、トイレの情報を提供します。

URL

備考

EC2インタンスは通常時停止です。

アプリケーションを作成した背景

外出先で最寄りの綺麗なトイレを探すのが困難なことがあります。Google Mapsでは公共のトイレは多く表示されますが、綺麗なトイレをすぐに見つけることは難しいです。同様の問題を抱えている方が多いと思い、ユーザー同士で綺麗なトイレの情報を共有できるアプリケーションを開発することにしました。

アプリの画像

利用方法①　最寄りのトイレを探す

• 最寄りのトイレを探す: アプリケーションのホーム画面中央にある「最寄りのトイレを探す」ボタンをクリックします。GPSがオンになっていると、現在地の周辺にある最寄りのトイレがマップ上に表示されます。
• トイレ情報の確認: マップ上に表示されたトイレのアイコンをクリックすると、そのトイレの詳細情報がポップアップで表示されます。情報にはトイレの清潔さ、利用可能な設備などが含まれます。
• ルート検索: トイレの詳細情報ウィンドウにある「ルート検索」ボタンをクリックします。すると、そのトイレまでの推定徒歩時間とルート案内へのリンクが表示されます。
• ルート案内の利用: 表示されたリンクをクリックすると、Google MapsまたはGoogle Mapsアプリが起動し、選択したトイレまでの詳細なルートが案内されます。これにより、スムーズに目的地までの道のりをたどることができます。
  

利用方法②　トイレを登録する

• PCではマップ上で右クリック、スマホ・タブレット上では長押し、「ここを登録する」リンクをクリック
• 名称、住所、コメント、設備情報、画像があれば「画像投稿」ボタンをクリックして画像を選択し、「登録する」をクリック
  

利用方法③　トイレのレビューをする

*　トイレのアイコンをクリックして、「評価する」ボタンをクリック
*　５段階で評価、コメントを一言記入して「評価する」ボタンをクリック

開発環境

• フロントエンド:HTML CSS Javascript
• バックエンド:Rails 7.0.0
• インフラ:EC2 S3 SES
• API:Google Maps API Directions API

その他

• GitHub Actions(自動テスト・デプロイ)
• draw.io(ER図)
• Figma(画面遷移図)

選定理由

• Rails
  「設定より規約」の原則を採用し、標準的なウェブアプリケーションの迅速な開発が可能です。豊富なライブラリやドキュメントが利用可能で、個人開発の障壁を低くし、充実したサポートを提供しています。

• EC2とS3
  スケーラビリティと信頼性が魅力です。ユーザー数が少ない段階では、EC2インスタンスを小さく始めて、需要に応じて容易にスケールアップできる柔軟性が重要です。

• GitHub Actions
  GitHubリポジトリに統合されており、シンプルながらも効果的なCI/CDプロセスを実現できます。GitHub Actionsだけで、コードの自動テストやデプロイメントなど、基本的なCI/CDのニーズを十分に満たせます。

データベース設計

画面遷移図

機能要件

• マップ表示機能: ユーザーが現在地周辺（GPSで位置情報を取得）の綺麗なトイレをマップ上で確認
• 施設個別情報表示機能: 各トイレの詳細情報を表示
• ルート案内機能：最寄りのトイレまでの徒歩時間を表示
• ルート案内詳細機能：GoogleMapやGoogleMapアプリを活用して詳細な道案内を表示
• 検索機能：地名を入力して綺麗なトイレをマップ上で確認
• 施設情報登録機能: ユーザーが新たなトイレの情報をマップ上で登録
• 施設個別情報編集機能: 登録されたトイレの情報を更新・編集
• レビュー一覧表示機能: トイレごとのユーザーレビューを一覧表示
• レビュー投稿機能: トイレに対するレビュー投稿と星評価
• ユーザー新規登録・ログイン機能
• ユーザー情報編集機能
• ユーザーマイページ機能: ユーザー専用ページで、自分の投稿を確認
• レスポンシブ対応: スマートフォンやタブレットなど、様々なデバイスでの利用に対応
• ページネーション機能: 情報の量が多い場合にページ分けをして表示
• 独自ドメイン、HTTPS化: セキュリティと信頼性の向上

工夫したポイント

• トイレアプリアイコン：トイレアプリであることを一目で理解してもらえるように、視覚的に分かりやすいアイコンを作成しました。
• 現在地表示：ユーザーが現在位置を即座に識別できるように、現在地アイコンに動的なアニメーションを追加しました。
• 位置情報に基づくトイレ案内: GPSを使用してユーザーの現在位置を取得し、その情報を基に現在地周辺の清潔なトイレを案内します。
• リアルタイムマップ更新: 取得した位置情報を用いて、最寄りの清潔なトイレをマップ上に動的に表示します。
• 動的情報表示: マップ上のアイコンやリスト項目をクリックした際に、トイレの詳細情報表示画面を表示します。
• インタラクティブなレビュー機能: トイレのレビュー投稿で星評価を実装し、ユーザーが直感的に操作できるようにします。
• レスポンシブデザイン: 様々なデバイスや画面サイズに対応するデザインを実装し、どのデバイスからでもアクセスしやすいUIを提供します。
• 施設の個別ページのURLをIDではなくハッシュ化、ユーザーマイページのURLをIDではなくユーザー名に変更しました

ユーザーレビュー後の改善報告

• 検索機能の作成（４月１３日）
  　ユーザーからのフィードバックにより、最寄りの場所以外でも利用できる綺麗なトイレを見つけられるように、サイトのヘッダー部分に新しい検索機能を実装しました。この機能により、ユーザーはより柔軟にトイレを検索することが可能になりました。
  

参考にしたもの

大変だったこと

機能実装： 初めて遭遇する技術的問題に対する解決策の模索に時間がかかり、想定以上の労力が必要でした。

デザインとユーザビリティ： 直感的で使いやすいインターフェースの設計には、ユーザーテストと反復的な改善が求められ、細部にわたる注意が必要でした。

テストとデバッグ： 予期せぬバグの発見と修正過程は複雑であり、アプリの安定性を確保するために多くの時間を割くことになりました。