【rails】Raty를 사용한 별 평가(평가의 보존·표시·재평가)

안녕하세요. 프로그래밍 초학자입니다.
rails에서 자전거 리뷰를 게시하는 앱을 만드는 중입니다.
Raty라는 jQuery 플러그인을 사용하여 별 평가를 구현했습니다. 네.
실수가 있으시면 언제든지 지적해 주시면 감사하겠습니다.

전제 조건

· 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>

이것으로 리뷰의 상세 페이지 등에 적용하면, 별 평가가 일목요연하네요.

재평가·편집

뷰 파일을 작성하는 방법

기본적으로는 평가의 보존시의 쓰는 방법과 같다.

<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의 임베딩을 해 보았습니다만, 종횡비가 그다지 좋지 않아 보기 어렵고 죄송합니다・・・.

봐 주셔서 감사합니다.