宅飲みでカクテルを楽しむためのWebアプリを開発した

こんにちは。サーバーサイド/webフロントエンジニアをやっている @cappyns です。
少し前に友達と宅飲みでカクテルを楽しむためのwebアプリを作ったのでこの記事ではその紹介をします。

github: https://github.com/naoki-shigehisa/cocktail
※ このアプリは僕がRailsの勉強も兼ねて作成したものです。コードは初心者っぽい変なのが散見されるかと思うんですがご容赦ください、、

モチベーション

このアプリを作成した当初は新潟県のとある田舎に住んでいたのですが、なんせ周りに飲み屋が全然なく、頻繁に友人と宅飲みを開催していました。
そんな状況もあってふと思いつきでカクテル飲めるようにしたくない？？とカクテルの材料や道具を一式揃えてみたのが事の始まりです。色んなサイトを見ながらカクテルの材料を集めてみて、自分で暇な時にはお家でカクテルを作るようになりました。超楽しい！！

しかし、いざ宅飲みになると自分含めみんなほとんどカクテルには手を出さず、缶チューハイや日本酒等すぐ飲めるものばかり飲んでいました。宅飲み始まる前にはカクテルを楽しみにしてくれていても、大体最初の一杯だけ。悲しい。

その理由は何となく察していて、材料だけ並んでいてもどんなカクテルが作れるのかが分からないことでした。家主の僕ですらわかっていないのにたまたま遊びにきた友人がわかるわけもない。
カクテルを飲みたいと思って調べてみてもあーこの材料ないから作れない、、となって結局何度も調べ直し。実際にカクテルを作り出すまでに何度もそんな残念体験を繰り返している状態ではめんどくさくなってしまうよなと思っていました。

そこで今作れるカクテルを一覧で見れるようにしたい！と思い立ち、このカクテルアプリを作り始めました。

開発の進め方

開発を始めようと思った次の日には宅飲みの予定があったため、まずは超特急でその日のために最低限の機能とデータの入力をしました。

そのため一番最初に使ってもらった時は作れるカクテル名の一覧が見れるだけのものでした。
そこから実際に使ってもらって、次の宅飲みまでに改善して、また使ってもらって、、、を繰り返して今の形になっています。

ちなみにこのwebアプリはローカルホストでwebアプリを起動し、自宅のwifiに繋いでページに接続してもらっています。基本的に自宅でしか使うことがないアプリなので、それで十分かなと思って特にデプロイ等はしていません。

機能紹介

そんな感じで開発を進めて出来上がったカクテルアプリは最終的に以下の4つが主要機能となりました。

• カクテル情報の表示
• カクテル絞り込み
• 飲んだカクテルのログ
• 材料管理

カクテル情報の表示

まず一番最初に必要性を感じたのはこの機能。わかっていたことではありましたがカクテル名が並んでいるだけではどれを飲むか判断するための情報がなく、カクテルをなんとなくでも知っている人でないとほぼ意味がありませんでした。

そこでカクテル一覧画面に簡易的な情報を追加した上で、カクテル詳細画面を作成しました。
カクテル一覧画面には最初スタイル/技法/アルコールの強さの3つを表示していましたが、一覧で見るにあたってベースになっているお酒が何かもみたいとの声があったのでベースのお酒も表示するようにしています。

カクテル一覧画面	カクテル詳細画面

カクテル絞り込み

続いて必要になったのがこの機能。材料がいろいろ揃ってきて作れるカクテルが増えてくると絞り込みが欲しくなってきます。この機能を作成する時には出来る限り簡単に操作できること意識しました。なぜならこのアプリを使う時はみんなすごく酔っています。簡単じゃないと使えない。

タップするだけで絞り込みがされるようにしつつ、ボタンに含める文言についても実際に使ってくれる人に聞きながら調整しました。

飲んだカクテルのログ

最後に要望が出たのがこの機能。何度か宅飲みに来てくれた友人に前に飲んだ美味しかったのなんだっけ？と聞かれたのがきっかけでした。このアプリが使われるのは酔っている時です。美味しかったカクテルがあっても名前なんて覚えていませんでした。

そんな課題を解決するために作ったのがこの飲んだカクテルを記録しておける機能です。しかし、これを作るだけでは全然使ってもらえませんでした。宅飲み中にわざわざこんなボタン押さなかった、、、
そこで別途注文ボタンを作成し、注文したカクテルは自動で飲んだに登録されるようにしました。

元々飲みたいカクテルが決まっても作れる人は限られていたため、声を上げて誰かに作ってもらう形になっていました。この注文ボタンを押すと僕が誰が何を注文したか確認でき、勝手に作れる状態になっています。このボタンによって明確に宅飲み中にボタンを押すメリットが生まれ、みんな押して記録をしてくれるようになりました。やったね。

飲んだカクテル一覧画面	カクテル詳細画面

材料管理

そして友人が直接使う機能ではありませんでしたがとても大事になるのがこの機能。
管理画面から材料を管理しておくことで、カクテルアプリからは在庫のある材料しか表示されないようになっています。

この機能がなく作れないレシピも表示される状態になっていると元々解決したかった作れるカクテルが分からないという課題が解決できないので、絶対に入れたいと思って実装しました。
この機能と絞り込み機能が相まってコードは結構複雑になっています、、
関連ロジック: https://github.com/naoki-shigehisa/cocktail/blob/main/rails/app/models/recipe.rb

この機能を実装したことで飲み会中に無くなった材料があっても、管理画面からflagを切り替えるだけですぐにその材料を使ったカクテルを表示しないように設定でき、常に表示されているカクテルが全て今作れる状態を維持することができました。

サブ機能紹介

上述のような主要機能以外にも、友人から出た要望を聞いて随時いろんなサブ機能を追加していました。せっかくなのでその中で特徴的なものを紹介したいと思います。

ランダムチョイス

これは地味に要望が多かった＆使われた機能です。カクテルの種類が増えてくるとどれがいいか迷ってしまうという声が多々ありました。

そこで実装したのがこのランダムチョイス。ある程度条件を絞った上でその中で作れるカクテルからランダムに1つ表示してくれます。ネタ半分で作った機能でしたが、友人の中にはほとんどこれに頼って飲むカクテルを決めている人もいました。

他の人の評価を表示

これも要望が多かった機能です。カクテルに詳しくない人は情報を見てもどれが美味しそうか判断ができず、他の人が美味しいって言っているのが飲みたいという声がありました。

そこでカクテル一覧画面に他の人がつけたExcellent評価の数を表示しつつ、カクテル詳細画面に誰がどんな評価をつけたのかを表示しました。これによって他の人が美味しいと思ったカクテルを選べるようになりました。

カクテル一覧画面	カクテル詳細画面

ユーザーランキングを表示/ユーザーにラベルを付与

他の人の評価を表示するようになって僕の中にもっと評価をつけて欲しいという思惑が生まれました。だってデータが溜まった方が便利になりそうだもん。
しかし、飲んだカクテルの記録機能を実装した時のように、わざわざ宅飲み中に評価を入力してくれる人は稀でした。

そこで作成したのがユーザーランキングとラベルです。評価をつけた数によるランキング画面を作成するとともに、評価したカクテルの数や種類に応じてラベルが付くようにしました。この機能を実装してから一部の友人の間でランキングの競い合いやラベルの取り合いが始まり、一気にデータが溜まる量が増えました。

他の人に自分の評価が見えないように設定

他の人の評価が見れる機能やユーザーランキングを実装すると、自分用に記録はしておきたいけど他の人に名前を見られたくないという声が上がりました。我が家にはいくつかの友人グループが宅飲みに来ていたため、それら全ての人に何を飲んだか見られるのが嫌なようです。

確かにそういうこともあるなと思い、他の人に自分の評価が見えないようにする設定を実装しました。

最後に

このアプリを作ったことで宅飲みでカクテルをたくさん飲むようになり、宅飲みがさらに楽しくなりました。中にはカクテルを飲みたいからと我が家に来てくれる人も出てきたくらいです。
知識が必要そうでとっつきにくかったカクテルを技術の力で楽しめるようにするのはとても楽しかったし、友人達がくれる要望に応える形で機能を増やしていくのもとても楽しかったです。

プログラミングができてよかったなと感じた開発でした。