jquery.raty rails導入

#はじめに
- Golf GearのReviewサイトを作成中。
- Reviewの評価を星で表示する。
- 公式サイトはなぜかアクセスできないので、githubや画像をそれぞれ拾ってきて、表示できるようにする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630397/69fd5ef9-387f-ee40-f8c9-320d5609b423.png)




#jquery.raty.jsファイルとstar画像を配置

- jquery.raty.js
(https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js)
上記記述をコピーし、`jquery.raty.js`というFile名で、`app/assets/javascripts`下に配置。
- DOWNLOADからFileをダウンロードし、imgフォルダから、`star-on.png`, `star-off.png`, `star-half.png`を`app/assets/images`下に配置。(https://www.alpinestyle.co.il/media/vendor/jquery.raty-1.4.3/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630397/821c8402-16e0-fd58-e40a-a2b9b65e04d6.png)

- `application.js`でrequireする。

```javascript:app/assets/javascripts/application.js
//= require jquery.raty.js
```

#Review評価数を星に置き換える

```erb:app/views/reviews/_review.html.erb
<div class="review-rating" data-score="<%= review.rating %>"></div>
<p><%= review.comment %></p>
```

```erb:app/views/gears/show.html.erb
<%# 末尾に記載 %>
<script>
  $('.review-rating').raty({
    readOnly: true,
    score: function() {
      return $(this).attr('data-score');
    },
    path: '/assets/'
  });
</script>
```

- 今回、`_review.html.erb`で`data-score`を読み込み、`render @gear.reviews`で呼び出しているので、`gears/show.html.erb`にjquery発火イベントを記載。

#Review投稿Formにstarで評価する
```erb:app/views/reviews/_form.html.erb
<%= simple_form_for ([@gear, @gear.reviews.build]) do |f| %>
  <div id="rating-form">
    <label>Rating</label>
  </div>
  <%= f.input :comment %>
  <%= f.button :submit %>
<% end %>

<script>
  $('#rating-form').raty({
    path: '/assets/',
    scoreName: 'review[rating]'
  });
</script>
```
https://gyazo.com/56bec592eeb6da5f719aa162dc26feed

#投稿Reviewの平均を表示
```ruby:app/controllers/gears_controller.rb
def show
  if @gear.reviews.blank?
    @average_review = 0
  else
    @average_review = @gear.reviews.average(:rating).round(2)
  end
end
# @average_reviewのインスタンス変数を設定
```
```erb:app/views/gears/show.html.erb
<div class="col-sm-8">
  <h2><%= @gear.name %></h2>
  <h3><%= @gear.maker.name %></h3>
  <h2>Average Rating</h2>
  <div class="average-review-rating" data-score=<%= @average_review %>>
  <span>Based on <%= @gear.reviews.count %> Reviews</span>
  <h4><%= @gear.club.name %></h4>
  <p><%= @gear.description %></p>
</div>
<%# data-scoreに先ほど設定した@average_reviewのインスタンス変数を当てる。 %>

<script>
  $('.average-review-rating').raty({
    readOnly: true,
    path: '/assets/',
    score: function() {
      return $(this).attr('data-score')
    }
  });
</script>
<%# jquery発火条件記載 %>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630397/75692dcb-cc08-9502-80e4-5116760a6040.png)


# AWSデプロイ後、星が表示できなくなった
- 原因はassets/images配下の星の画像が本番環境で読み込まれる際、fingerprintが自動付与されるため、画像のpathが見つからないことが表示されない原因だった。

- 解決策：`<script>`の記述に`asset_path`を追加する。

```erb:app/views/gears/show.html.erb
<script>
  $('.review-rating').raty({
    readOnly: true,
    starOn: "<%= asset_path('star-on.png') %>",
    starOff: "<%= asset_path('star-off.png') %>",
    score: function() {
      return $(this).attr('data-score');
    }
  });
</script>
<script>
  $('.average-review-rating').raty({
    readOnly: true,
    starOn: "<%= asset_path('star-on.png') %>",
    starOff: "<%= asset_path('star-off.png') %>",
    starHalf: "<%= asset_path('star-half.png') %>",
    score: function() {
      return $(this).attr('data-score')
    }
  });
</script>
```