はじめに
はじめまして、ゆうと(@bitter-or-sweet)と申します。
異業種からエンジニアに転職するため、プログラミングスクールで学習しています。
先日、お酒&おつまみの組合せを情報共有、AIで組合せ提案できるアプリをリリースしましたので、紹介させていただきます。
目次
1.自己紹介
2.アプリの紹介
3.技術構成
4.こだわった点
5.今後について
6.おわりに
1.自己紹介
工業高等専門学校卒業後、4年間電気設備工事の施工管理をしていました。
学生時代、専門科目としてC言語があり、初めてプログラミングを経験しましたが、基本についてしか学ばず、あまり実用性を感じることができませんでした。
就職後、業務改善を目的とした施工管理アプリ、社内システムなどに触れ、ITがどのように社会に貢献しているのかを実感しました。その後興味を持ち始め、利用者側ではなく開発者側として関わりたいと考え、転職を決意し、学習を始めました。
2.アプリの紹介
晩酌はどんなメニューにしようか悩むという方、よく合うお酒とおつまみの組合せを知りたい方、晩酌がマンネリ化している方に向けたお酒・おつまみの情報共有とAIで組合せ提案できるアプリです。
サービスURL（レスポンシブ対応済）
Githubリポジトリ
アプリ作成の理由、目的
以下２つの経験が理由となっています。
1.いつも同じお酒を飲んだり、似たようなメニューの繰り返しでマンネリ化してしまう
2.普段家や店でお酒を飲まないという友人や知人が多く、もっとお酒・おつまみの魅力を伝えたい
このような経験のある方に、お酒、おつまみの新しい発見、魅力を共有していただき、 ユーザー間で気軽にコミュニケーションをとったり、1人でツールのように活用することを目的としています。
機能
| トップ画面 | ログイン機能 |
|---|---|
 |
 |
| 使い方説明では、それぞれに該当ページまたはそれに近いページへのリンクを設置し、慣れてない方でも操作しやすいようにしました。 | なるべく多くのユーザーに登録いただけるように、Email、Google、LINEの3つのログイン方法を実装しました。 |
| 投稿一覧 | 投稿 |
|---|---|
 |
 |
| ユーザーが投稿したお酒&おつまみの投稿一覧です。タイトル・本文、お酒のジャンル、おつまみのジャンルで検索できます。 | お酒&おつまみの投稿フォームです。店名はオートコンプリートで候補から選択できるようにしました。 |
| 投稿詳細 | AI組合せ |
|---|---|
 |
 |
| 投稿一覧ページから投稿を選択すると、詳細情報を確認できます。投稿編集・削除、X・LINE共有、いいね、地図確認、コメントができます。 | お酒と3つの食材を選択すると、OpenAIが3つの食材を使った、お酒に合うおつまみを提案します。 |
| AI組合せの回答結果 | マイページ |
|---|---|
 |
 |
| お酒、おつまみの組合せ解説、使用材料、作り方が表示されます。X、LINEでの共有ができます。 | マイページから、過去の投稿一覧、いいねした投稿一覧、AI組合せ一覧、プロフィール設定にアクセスできます。 |
| 称号 | プロフィールページ |
|---|---|
 |
 |
| ジャンル毎に投稿数が3以上になると称号を獲得できます。称号の合計が2以上で銀、4以上で金の王冠が名前の横に表示されます。 | 投稿一覧のユーザー名を選択すると、他者のプロフィールページにアクセスできます。マイページとほぼ同様です。 |
3.技術構成
使用技術
| カテゴリ | 技術 |
|---|---|
| フロントエンド | TailwindCSS, daisyUI, JavaScript, Rails 7.0.8(Hotwire/Turbo) |
| バックエンド | Ruby 3.2.2, Rails 7.0.8 |
| データベース | PostgreSQL |
| 開発環境 | Docker |
| インフラ | Render |
| Web API | Open AI(GPT-4-turbo), Google Maps, Google Sign-In, LINE Login |
| その他 | Amazon S3 |
ER図
4.こだわった点
ユーザビリティ
導線
・トップページの使い方説明部分で、それぞれのページまたは近いページへ遷移できるボタンを追加
・説明を読み終わった後、新規登録、ログイン、投稿一覧へ遷移できるボタンを配置
・未ログイン状態で、ログインが必要なページに遷移しようとした場合、ログインページに遷移し、ログイン後、元々見たかったページへ遷移する
ログイン
・Emailでのログイン以外に、Google、LINEのログインを追加し、面倒な手間を少しでも減らすようにした
・ログイン継続の有無をログイン時に選択できるようにした
投稿一覧
・感覚的に詳細ページへ遷移できるように、投稿画像とタイトルにリンクを設置
投稿フォーム
・タイトル、感想などの抽象的な入力欄には、プレースフォルダで具体的に何を書くか説明を表示
・店名入力時、候補を表示して選択できるようにした（PlacesAPIを使用）
AI組合せ
・AI組合せ中の待機時間にモーダルでローディングを表示
投稿の対価
称号
・投稿に対して、いいねやコメントだけではユーザーに楽しんでもらえないのではと考え、ジャンル毎に投稿数に応じた称号を獲得できるようにした
・称号の説明欄を用意し、ジャンル毎それぞれの称号にお酒やおつまみに関連した説明を表示（称号は全部で25種類）
以下一例
お酒の称号
おつまみの称号
投稿数の多いユーザーにアイコン表示
・多くの称号を持つユーザーには、ユーザー名の横に王冠アイコンが表示されるようにした
以下一例
ユーザー名横の王冠アイコン
5.今後について
追加したいこと
1.複数画像アップロード
現状、1枚の画像しか投稿できないようになっており、お酒、おつまみを別々に撮影している場合に不便であるため、複数の画像アップロードができるようにしたいです。
2.コメント、いいねの通知機能
通知機能がないためコメントに気づかない、誰がいいねしてくれたか分からないという状況は、情報共有アプリとしては良い状態とはいえません。
通知によってユーザーにアプリを再利用してもらえる可能性も考えられるため追加したいと考えます。
改善したいこと
1.リファクタリング
ビューやコントローラ内で共通化できそうな部分がないかなど確認し、コードの可読性を上げたいと思います。開発中に、コード量が多く複雑に見える処理が意外とシンプルに書き換えられたこともあったので、まだまだ改善の余地がありそうです。
2.アプリ利用の対価
今回は投稿の対価として称号という形で実装しましたが、これは投稿数を評価するものです。例えば、現状の機能であれば、投稿の人気度（いいね数）を評価するなど異なる点で対価を用意することができれば、更なるユーザー獲得に繋がるのではないかと考えます。
6.おわりに
アプリ開発するにあたって、支えてくださった講師の方、有益な情報を共有していただいた先輩方や同期、リリース後にアプリを利用していただいた方々には感謝の気持ちでいっぱいです。
本当にありがとうございました！
これから就活も本格的に始まりますが、まだまだ技術力が足りないと感じるため、今後もアプリ改善と学習を継続していきたいと思います。