どうも！新卒エンジニアとしての初めての一年の終わりを迎えつつある@hansprocsです！ 一年前と比べるといろいろできるようになったことが増えて次の一年が楽しみですね~
さて、インゲージには様々な部活があり、その中の一つが日本酒会です。 部活といって特別なことをしているわけではなく、ただただ有志で集まっていい日本酒と食べ物を食べる会です。
今回はこの日本酒会のためのアプリを作りましたので、ご紹介したいと思います！
背景
飲んで食べるだけなのにアプリって必要なん？
皆さんは好きな日本酒がありますか？ 私は日本酒は好きですが、特定の日本酒が好きなわけではありません。 そのため、お店で日本酒を注文するときはいつも「なんかいろいろあるけど、何が自分に合うか全然わからん」状態になります。
日本酒会ではどなたかがいい日本酒を選別して持ってくださったりしているので、こだわりのない私にはとてもいい機会になります。
しかし、問題があります。 いい日本酒を飲んだ故に、いっぱい飲んでしまい翌日になると何が良かったか全然思い出せないんです。
私たち開発者は問題を解決するもの。問題があったら解決するしかありません（暴論）
どんなもの作ったん？
飲んだもの記録アプリ
日本酒会で飲みながら気軽く飲んだものを記録できるようにしよう。
それが、今回の目標となりました。その場で記録ができれば翌日忘れることもないはず
プラスで、今回は飲んだ人同士でお互いどんな評価をしたかを見られるようにしてコミュニケーションを促進してみようという目的もありました。
モバイルアプリ
酔っている人がパソコンを開いて入力する場面はおそらくないため、環境はモバイルで決めました。 また、アプリにすると開発コストや学習コストがかかるため自分の得意分野であるWebアプリにしたいと思いました。
出来上がったもの
ホーム画面
おすすめを一番上に配置し、入ってきた人に「今日はこんな日本酒でどう？」とサジェストをすることにしました。
その後、次回の日本酒やメニューを表示し、その下にはXのようなタイムラインを実装しました。
タイムラインにはイベントで飲んだ日本酒に対する評価が並びます。
いいねやコメントもつけられます。
これでアプリに入ってきた人は気軽く他の人の評価を見たり、コミュニケーションをとることができるようになります。
イベント
このアプリは「日本酒会」というイベントによって成り立ちます。
その大事な軸となるイベントを作る画面を作りました。
イベント名、開催日、場所、説明を入れられるようにしています。 こうやってイベントを作るとホーム画面に次のイベントとして表示できるようになり、このイベントに対して飲んだ日本酒も追加できるようになります。
後々、場所はGoogle Mapと連携できるようにしてみたいですね！
日本酒
このアプリのもう一つの大事な軸は当然日本酒になります！
まずは、簡単に日本酒の検索ができるようなリストを作りました。
リストに初期データとして何もないのは勿体無いと考えたため、以下サービスから日本酒データを取得しました。 ありがたいことに、無料で商用でも使えるとのことでした！
日本酒への味の評価もDBから取得できていたため、その評価の項目に沿ってこのアプリでも評価できるようにしてみたいと思いました。 その結果出来上がった日本酒評価画面が以下のようなものです。
下のスライドバーを動かすことで、上の6角形のグラフに反映されるUIにしてみました。 なんか分析できている感じがあって、かっこいいUIになったと思います。
その他
他にも何箇所かこだわったところを紹介します。
バイアスを避ける
他の人が評価しているものが先に見れてしまうと、実はそう思っていなかったのにその人の評価につられることがよくあると思います。
そのようなバイアスを避けるため、自分がまだ評価していない評価は先に見られないようにしました。
他の人の評価が見たくて自分も早く評価しよう！と利用を促進する効果もあるかもしれませんね
ユーザーごとの評価が追える
アプリの中のユーザーのアイコンをクリックすることで、その人がどんな日本酒を評価していたかを簡単に見られるようにしました。
こうすることで、「この人の評価を見た感じ、私と似たような日本酒が好きそうだけど、他どんなものを飲んでたんだろう」と思った時に、すぐその人が飲んだ日本酒を追跡できるようになります。
使った技術
今回の実装にあたっては、フロントエンドはVue3, バックエンドはSupabaseを使いました。
フロントエンド
Vueは普段業務で使っているため、このように早くアイデアを実現したい時には抜群でした。 学習に注ぐ時間がなくなるので早く開発に取り掛かることができました。
create-vueライブラリを使うと、細かな基本設定もほぼ要らなくなるため、素早いアイデア実現にとても便利だと思いました。
バックエンド
SupabaseはFirebaseのようなサービスで、GUIの操作だけでPostgreSQL基盤のバックエンド開発ができるようにしてくれるサービスです。 無料枠でデプロイまでされているため、インフラを気にする必要もありませんでした。
元となるものは全部SQLで書いて、細かいことはGUIでポチッと操作することで開発することができました。
インフラ
クライアントのデプロイとしてはVercelを使いました。 Supabaseとの相性もとてもよく無料枠でサクッとできるのでいつもサイドプロジェクトを作る時に使っています。
おわりに
普段業務ではスクラムでチーム開発を気にしながら開発をしていますが、たまにはこうやって1人で「意識の流れ開発」をすることも楽しいなと思いました！ まだまだ仕様上不便なところも多いですが、これからの日本酒会のためにももっと皆さんに使っていただきたいですね~~
このように、インゲージでは様々な部活があり社員がワイワイできる場があります！ ワイワイしながら、小さな問題を共に解決したい方がいらっしゃったらぜひインゲージにエントリーいかがですか！お持ちしております~
