はじめに
はじめまして、kzkio(@kzkio_0114)と申します。
2023年10月からプログラミングスクール「RUNTEQ」に入学し、Ruby on Railsを中心に学習しています。今回は、循環型相談アプリ「めぐる宝石花」をリリースしましたので、その紹介と技術的な工夫についてまとめます。
今回はQiitaで初めての記事投稿となります。至らない点もあるかもしれませんが、ぜひ温かく見守っていただけると嬉しいです。
アプリ紹介
サービスURL
GitHub URL
サービス概要
このアプリは、相談する側と相談される側の役割を交互に繰り返すことで、相談が循環する仕組みを持った相談アプリです。ユーザー同士が相談を通じて感謝の気持ちを共有し、贈り物を通じてつながりを深め、相談をより積極的に行える環境を提供します。
開発背景
1. 自分自身の悩みを解決するため
私はプログラミングスクールで、病気や様々な悩みをオープンにし、深い話から軽い話まで多くの人々と相談し合える環境を作ってきました。当初は相談を受ける側でしたが、次第に自分が相談する側になることが増え、相談することへの罪悪感や、相手に負担をかけているのではないかという思いが強くなってきました。
このアプリは、自分自身が感じていた相談に対する罪悪感や負担感を解消し、相談する側とされる側が感謝を分かち合いながら、より健全に成長できる場を作ることを目的としています。相談を通じて得られる安心感や喜びを共有し、ポジティブなサイクルを生み出すことを目指しています。
2. 他のアプリとの差別化をするため
多くの相談アプリでは、相談することが中心になりがちですが、このアプリでは相談するだけでなく、アドバイスを提供する側にも回れるという点が特徴です。
さらに、ユーザーが自分に合った返信スタイルを「肯定」「普通」「否定」から選べるため、受けたい意見を選びながら安心して相談できます。また、センシティブな相談は匿名で1対1のチャットを通じて行えるため、プライバシーも確保されています。
これにより、相談者とアドバイザーが互いに感謝を伝え合い、ポジティブな体験を積み重ねる仕組みを提供しています。
メイン機能
相談投稿機能
- ユーザーは悩みを投稿し、他のユーザーからアドバイスを受けることができます。匿名での相談や、カテゴリ別の投稿も可能です。
返信トーン選択機能
- ユーザーは、肯定、普通、否定のトーンから選んで返信を受け取り、意見をフィルタリングして自分の希望に合った意見だけを得ることができます。
最新通知機能
- ユーザーは最新のメッセージや贈り物を最大5件を確認できます。通知をクリックすると、詳細を拡大表示できます。
感謝の贈り物機能
- 相談に感謝の気持ちを込めて、ユーザー同士で花や宝石を贈り合います。贈られたアイテムはユーザーのプロフィールに反映され、貢献度を示すものとして表示されます。
リアルタイムチャット機能
- プライベートチャット: 名前を伏せた専用IDを使用して、1対1の暗号化された安全なチャットを行うことができます。
- グループチャット: 招待制や自由に参加できるメンバーで、リアルタイムのグループチャットが可能です。
その他機能
-
ソーシャルログイン: Google、GitHub、Discordでの認証が可能です。
-
検索機能: 相談内容やユーザー名、キーワードでの検索が可能です。
-
ユーザー表示: 登録ユーザーの一覧表示が可能です。
-
管理画面: 管理者用の画面でユーザーや贈り物を管理できます。
-
X（旧Twitter）投稿機能: 相談内容や進捗をXにシェアする機能を実装。自動でリンクやハッシュタグが付与されます。
工夫点
- 匿名投稿の安心感: 匿名投稿時、自分が投稿した内容を把握しやすい仕組みを導入しています。
- 直感的なUX: CSSアニメーションを活用し、ボタンのホバー時やページの切り替え時に滑らかな動きを実現。ユーザーが直感的に操作できるよう工夫しています。
- リアルタイムチャット: プライベートチャットとグループチャットの両方でリアルタイム通信を実現し、スムーズなやり取りが可能です。
- 贈り物のシステム: 花言葉や宝石の意味を贈り物に反映し、感謝や励ましの気持ちをシェアできる仕組みを提供しています。
- レスポンシブ対応: スマートフォン向けに最適化されたデザインで、チャットや投稿機能が使いやすい設計をしています。
- 通知機能の向上: 非同期でメッセージや贈り物の通知を確認でき、即座に詳細を確認できます。
- 高速検索: Elasticsearchを使用した高速な検索機能を実装。匿名投稿でも「ユーザー名: 匿名」として表示され、プライバシーを保護しつつ検索結果にアクセスできます。
- ページ遷移の効率化: Turbo Streamsを利用して、ダッシュボード内の操作のほとんどをページ遷移なしで完了できるように設計しています。
- 日本語ドメインの取得: 日本語のドメインを取得し、ユーザーに親しみやすいURLを実現しました。
画面遷移図
ER図作成
反省点
・機能拡張に伴う問題
アプリの機能を拡張する際、いくつかの機能間で十分な連携が取れていない部分がありました。特に、リアルタイムチャット機能と通知機能の連携が不十分で、ユーザー体験に一貫性を持たせるべきだったと反省しています。
・コードの整理が不十分
パーシャルを多用した結果、コードが分散し、冗長になってしまいました。特にビュー関連のコードは再利用しづらく、最初から保守性を意識してモジュール化するべきでした。この点は今後のプロジェクトで改善したいと思います。
・テストコードの実装不足
リアルタイム通信やAPIエンドポイントに対するテストを十分に実装しなかったことが、後から問題を引き起こしました。今後は、開発段階からテストコードをしっかりと組み込むことを意識し、アプリの信頼性を高めたいです。
・レスポンシブ対応の不備
スマートフォン対応が一部の画面に限られており、特にチャット画面や通知画面で操作性に課題がありました。全画面で一貫したレスポンシブデザインを導入できなかった点については、早めに対応するべきだったと反省しています。
今後の展望
- テストコードの実装: RSpecとrbocopを主体に、ユニットテストや統合テストの充実を図り、コードの品質と安定性を向上させ、予期しないバグを早期に発見できる体制を整えていきたいです。
- リアルタイム通知の改善: 現在はTurboを使ってボタンに通知データを送る仕組みですが、今後はAction Cableを活用して、非同期のリアルタイム通知を実装し、ユーザーがアクションを起こさなくても新しいメッセージや贈り物を即座に受け取れるようにしていきたいです。
- 動的OGPの導入: 投稿内容に基づいてOGP（Open Graph Protocol）を動的に生成し、SNSでシェアされた際に適切な内容が表示されるようにしていきたいです。これにより、シェア機能を通じてアプリのトラフィック増加を期待しています。
- 外部通知機能の実装: メールやプッシュ通知を使用した外部通知機能を追加し、ユーザーがアプリ外でもリアルタイムで重要な通知を受け取れるようにしていきたいです。
- ChatGPT APIの導入: ChatGPT APIを活用し、相談内容のフィルタリングや内容分析機能を強化し、質の高い相談内容を提供するとともに、スパム対策や自動応答機能を実現していきたいです。
技術スタック
| カテゴリー | 使用技術 |
|---|---|
| サーバーサイド | Ruby 3.3.1, Ruby on Rails 7.1.3 |
| データベース | PostgreSQL (Heroku Postgres Mini, ローカル: Docker) |
| 認証 | Devise, OmniAuth (Google, Discord, GitHub,) |
| 描画関係 | SCSS (アニメーション), bulma, Stimulus |
| リアルタイム通信 | Action Cable (Heroku Data for Redis Mini) |
| 検索機能 | Elasticsearch, searchkick (ローカル: Docker, 本番: Bonsai Elasticsearch Sandbox) |
| スケジューリング | Heroku Scheduler Standard |
| Webサーバー | Puma |
| デプロイ | Heroku |
| 開発環境 | Docker, bun |
| モダンJSフレームワーク | Hotwire (Turbo Rails, Stimulus) |
| その他のツール | Redis |
終わりに
今回のアプリ開発において、相談に乗ってくださった皆様、応援してくださった皆様、そしてアプリを試してフィードバックをくださった方々には、心から感謝しています。皆さんの支えがあったおかげで、このアプリを形にすることができました。
まだまだ改善点は多いですが、これからも学び続け、アプリをより良いものに成長させていきたいと考えています。また、今後は他の生活や問題解決に役立つアプリの開発にも挑戦していく予定です。
最後までお読みいただき、長文となってしまいましたが、最後までお付き合いいただきありがとうございました！今後ともよろしくお願いいたします。