【個人開発】性格診断でお酒と出会う新サービス、「さけぐらむ🍶」リリースしました！🎉🎉

はじめに
===
みなさん、日本酒はお好きですか？
私は日本酒をこよなく愛しているのですが、残念ながら近年の日本酒国内市場は減少傾向にあるようです。

反対に、日本酒の輸出量はアジアの近隣諸国向けに増加しており、日本酒はいわゆる”SAKE”としてブランド化路線をたどっている状況がみられます。
（参考：「日本酒をめぐる状況」農林水産省政策統括官）

とまあ、堅めの書き出しになってしまいましたが、私は少し寂しいなと思う訳です。
もちろん、日本酒が海外で人気を獲得していくのは嬉しいのですが、その一方でブランド化が進めば進むほど、日本人の日本酒離れを推し進めてしまうのではないか、と。

そこで、普段は日本酒を飲まないような人にも、日本酒をもっと身近に感じてもらうべく、史上初（?）の性格診断結果から、ユーザーを日本酒に例えるサービスをリリースしました！🎉

そうです、それが「**さけぐらむ**」です！！🍶

https://sg.sakegram.site
（現在はサービスを停止しています。）

:pushpin:サービス概要
===
### さけぐらむ

[![Image from Gyazo](https://i.gyazo.com/cd954d3cf86dced425a9d5aadc324bb0.jpg)](https://gyazo.com/cd954d3cf86dced425a9d5aadc324bb0)

日本酒を知るきっかけとして、性格診断という新しい形を提供するサービスです。

ショートビッグファイブという性格診断テストを元に、ユーザーの性格を日本酒のフレーバーに置き換え、そのフレーバーに近い日本酒を紹介してくれます。


:iphone:使い方
===
### 性格診断

トップページの「診断開始」ボタンを押下すると、質問項目が表示されます。
回答は「５」に近いほど「あてはまる」、「１」に近いほど「あてはまらない」という形で回答していきます。

[![Image from Gyazo](https://i.gyazo.com/e580381d56f4dee432409348d72651c6.gif)](https://gyazo.com/e580381d56f4dee432409348d72651c6)


すべての質問に回答し終わると、「診断」ボタンを押せるようになります。
解析まで10秒ほど時間がかかりますので、画面が遷移するまでお待ちください。

[![Image from Gyazo](https://i.gyazo.com/f2d07871658a20718c0f2e3538c84bde.gif)](https://gyazo.com/f2d07871658a20718c0f2e3538c84bde)

### 診断結果

診断結果ページでは、３つのレーダーチャートと銘柄の詳細情報、また診断内容・コメントを確認することができます。
３つのレーダーチャートはそれぞれ以下の内容を示しています。

- あなたの性格診断結果
- 日本酒のフレーバーに置き換えられたあなたの性格
- 例えられた銘柄のフレーバー

今回の診断の結果、私の性格から私は「五十嵐」という銘柄に例えられました！

[![Image from Gyazo](https://i.gyazo.com/8defb5208a822e0e9d5a01bf70c905c6.gif)](https://gyazo.com/8defb5208a822e0e9d5a01bf70c905c6)

### ツイート機能

診断結果を確認した後は、Twitterで報告してみましょう！
新しい飲み仲間が増えたり、久しぶりの人と飲む機会ができたりするかもしれませんね！

[![Image from Gyazo](https://i.gyazo.com/4611ce5ee53782c2c93c3d98cea97652.gif)](https://gyazo.com/4611ce5ee53782c2c93c3d98cea97652)

:gear:使用技術
===
- Ruby on Rails 6.0.3
- Nuxt.js 2.14.12
- Doker for Mac 3.2.1
- AWS(ECR, ECS, Fargate) 
- さけのわデータ（[https://muro.sakenowa.com/sakenowa-data/](https://muro.sakenowa.com/sakenowa-data/)）

:gem:使用した主なgem
===
- rack-cors（CORS）
- active_hash（診断結果を定義）
- annoy-rb（近似最近傍探索で銘柄を取得）

:open_file_folder:使用した主なモジュール
===
- vue-scrollto（ページトップに移動）
- vue-chartjs（レーダーチャートの作成）
- vuetify-dialog（ダイアログ表示）
- vuex-persistedstate（VuexのステートをWebストレージに保存）


:hammer_pick:苦労/工夫した点
===
### 操作性を高めるUI/UX
質問の回答にかかる時間を短縮できるように、質問に回答すると、次の質問まで移動するようにしました！
ただ、この機能は現状、スマホでは使用できないため、今後の改善点の一つです。

その他、VuetifyのFABコンポーネントを使って、いつでもページトップに戻れるようにしました！

[![Image from Gyazo](https://i.gyazo.com/e876fc085fd5a2f67fd58af674674f8c.gif)](https://gyazo.com/e876fc085fd5a2f67fd58af674674f8c)

### ダークモードの導入
何でもかんでもダークモードが迎合されがちな流れがありますが、今回さけぐらむにダークモードを導入したのは、居酒屋など、場所によっては照明が暗いところで操作することを想定して、導入を決めました！
早く心置きなく外でお酒が飲みたいですねぇ。

[![Image from Gyazo](https://i.gyazo.com/a2015df36cba77006d447307f71d2128.gif)](https://gyazo.com/a2015df36cba77006d447307f71d2128)

### RailsAPIモードとNuxt.jsの連携
実は、RailsのAPIモードもNuxt.jsも使用したのは今回が初めてだったので、うまく連携できず苦労しました。
特にデプロイ後にCORSの対応でエラーが発生し、何度もやり直しました。

### インフラ環境構築
今回初めてAWSを使ってデプロイしたのですが、ECSのタスク定義やサービスの作成、それに伴うセキュリティーグループの設定など、何度も失敗し悪戦苦闘しました。
苦悩の内容はこちらのブログにも簡単にまとめていますので、もしよろしければ覗いてみてください。

https://bon-voyage23.hatenablog.com/entry/2021/03/16/081025

（インフラ構成図）
![sakegram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1213053/6f4b8653-f5dd-4a9a-7088-1d7b36de6b06.png)


:pencil2:今後改善したい点
===
現在は、銘柄のみTwitterでシェアできるようになっていますが、今後は診断結果の内容もシェアできるようにしていきたいと思っています。

また、銘柄の取得にはannoy-rbを使用しており、近似最近傍探索で性格に近いフレーバーを持つ銘柄を探しているのですが、精度にややばらつきがあり、今後は診断結果の精度を高めていきたいと思っています。
今のところコサイン類似度を使って解析できないか検討しています。

おわりに
===
実はこのサービスは、勉強用の架空のサービスとして作り始めました。
もちろん、日本酒に対する思いについては嘘偽りはありませんが、性格診断と日本酒を結びつけたのは、半分ふざけていました。

しかし、デモ動画をみてやってみたいと反応してくれたRUNTEQ受講生の皆さんのおかげで、ふざけるなら真剣にふざけきってみようと決意し、リリースまで漕ぎ着けることができました。

今後も日本酒を布教するために、全力でサービスの改善に取り組んでいきたいと思います！
これは真剣に真面目です。

それでは、最後までご覧いただき、ありがとうございました！
これから皆さんと日本酒との良い出会いがたくさん待っていることを心より祈っています！

### Have a Happy Sake Life!!!🍶


参考
===
- 農林水産省「日本酒をめぐる状況」

https://www.maff.go.jp/j/seisaku_tokatu/kikaku/attach/pdf/sake-5.pdf