rails 星評価の実装

rails 星評価を実装する手順

*players controllers で作業を行なっています。

まずやること

• ３つの星の画像を保存する
  
  https://github.com/wbotelhos/raty/tree/master/lib/images
  
  上記のファイルの中の「satar」から始まる３つの画像をapp/assets/imagesにダウンロードする

• jquaryファイルを保存する
  
  https://github.com/wbotelhos/raty/blob/master/lib/jquery.raty.js
  
  上記のファイルをapp/assets/javascript/jquery.raty.jsファイルを作成し、コピーする

• app/assets/javascript/application.jsに
  
  「//=require jquary」と記入　＊require_treeよりも必ず前に書く

• Gem.fileに
  
  「gem 'jquary-rails'」と記入後bundle install

• rate（float型）のカラムを作成　(rails g migration AddRateToテーブル名　rate:float)

手順１ routes.rbにsearchアクションを追加する

routes.rb

collection do
  get 'search'  
end

collection do => resourcesに含まれないアクションを追加するときに使用する

手順２ controllerでsearchアクションの定義づけをする

players.controller

def search
  @players = Player.search(params[:search])
end

手順３ rateカラムを保存するフォームを作成する

new.html

<input class="number" max="5.0" min="0" name="rate" step="0.5" type="number" placeholder="強さ(５段階評価)"/>

type="number" => タグ内で使用すると数値の入力欄が作成される

手順３　rateの数字に応じて星評価を表示する

show.html

<div id = "star-rate-<%= @player.id %>"></div>
<script>
  $('#star-rate-<%= @player.id %>').raty({
    size: 36,
    starOff:  '<%= asset_path('star-off.png') %>',
    starOn : '<%= asset_path('star-on.png') %>',
    starHalf: '<%= asset_path('star-half.png') %>',
    half: true,
    readOnly: true,
    score: <%= @player.rate %>,
  })
</script>

• id => classと同じ役割。ただ、WEB１ページに１回しか使用できない。idクラスを呼ぶときは「#」を先頭につける
• $ => jQuaryを呼び出す記号
• ('#star-rate-<%= @player.id　%>') => body要素内のstar-rate-<%= @player.id　%>にアクセスする
• .raty => ratyのプロバティを使用することができるようになる
• asset_path => asset/imageの画像を表示する
• readOnly: true, => 画面表示のみで変更できないようにする

以上の操作で私は星評価を作成することができました。