Ruby on Railsで診断機能の実装

はじめに

この記事ではラジオボタンを使った診断機能を実装していきます。
設計、質問内容などは以下の記事を参考にして作成しました。

1.コントローラー設計

cmd

rails g controller perfumes

perfumes_controller.rb

class PerfumesController < ApplicationController
    def index
    end

    def new
        @perfume = Perfume.new
    end

    def show
        @perfume = Perfume.find_by(id: params[:id])
    end

    def create
        perfume = Perfume.new(perfume_params)
        if perfume.save
            flash[:notice] = "診断が完了しました"
            redirect_to perfume_path(perfume.id)
        else
            redirect_to :action => "new"
        end
    end
  
  private
    def perfume_params
        params.require(:perfume).permit(:question1, :question2, :question3, :question4)
    end
end

2.データベース周り

cmd

$ rails g model Perfume question1:string question2:string question3:string question4:string

cmd

$ rails db:migrate

3.Viewページ周り

perfumes/index.html.erb

<h1>香水診断スタート</h1>
<%= link_to "診断を始める", new_perfume_path, class: "link" %>

perfumes/new.html.erb

<%= form_for(@perfume, class: 'form-horizontal', role: 'form') do |f| %>
    <div class="perfume-container">
        <div class="col-12">
            <p>Q1. どちらかと言うと…</p>
        </div>
        <div class="col-6">
            <%= f.radio_button :question1, "1", id: "custom_id1" %>
            <label for="custom_id1">じっくり考える方だ</label>
            <%= f.radio_button :question1, "2", id: "custom_id2" %>
            <label for="custom_id2">考えるより行動する方だ</label>
        </div>
        <div class="col-12">
            <p>Q2. 自分の価値観として近い方は…</p>
        </div> 
        <div class="col-6">
            <%= f.radio_button :question2, "1", id: "custom_id3" %>
            <label for="custom_id3">周りの人と違う存在でありたい</label>
            <%= f.radio_button :question2, "2", id: "custom_id4" %>
            <label for="custom_id4">周りと同じでいたい</label>
        </div>   
        <div class="col-12">
            <p>Q3. 人と接するときは…</p>
        </div>
        <div class="col-6">
            <%= f.radio_button :question3, "1", id: "custom_id5" %>
            <label for="custom_id5">相手の話をよく聞く方だ</label>
            <%= f.radio_button :question3, "2", id: "custom_id6" %>
            <label for="custom_id6">自分の話をよくする方だ</label>
        </div>
    
        <div class="col-12">
            <p>Q4. 大切にしたいのは…</p>
        </div>
        <div class="col-6">
            <%= f.radio_button :question4, "1", id: "custom_id7" %>
            <label for="custom_id7">論理性だ</label>
            <%= f.radio_button :question4, "2", id: "custom_id8" %>
            <label for="custom_id8">情緒だ</label>
        </div>
    </div>
    <div class="sindanbotan">
        <%= f.submit " 結果 " %>
    </div>
<% end %>

perfumes/show.html.erb

<div class="intoro">
  <h5>診断結果</h5>
  <p>あなたにおすすめの香りは…</p>
</div>
<div class="perfume-container">
  <% case [@perfume.question1, @perfume.question2, @perfume.question3, @perfume.question4] %>
  <% when ["1", "1", "1", "1"] %>
    <h6>レモン</h6>
    <p>柑橘系の代表的な原料</p>
    <p>清涼感があり、爽やかな印象</p>
  <% when ["1", "1", "1", "2"] %>
    <h6>シトラス</h6>
    <p>オレンジに似た柑橘系の果物</p>
    <p>リラックス効果がある</p>
  <% when ["1", "1", "2", "1"] %>
    <h6>ローズ</h6>
    <p>華やかで上品な香り</p>
    <p>ストレスを緩和してくれる効果がある</p>
  <% when ["1", "1", "2", "2"] %>
    <h6>ラベンダー</h6>
    <p>優しく女性らしい香り</p>
    <p>気持ちを落ち着かせてくれる</p>
  <% when ["1", "2", "1", "1"] %>
    <h6>ジャスミン</h6>
    <p>爽やかなのに官能的な香り</p>
    <p>幸福感を得やすい</p>
  <% when ["1", "2", "1", "2"] %>
    <h6>ピーチ</h6>
    <p>フレッシュで優しい香り</p>
    <p>アンチエイジングにも最適</p>
  <% when ["1", "2", "2", "1"] %>
    <h6>アップル</h6>
    <p>特徴的で甘い香り</p>
    <p>万人受けしやすい</p>
  <% when ["1", "2", "2", "2"] %>
    <h6>ユーカリ</h6>
    <p>しっかりとした優しい香り</p>
    <p>浄化作用があり。気持ちを落ち着かせてくれる</p>
  <% when ["2", "1", "1", "1"] %>
    <h6>ローズマリー</h6>
    <p>きりりとした強めの香りが特徴的</p>
    <p>美容効果が高い</p>
  <% when ["2", "1", "1", "2"] %>
    <h6>ベルガモット</h6>
    <p>柑橘系の果実</p>
    <p>甘くてフレッシュな、万能な香料</p>
  <% when ["2", "1", "2", "1"] %>
    <h6>ムスク</h6>
    <p>雄のジャコウジカの腹部にある香嚢から抽出した香料</p>
    <p>官能的で重い香り</p>
  <% when ["2", "1", "2", "2"] %>
    <h6>アンバー</h6>
    <p>マッコウクジラの結石から抽出した香料</p>
    <p>魅惑的で色気のある香り</p>
  <% when ["2", "2", "1", "1"] %>
    <h6>シナモン</h6>
    <p>甘いスパイスの香り</p>
    <p>香水のアクセントとしてよく使われる</p>
  <% when ["2", "2", "1", "2"] %>
    <h6>バニラ</h6>
    <p>甘くて官能的な香り</p>
    <p>上品で年齢を問わず人気が高い</p>
  <% when ["2", "2", "2", "1"] %>
    <h6>イランイラン</h6>
    <p>色気のある濃厚で甘い香り</p>
    <p>恋愛に効果があり</p>
  <% when ["2", "2", "2", "2"] %>
    <h6>サンダルウッド</h6>
    <p>お香としてよく使われる白檀の香り</p>
    <p>集中力を高める効果もあり</p>
  <% end %>
</div>

4.ルート周り

routes.rb

#省略
resources :perfumes
#省略

以上で完成です！