最初に
初めまして、rails勉強中の樋口といいます！
いきなりですが、皆さんは昆虫食に対してどんなイメージを持っているでしょうか？
少しでも気になったことはありませんか？
昆虫食といってもどんな虫が食べれるんだろう？？
初めて食べてみるけど初心者向けの虫はいないかな～といった
疑問に思うことは多々あると思います。
そこで、昆虫食に対す疑問を解消するサービス InsectFood を作りました。
アプリの概要
昆虫を食べてみたい人が診断を行い、おすすめの昆虫をレコメンドするアプリになります。
アプリの機能
昆虫食診断
診断が始まると5問昆虫に関する診断が始まります。
二社一択形式の診断機能で1点もしくは0点の得点計算を行っています。
昆虫食診断の結果表示
診断で累計した得点は独自で定めた昆虫ランクと紐づけています。
例えば診断の結果が４点の場合は昆虫ランク4に属する昆虫がランダムで表示されるようになっています。
昆虫のランクは１から５まで存在します。
Twitterシェア
自分へのおすすめの虫が分かったら他の人にシェアできるようにtwitterシェアも付けました。
食べれる虫及びお気に入りした虫一覧ページ
予め登録している虫を一覧表示と検索したい虫を探すことができます。
虫詳細ページ
詳細ページ内には以下の情報を記載しています。
- 虫の味ステータスをレーダーグラフにて表示
- 通販、食べれるお店、調理方法のリンク
- 初心者に優しい昆虫の食べ方動画を表示
使用技術
バックエンド
- Ruby 3.0.3
- Rails 6.1.6
フロントエンド
- HTML
- CSS
- jQuery
- javascript
主な使用 Gem
- rubocop
- sorcery
- asset_sync
- rails_admin
- cancancan
- sentry-ruby
- meta-tags
デプロイ
- AWS
データベース
- Amazon RDS
工夫した点
画面上での工夫
虫詳細画面の仕様
虫は写真の使用を考えましたが本当に虫が苦手な人が見ると引いてしまうと思い
極力本物に近いイラストか可愛らしいイラストチックな画像を使用しました。
（一部の虫はイラストがなかったので写真を使用しています🙇♂️）
詳細画面内にはレーダーチャートと一言感想に似てる食材名で例えたり、虫の食感を記載し
虫を食べる前に味の想像ができるようにしてみました。
虫の食べ方動画を試聴することにより、少しでも虫を食べる前の抵抗を減らすことができると考えました。
機能面での工夫
昆虫の結果表示
診断の結果表示はjs側から送られてきたクエリーパラメーターを使って診断結果の虫を表示しています。
Insect（昆虫テーブル）とInsectRank（昆虫ランク）が1対多の関係である為、js側から送られてきたpointを使って昆虫ランクに属する昆虫を抽出しています。
def results
#クエリーパラメーターで送られてきた?point=1の形で受けとって、それに付随する昆虫ランクを探す。
@result = InsectRank.find_by(score: params[:point])
#昆虫ランクに属する昆虫をランダムに表示させるために配列の添字を０以上で
#虫ランクに属する虫分の長さを指定する
set_num = rand(1..@result.insects.length)
#配列の添字は0からスタートするのでset_numに入っている数字を-1してあげる。
@result_insect = @result.insects[set_num - 1]
@result_score = params[:point]
end
上記の記載で昆虫ランクに属する昆虫をランダムに表示させることができます。
CDNを使用してアセットファイルを外部リソースへ配置
キャッシュを活用した高速な読み込みを実現するために gem 'asset_sync'を使用しました。
https://github.com/AssetSync/asset_sync
railsのデフォルトの設定ではアプリケーションサーバに配置アセットファイルが配置されていますが、アセットファイルをs3に配置しCloudFrontより配信することによって実現を可能にすることができます。
こちらの記事を参考にさせていただきました。
https://nishinatoshiharu.com/rails-asset-sync/
最後に
アプリを最初から作るのは今回が初めてでしたが、楽しみながら作れたことや、始めて実装する機能がかなり勉強になしました。
これからも多くの方に使っていただけれるように日々改善していけるところを探していこうと思っています。
もし文中に間違い等あればご指摘いただければ幸いです。
最後まで読んでいただいてありがとうございました🙇♂️🙇♂️