# 【個人開発】少しでも昆虫に興味をもって食べてみたくなるような診断サービスを作った。

### 最初に

---

初めまして、エンジニアを目指して勉強中の樋口といいます！

いきなりですが、皆さんは昆虫食に対してどんなイメージを持っているでしょうか？
少しでも気になったことはありませんか？

昆虫食といってもどんな虫が食べれるんだろう？？
初めて食べてみるけど初心者向けの虫はいないかな～といった
疑問に思うことは多々あると思います。

そこで、昆虫食に対す疑問を解消するサービス　**InsectFood**　を作りました。

https://insect-food.jp/

### アプリの概要

---

昆虫を食べてみたい人が診断を行い、おすすめの昆虫をレコメンドするアプリになります。

### アプリの機能

---

**昆虫食診断**

診断が始まると5問昆虫に関する診断が始まります。
二社一択形式の診断機能で1点もしくは0点の得点計算を行っています。

[](https://gyazo.com/8fd79159f2f814968d84272e56d212ea)

**昆虫食診断の結果表示**

診断で累計した得点は独自で定めた昆虫ランクと紐づけています。
例えば診断の結果が４点の場合は昆虫ランク4に属する昆虫がランダムで表示されるようになっています。
昆虫のランクは１から５まで存在します。

[](https://gyazo.com/f27ed6a436e721c95271f39313511582)

**Twitterシェア**

自分へのおすすめの虫が分かったら他の人にシェアできるようにtwitterシェアも付けました。

[](https://gyazo.com/8e876c63630d8d3f8a047b3e66a31e7a)

**食べれる虫及びお気に入りした虫一覧ページ**

予め登録している虫を一覧表示と検索したい虫を探すことができます。

[](https://gyazo.com/7adaa6d960347a25724af3965346b3c1)

<br>

**虫詳細ページ**

詳細ページ内には以下の情報を記載しています。

[](https://gyazo.com/c9e691f66272a5492ed94a85eb158226)

- 虫の味ステータスをレーダーグラフにて表示
- 通販、食べれるお店、調理方法のリンク
- 初心者に優しい昆虫の食べ方動画を表示

### 使用技術

---

**バックエンド**

- 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を使って昆虫ランクに属する昆虫を抽出しています。

[](https://gyazo.com/219d3befe596d396eb683b900996ad43)

  def results
    #クエリーパラメーターで送られてきた?point=1の形で受けとって、それに付随する昆虫ランクを探す。
    @result = InsectRank.find_by(score: params[:point])
      
    #昆虫ランクに属する昆虫をランダムに表示させるために配列の添字を０以上で
    #虫ランクに属する虫分の長さを指定する
    set_num = rand([e-mail])
      
    #配列の添字は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/

### 最後に

---

アプリを最初から作るのは今回が初めてでしたが、楽しみながら作れたことや、始めて実装する機能がかなり勉強になしました。
これからも多くの方に使っていただけれるように日々改善していけるところを探していこうと思っています。

もし文中に間違い等あればご指摘いただければ幸いです。
最後まで読んでいただいてありがとうございました。

https://insect-food.jp/

リポジトリー
https://github.com/Masaaki618/Insect-Food

ツイッター
https://twitter.com/ippi618

[【個人開発】少しでも昆虫に興味をもって食べてみたくなるような診断サービスを作った。](https://qiita.com/masaaki_618/items/13efc16f16164e8ac89a)

[](https://)