自分が好きなフレーバーの日本酒はあるのか？
「今夜日本酒を飲みたい」と思った時、あなたはどうのように酒を探しますか？
蔵元の都道府県やブランドの知名度、精米歩合やパッケージデザイン・・・色々あると思います。
でも好みの味から探すことってあまりないと思いませんか？
辛口か甘口かの分類であれば絞り込みはできますが、それだけでは絞り込みが弱く１つを特定をするところまではなかなか行けないと思います。
そこで、こんなの作ってみました。
アプリの動作画面
■動作説明
- スライダーを操作して好みのフレーバーになるように調整する
- サーチボタンを押す
- 好みのフレーバーに近い日本酒が５つ表示される
実際に触ってみる↓
ソース
今回CodePenを使用してプログラムを書き、Netlifyでデプロイして公開しています。
ソースとリンクは置いておきます。
See the Pen sakeRecommend by taka (@taka-the-sasster) on CodePen.
個人的に一番重要ポイント
今回APIを使用してさけのわデータから日本酒のデータを取得していますが、API利用に関連して、CodePenのコードとNetlifyにデプロイしているコードは少々違います。
CodePenからノーマルのやり方でさけのわデータのAPIを呼び出そうとすると、CORSエラーが発生してしまい上手くいきません。（CORSエラーなんて初めて遭遇したのでだいぶ苦労しました。）
詳しく知りたい方はこちらの記事など参考にしてみてください↓
CORSをざっくり理解し、CORSエラーを解決する
CodePenでは無料のプロキシサーバーを使い対応しました。
const proxyUrl = 'https://cors-anywhere.herokuapp.com/'; //この部分
const targetUrl = 'https://muro.sakenowa.com/sakenowa-data/api/flavor-charts';
const response = await fetch(proxyUrl + targetUrl);
（このやり方は最善ではない気がしていますが、一旦動いたのでこちらを採用しています。
他に良い方法があれば適宜変更して試してください。）
ちなみにこのままNetlifyにデプロイすると動きません。
デプロイするときは、このコードを次のように書き換えて下さい。
const targetUrl = '/api/sakenowa-data/api/flavor-charts';
const response = await fetch(targetUrl);
そして_redirectsファイルを一つ作成して、次のように記述します。
/api/* https://muro.sakenowa.com/:splat 200
これをJSファイルやHTMLファイルがある階層と同じところに配置してデプロイします。
何をやっているか気になる人は下記の記事確認してみてください～
（Netlifyのプロキシを使うための処理です）
改善が必要なポイント
何回か操作していただければ分かるのですが、「本当に自分の好みのフレーバーの酒が提案されているのか？」と疑問を持つことがあります。
今回のロジックは6種類のフレーバーをベクトルとして扱い、入力したフレーバーとさけのわデータが保有しているデータをコサイン類似度で類似性を求め、近いものを5個ピックアップするというものです。
私が考える問題点
- あまり似ていなくても5つピックアップされてしまう（⇒閾値か何かを設定した方が良さそう）
- さけのわデータの各フレーバーが0.5に寄っていそう（⇒時間がなく実際に分布を確認していませんが、恐らくほとんどの銘柄が0.3~0.7の範囲に収まっているデータになっており、ユーザーがその範囲外の数値を入れると、結果が直感的に分かりづらいです。分布に基づいて重みづけ等した方が良さそう🤔）
データ分析に興味がある人は、最適なロジックを考えてみてください！
最後にこの記事のモチベーションを共有
前回↓の記事を書きました。
これは、Codespacesを使用してLINE Botを動かすというものでした。居酒屋での使用をユースケースとして想定していましたが、居酒屋行く前にCodespacesを起動しておくのは面倒くさい。
そこで、いちいち起動・停止の作業しなくても済むものが作りたい。これがモチベーションでした。
飲み会が楽しみです。