今回はRuby on Railsで診断機能を実装します。
目次は以下の通りです。
###1.コントローラー設計
###2.データベース周り
###3.Viewページ周り
###4.ルート周り
##1.コントローラー設計
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)
params[:perfume][:question] ? @perfume.question = params[:perfume][:question].join("") : false
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(:id, question: [])
end
end
##2.データベース周り
ターミナル/コマンドプロンプト
$ rails g model Perfume question:string
ターミナル/コマンドプロンプト
$ rails db:migrate
##3.Viewページ周り
perfumes/index.html.erb
<!DOCTYPE html> <!-- この文章がHTML文章であることを伝える要素です。-->
<html lang="ja"><!--言語の指定-->
<head><!--ページに表示されない情報(サイトの裏側の設定)-->
<meta charset="utf-8">
<title>香水診断スタート</title><!--ブラウザのタブのタイトルを指定-->
</head>
<body>
<header>
<h1 class="headline">
<a>Perfu_me</a>
</h1>
<ul class="nav-list">
<li class="nav-list-item">about fragrance</li>
<li class="nav-list-item"><%= link_to "診断", perfumes_path, class: "link" %></li>
</ul>
</header>
<div class="start">
<h6>Are you ready?</h6>
<%= link_to "診断を始める", new_perfume_path, class: "link" %>
</div>
</body>
perfumes/new.html.erb
<%= form_for(@perfume, class: 'form-horizontal', role: 'form') do |f| %>
<div class="container-sindan">
<div class="row">
<div class="col-12">
<p>Question1. どちらかと言うと…</p>
</div>
<div class="col-6">
<p><%= f.check_box :question, {multiple: true}, "1", nil %>じっくり考える方だ</p>
</div>
<div class="col-6">
<p><%= f.check_box :question, {multiple: true}, "2", nil %>考えるより行動する方だ</p>
</div>
<div class="col-12">
<p>Question2. 自分の価値観として近い方は…</p>
</div>
<div class="col-6">
<p><%= f.check_box :question, {multiple: true}, "1", nil %>周りの人と違う存在でありたい</p>
</div>
<div class="col-6">
<p><%= f.check_box :question, {multiple: true}, "2", nil %>周りと同じでいたい</p>
</div>
<div class="col-12">
<p>Question3. 人と接するときは…</p>
</div>
<div class="col-6">
<p><%= f.check_box :question, {multiple: true}, "1", nil %>相手の話をよく聞く方だ</p>
</div>
<div class="col-6">
<p><%= f.check_box :question, {multiple: true}, "2", nil %>自分の話をよくする方だ</p>
</div>
<div class="col-12">
<p>Question4. 大切にしたいのは…</p>
</div>
<div class="col-6">
<p><%= f.check_box :question, {multiple: true}, "1", nil %>論理性だ</p>
</div>
<div class="col-6">
<p><%= f.check_box :question, {multiple: true}, "2", nil %>情緒だ</p>
</div>
</div>
</div>
<div class="sindanbotan">
<%= f.submit "post" %>
</div>
<% end %>
perfumes/show.html.erb
<div class="intoro">
<h5>診断結果</h5>
<p>あなたにおすすめの香りは…</p>
</div>
<div class="tweet-container">
<div class="tweet">
<% if @perfume.question == "1111" %>
<h6>レモン</h6>
<p>柑橘系の代表的な原料</p>
<p>清涼感があり、爽やかな印象</p>
<% elsif @perfume.question == "1112" %>
<h6>シトラス</h6>
<p>オレンジに似た柑橘系の果物</p>
<p>リラックス効果がある</p>
<% elsif @perfume.question == "1121" %>
<h6>ローズ</h6>
<p>華やかで上品な香り</p>
<p>ストレスを緩和してくれる効果がある</p>
<% elsif @perfume.question == "1122" %>
<h6>ラベンダー</h6>
<p>優しく女性らしい香り</p>
<p>気持ちを落ち着かせてくれる</p>
<% elsif @perfume.question == "1211" %>
<h6>ジャスミン</h6>
<p>爽やかなのに官能的な香り</p>
<p>幸福感を得やすい</p>
<% elsif @perfume.question == "1212" %>
<h6>ピーチ</h6>
<p>フレッシュで優しい香り</p>
<p>アンチエイジングにも最適</p>
<% elsif @perfume.question == "1221" %>
<h6>アップル</h6>
<p>特徴的で甘い香り</p>
<p>万人受けしやすい</p>
<% elsif @perfume.question == "1222" %>
<h6>ユーカリ</h6>
<p>しっかりとした優しい香り</p>
<p>浄化作用があり。気持ちを落ち着かせてくれる</p>
<% elsif @perfume.question == "2111" %>
<h6>ローズマリー</h6>
<p>きりりとした強めの香りが特徴的</p>
<p>美容効果が高い</p>
<% elsif @perfume.question == "2112" %>
<h6>ベルガモット</h6>
<p>柑橘系の果実</p>
<p>甘くてフレッシュな、万能な香料</p>
<% elsif @perfume.question == "2121" %>
<h6>ムスク</h6>
<p>雄のジャコウジカの腹部にある香嚢から抽出した香料</p>
<p>官能的で重い香り</p>
<% elsif @perfume.question == "2122" %>
<h6>アンバー</h6>
<p>マッコウクジラの結石から抽出した香料</p>
<p>魅惑的で色気のある香り</p>
<% elsif @perfume.question == "2211" %>
<h6>シナモン</h6>
<p>甘いスパイスの香り</p>
<p>香水のアクセントとしてよく使われる</p>
<% elsif @perfume.question == "2212" %>
<h6>バニラ</h6>
<p>甘くて官能的な香り</p>
<p>上品で年齢を問わず人気が高い</p>
<% elsif @perfume.question == "2221" %>
<h6>イランイラン</h6>
<p>色気のある濃厚で甘い香り</p>
<p>恋愛に効果があり</p>
<% elsif @perfume.question == "2222" %>
<h6>サンダルウッド</h6>
<p>お香としてよく使われる白檀の香り</p>
<p>集中力を高める効果もあり</p>
<% end %>
</div>
##4.ルート周り
routes.rb
#省略
resources :perfumes
#省略
以上です！