@znz blog

ZnZ の memo のようなもの

Rails 4.1 で jQuery Raty を使ってみた

| Comments

Rails で星を使った評価付けを使いたかったので、 jQuery プラグインを探してみたところ、 jQuery Raty というのが良さそうだったので使ってみました。

対象バージョン

  • jQuery Raty v2.7.0
  • Ruby on Rails 4.1.4
  • Ruby 2.1.2

うまくいかなかった方法

RubyGems.org の方には古いバージョンしかなさそうだったので、 Rails Assets で最新バージョンを使おうと思い、 Gemfile に以下の設定をしたのですが、 raty のディレクトリ配置が特殊なのか、 うまくいきませんでした。

Gemfile
1
2
source 'https://rails-assets.org'
gem 'rails-assets-raty'

development 環境では動いた方法

以下のように書くことで development 環境では動いたのですが、 capistrano で deploy した先では画像が表示されていませんでした。

app/assets/stylesheets/raty.css.scss
1
//= require raty/lib/jquery.raty
app/assets/javascripts/raty.js.coffee.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#= require raty/lib/jquery.raty
 $ ->
   $('.raty').raty
     cancel   : true
    cancelOff: '<%= image_path('raty/lib/images/cancel-off.png') %>'
    cancelOn : '<%= image_path('raty/lib/images/cancel-on.png') %>'
    starHalf : '<%= image_path('raty/lib/images/star-half.png') %>'
    starOff  : '<%= image_path('raty/lib/images/star-off.png') %>'
    starOn   : '<%= image_path('raty/lib/images/star-on.png') %>'
    click: (score, event) ->
      raty = $(event.target).parent()
      $(raty.data('field')).val(score)
    score: ->
      $($(this).data('field')).val()

うまくいった方法

vendor/assets/stylesheets/jquery.raty.cssvendor/assets/javascripts/jquery.raty.js に ダウンロードしたファイルをおいて、 assets も以下のように書き換えました。 画像も vendor/assets/images/raty においてもうまくいかなかったので、 vendor/assets/images/raty におきました。

Web フォントは今回は使っていないので、 考慮していません。 starTypei に変更しない限り使われないはずなので、 Web フォントを配置しなくても問題ないと思います。

app/assets/stylesheets/raty.css.scss
1
//= require jquery.raty
app/assets/javascripts/raty.js.coffee.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#= require jquery.raty
 $ ->
   $('.raty').raty
     cancel   : true
    cancelOff: '<%= image_path('raty/cancel-off.png') %>'
    cancelOn : '<%= image_path('raty/cancel-on.png') %>'
    starHalf : '<%= image_path('raty/star-half.png') %>'
    starOff  : '<%= image_path('raty/star-off.png') %>'
    starOn   : '<%= image_path('raty/star-on.png') %>'
    click: (score, event) ->
      raty = $(event.target).parent()
      $(raty.data('field')).val(score)
    score: ->
      $($(this).data('field')).val()

フォームでの使用例

bootstrap 3.2.0 の form-horizontal を使っているので、 slim で以下のように使っています。

_form.html.slim
1
2
3
4
5
.form-group
  = f.label :readability, class: "control-label col-md-2"
  .col-md-10
    .raty.form-control data-field='#book_report_readability'
    = f.hidden_field :readability, class: "form-control"

show での使用例

以下のように raty の星を使って表示しています。

app/helpers/raty_helper.rb
1
2
3
4
5
6
7
8
module RatyHelper
  def raty_stars(n, max=5)
    (
      image_tag('raty/star-on.png', alt: '') * n +
      image_tag('raty/star-off.png', alt: '') * (max-n)
      ).html_safe
  end
end

Comments