【Rails】星評価機能をつける！
本日は、
↓星評価機能を実装します！！！！👏👏👏👏
Step 0 事前にやっておくこと
$ rails g controller books index new
$ rails g model Book title:string learn:text about:text category:string overall:integer
$ rails db:migrate
私の場合、
overall:integer 以外は既に作っていたので、
カラムの追加と削除カラムを追加する の記事を参考に
カラムを追加する形で作りましたー！✊
books_controllerの部分を少しいじります。
private
def book_params
params.require(:book).permit(:title, :learn, :about, :category, :overrall)
↑このようにbook_paramsの最後にoverallを追加します。
ではでは、これから本格的に形をつくっていきます！★★☆
Step1 index.html.erbを編集する
<div>
<h2>総合評価：
<span class="star-rating">
<span class="star-rating-front" style="width: <%= getPercent(t.overall) %>%;">★★★★★</span>
<span class="star-rating-back">★★★★★</span>
</span>
</h2>
</div>
↑ 総合評価の⭐の部分になります。
Step２ books_helper.rbを編集する
def getPercent(number)
if number.present?
calPercent = number/5.to_f * 100
percent = calPercent.round
#↑CSSは小数が含まれると、widthの幅を指定できないので四捨五入して整数化します！
return percent.to_s
else
return 0
end
end
３行目にあるcalPercent = number/5.to_f * 100のnumber/5 の部分をnumber/10に変更すると10段階評価に変えることも出来ます⭕
今回は5段階評価で充分なのでこのままでいきます！
Step3 new.html.erbを編集する
<h5>総合評価</h5>
<div class="post_form">
<%= f.radio_button :overall, 5 ,id: 'star1'%>
<label for="star1"><span class="text">最高</span>★</label>
<%= f.radio_button :overall, 4 ,id: 'star2'%>
<label for="star2"><span class="text">良い</span>★</label>
<%= f.radio_button :overall, 3 ,id: 'star3'%>
<label for="star3"><span class="text">普通</span>★</label>
<%= f.radio_button :overall, 2 ,id: 'star4'%>
<label for="star4"><span class="text">悪い</span>★</label>
<%= f.radio_button :overall, 1 ,id: 'star5'%>
<label for="star5"><span class="text">最悪</span>★</label>
</div>
自分が星評価⭐を入れたいなっていう所に、挿入します！
テキストの文字は各自で好きなように変更してみてください。
こんな感じに変えることも出来ます。
Step4 books.cssを編集する
.post_form{
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.post_form input[type='radio']{
display: none;
}
.post_form label{
position: relative;
padding: 10px 10px 0;
color: gray;
cursor: pointer;
font-size: 30px; /*星の大きさを変更*/
}
.post_form label .text{
position: absolute;
left: 0;
top: 0;
right: 0;
text-align: center;
font-size: 9px; /*星の上の説明書きの大きさを変更*/
color: gray;
}
.post_form label:hover,
.post_form label:hover ~ label,
.post_form input[type='radio']:checked ~ label{
color: #ffcc00;
}
/* 以下一覧ページの星用のCSS */
.star-rating {
position: relative;
display: inline-block;
width: 5em;
height: 1em;
font-size: 25px;
}
.star-rating-front {
display: inline-block;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
color: #ffcc33;
}
.star-rating-back {
display: inline-block;
color: #ccc;
}
☆用のCSSになります。
途中解説
.post_form input[type='radio']{
display: none;
勘がいい方はこのコードでわかるかもしれません。
そうです。
☆の正体はなんと、、、、
🔘（ラジオボタン）なのです！！！🥺
その上に☆をかぶせているという仕組みなのです🥺
1つの星を作るコードとしては、
<%= f.radio_button :カラム名, 送りたい数字(value) ,id: 'star番号'%>
<label for="star番号"><span class="text">星の上に表示したい文</span>★</label>
となります。
まあ難しいのでスルーでいきましょう🚗
.post_form label:hover,
.post_form label:hover ~ label,
.post_form input[type='radio']:checked ~ label{
color: #ffcc00;
この部分のcolor: #ffcc00;ここは黄色です。
てことは、
この部分で🌟に色を付けているということがわかると思います。
正確にいうと、このコードでやっていることは、
[type='radio']:checkedの部分で🔘でチェックしたやつだけ黄色に塗りまっせー
といったことをしています。
.post_form{
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
1行目のブロックで書いたコードに戻ります。
このコードのflex-direction: row-reverse;の部分に着目してください👀
今回は、右にいけば行くほど評価が良いという感じに実装をしたいので、
flex-direction: row-reverse;で表示を反転させています。
という感じで完成したのではないでしょうかー！！！！！
だんだんそれっぽく出来てきましたー！わーい！
いつの間にか3595字も書いててビックリしました（笑）
それでは今回はこれにてサヨナラにしたいと思います！(^_^)/~
それでは良い一日をー！！！！！！！！！！
