ゴール
GeekSalonの補助教材「星評価を実装しよう」の拡張版として、より詳細に小数点まで指す方法を学びます。
開発環境
Controller
tweetsController
Model
TweetModel
テーブル
tweetsテーブル
GeekSalonの教材7-9を最後まで完了していることを前提にしています。
事前準備
tweetsテーブルに星評価の点数を保存するためのカラムを追加します。名前はなんでもいいですが今回は例として「Starrating」というカラムを追加します。
実際に追加するためのコマンドは以下です。
コマンドプロンプト
rails g migration AddStarratingToTweets Starrating:float
#Tweetsテーブルに星評価用のカラムを追加
rails db:migrate
#マイグレーションファイルを実行
実装
application.html.erb の にjavascriptのコードを追加する
app/views/layout/application.html.erb
<head>
#省略
#追加
<%= stylesheet_link_tag "https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" %>
<%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" %>
<%= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js" %>
#ここまで
</head>
indexページに追記する
app/views/tweets/index.html.erb
#追加
<span class="star-rating">
<span class="star-rating-front" style="width: <%= getPercent(t.starrating) %>%;">★★★★★</span>
<span class="star-rating-back">★★★★★</span>
</span><%= t.starrating.round(1) %>
#ここまで
newページのフォームの中に星評価用のフォームを追加する
app/views/tweets/new.html.erb
<span id="rate-value"></span>
<div id="rateYo"></div>
<%= f.hidden_field :starrating, id: "starrating_input" %>
newページの下部にscriptを追加する
app/views/tweets/new.html.erb
#省略
<script>
document.addEventListener("DOMContentLoaded", function () {
$("#rateYo").rateYo({
rating: 3.0,
fullStar: false,
step: 0.1,
starWidth: "30px",
onSet: function (rating, rateYoInstance) {
$("#starrating_input").val(rating);
$("#rate-value").text(rating); // ← 数値を表示する要素に反映！
}
});
});
</script>
application.cssにcssを追記する
app/assets/stylesheets/application.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;
}
application_helper.rbに以下を追記する
app/assets/helpers/application_helper.rb
def getPercent(number)
if number.present?
calPercent = number/5.to_f * 100
# calPercent = number/10.to_f * 100
#↑１０段階評価の際は2行目コメントアウトを外して、1行目をコメントアウト。
percent = calPercent.round
#↑CSSは小数が含まれると、widthの幅を指定できないので四捨五入して整数化。
return percent.to_s
else
return 0
end
end