【rails】Ratyを使った星評価（評価の保存・表示・再評価）

13176 ワード
JavaScript Ruby Rails jQuery Ruby テキストリンク

こんばんは。プログラミング初学者です。
railsにてバイクのレビューを投稿するアプリを作成中です。
RatyというjQueryプラグインを用いて星評価を実装していたのですが、導入から表示までは参考記事がそこそこあったのですが、再評価というところが参考記事が少なかったため、本記事にまとめてみました。
間違いがございましたら、遠慮なくご指摘いただけますと幸いです。

Image from Gyazo

前提条件

・jQuery導入済み
・Raty導入済み
・星評価の対象となるカラム型はfloat型である。（星半分の評価も可能とするため）

※Raty導入につきましては下記の記事が参考になりました。
・Railsで「Raty」を使った星機能をつける
・[Rails 6] Raty.jsを使った星型レビュー
・【Rails+jQuery Raty】レビュー用の星★の評価を実装する(入力、保存、表示)
・公式GitHub

評価の保存

ビューファイルの書き方

※form_withを使用しています

<%= form_with(model: @review, local: true) do |f| %>
  <div class="star-form-group" id="star1">               <%#id要素の付与がポイント%>
    <%= f.label :comfort,'乗り心地', class:'star-title' %>　<%#保存したいカラムの指定%>
  </div>
<%= end %>
ratyを用いた星評価保存の関数定義

※同じビューファイルにscriptタグとして埋め込み。私は評価項目が多いので、部分テンプレートにて切り出しました。

<script>
$('#star1').raty({
  size     : 38,                                    //星のサイズ
  starOff:  '<%= asset_path('star-off.png') %>',    //imagesフォルダより星画像の呼び出し
  starOn : '<%= asset_path('star-on.png') %>',
  starHalf: '<%= asset_path('star-half.png') %>',
  scoreName: 'review[comfort]',     //reviewモデルのcomfortカラムに保存
  half: true,                       //星半分を許可する。DBには0.5単位の数値が保存される
});
</script>

これで、保存するとDB上では小数を含む数値にて保存がなされました。

保存した評価の表示

ビューファイルの書き方
<div class="star-group">
  <div class="detail-review">乗り心地</div>
  <div class="detail-value", id="star-comf-<%= @review.id %>"></div> <%# id要素の書き方がポイント %>
  <div class="eval-star"><%= @review.comfort %>/5点</div> <%# @モデル.カラムで保存された数値を表示 %>
</div>
ratyを用いた星評価の表示
<script>
  $('#star-comf-<%= @review.id %>').raty({      //.idでどの評価であるかを取得
    size: 38,
    starOff:  '<%= asset_path('star-off.png') %>',
    starOn : '<%= asset_path('star-on.png') %>',
    starHalf: '<%= asset_path('star-half.png') %>',
    half: true,
    readOnly: true,                             //readOnlyオプションで読み込み専用とする。編集できない。
    score: <%= @review.comfort %>,              //scoreオプションで評価内容を取得
  });
</script>

Image from Gyazo

これでレビューの詳細ページなどに適用すれば、星評価が一目瞭然ですね。

再評価・編集

ビューファイルの書き方

基本的には評価の保存時の書き方と同じ。

<div class="star-edit-group">
  <%= f.label :comfort,'乗り心地', class:'star-title' %>
  <div class="detail-value", id="edit-comf-<%= @review.id %>"></div> <%# .idでどの評価であるかを取得 %>
</div>
ratyを用いた再評価
<script>
  $('#edit-comf-<%= @review.id %>').raty({
    size: 36,
    starOff:  '<%= asset_path('star-off.png') %>',
    starOn : '<%= asset_path('star-on.png') %>',
    starHalf: '<%= asset_path('star-half.png') %>',
    half: true,
    score: <%= @review.comfort %>,     //scoreオプションで最初の評価内容を取得
    scoreName: 'review[comfort]',      //scoreNameオプションで、新たに評価を保存
  });
</script>

これで最初に評価した内容が星で表示され、かつ再評価が可能で、新たに評価内容が保存できるようになりました。

まとめ

評価→表示→再評価といった一連の流れをまとめることができてよかったです。
今回は基礎的な部分のみの実装でしたが、改めて公式GitHubを見るとこれ以外にもたくさんオプションがありますので、応用が効きそうです。
余力があれば、評価の際にマウスオーバーした時に星の横にでも数値化された値が表示されるようになればより優れたUIになりそうなので、挑戦してみたいですね。

余談ですが、今回初めてGIFの埋め込みをしてみたのですが、縦横比があまりよろしくなく見にくくてすみません・・・。

ご覧いただきありがとうございました。