【raty.js】星付き　評価機能　実装　rails　view表示まで #JavaScript

【ゴール】

raty.jsを使用して星付きのランキング機能の実装　view表示まで

【メリット】

■　UXの向上
■　javascript理解度向上

【開発環境】

■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

【実装】

1.githubからretyのソースを持ってくる

　※こちらのソースコードから
　※ファイルは2点、①"jquey-raty.js"のファイル　,　②"image"全て

2.jquery追記

　※　”//= require jquery”を追記しないと読み込まれません
　※　"star"　に対して発火するよう定義
　※　”/assets/star-off.png"で画像の場所を指定

javascripts/application.js

//= require jquery  

　　　（中略）

$(function () {
  $('#star').raty({　　　
    size: 36,
    starOff: "/assets/star-off.png",
    starOn: "/assets/star-on.png",
    scoreName: "score"
  });
});

3.view追記

　※　””ファイルを読み込む
　※　"id=star"で上記のJavaScriptの記述へ情報を渡してあげる

views/application.html.erb

<body>
  <script src="assets/jquery.raty.js"></script>
  <div id="star"></div>
  <%= yield %>
</body>

以上

【raty.js】 星付き 評価機能 実装 rails view表示まで