宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

RailsアプリにJavaScriptのプラグインRateYo!で５段階評価の星マークを実装しよう！

開発

みなさんこんにちは！宮水です。
先日EscolaのTOPページに以下のような星マークをつけました。

 

f:id:kattyan53:20190213213004p:plain

今回はこの機能の作り方について解説していこうと思います！
完成系のコードは一番下にまとめてますので、手っ取り早くコードだけ読みたい人はどうぞ！

 

この記事の目標

・小数点第一位まで対応した星のランキング機能が実装できる

・画面に一つだけではなく、複数の星のかたまりを表示させることができる

 

 

今回使ったプラグイン　Rate Yo!

rateyo.fundoocode.ninja

 

今回はbowerもnpmでも管理してなかったので、直接以下のコードをapp/views/layouts/application.html.erb

に貼りました。

 

 
<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">

 

<!-- Latest compiled and minified JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

 

 

なぜこのプラグインを使ったかというと、星の画像を使わなくても小数点を表現してくれるからです。

最初のHTML

HTMLのコードは以下です。

<div id="rateYo"></div>

 

要素はdivじゃなくてもspanでも動きます。

 

最初のJS

$(function () {
  $('#rateYo).rateYo({
    starWidth: "20px",
    rating: 5,
    halfStar: true,
    readOnly: true
  });
});

 

以下、オプションの説明です。

starWidth: "20px"：星の大きさ

rating: 5：星の黄色部分。小数点でも可能。

halfStar: true：小数点を有効にした。

readOnly: true：デフォルトは入力用なので、表示専用にした。

 

これだけで星の表示はできたかと思います。

 

小数点への対応

rateYoだと星の画像を使わなくても小数点に対応してくれているため、オプションに数値を設定するだけで大丈夫です。

 

さて、続いてrateYoのオプションであるratingに、それぞれのスクールの平均点を算出したものを代入しなければなりません。


これは、dataタグを使えばできます。

HTMLを以下のように書き換えましょう。

<div id="rateYo" data-star="<%= ここに平均数値を入れる　%>"></div>

平均点の数値は、私の場合はスクールの評価の平均を計算したものをrubyで書いています。

 

JSは以下のように書き換えます。

$(function () {
  $('#rateYo).rateYo({
    starWidth: "20px",
    rating: Number($("#rateYo").data('star')),
    halfStar: true,
    readOnly: true
  });
});

 

これでオプションratingの数値を動的に変えることができます。

 

複数の五段階評価を表示する

続いて、複数の五段階評価を表示する対応です。
今までの実装だと、画面に一つ分しか五段階評価が表示されないと思います。

これは、idタグは画面に一つまでと決まっているので、複数のid="rateYo"を設定してもうまく動かないためです。
classでも動きません。それぞれのスクールに一意のidをつけてあげる必要があります。

HTMLを以下のように書き換えましょう。

 

hiddenなどで配列を作成します。

<%= hidden_field_tag 'school_array', @schools.pluck(:id) %>

<% @schools.each do |school|%>

　　<div id="rateYo-<%= school.id %>" data-star="<%= ここに平均数値を入れる　%>"></div>

<% end %>

 

JSは以下のように書き換えます。

school_array = $('#school_array').val().split(' ');

$.each(school_array, function(index, value) {
  $(function () {
    $('#rateYo-' + value).rateYo({
      starWidth: "20px",
      rating: Number($("#rateYo-" + value).data('star')),
      halfStar: true,
      readOnly: true
   });
  });
})

hiddenで作成したスクールIDの配列を、
school_array = $('#school_array').val().split(' ');
で受け取って配列にし、jQueryのeach文で回して表示しています。

 

完成したコード

application.html.erb

 
<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">

 

<!-- Latest compiled and minified JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

 

HTML

<%= hidden_field_tag 'school_array', @schools.pluck(:id) %>

<% @schools.each do |school|%>

　　<div id="rateYo-<%= school.id %>" data-star="<%= ここに平均数値を入れる　%>"></div>

<% end %>

JS 

school_array = $('#school_array').val().split(' ');

$.each(school_array, function(index, value) {
  $(function () {
    $('#rateYo-' + value).rateYo({
      starWidth: "20px",
      rating: Number($("#rateYo-" + value).data('star')),
      halfStar: true,
      readOnly: true
   });
  });
})

 

走り書きですが、これで「複数の小数点に対応した五段階評価の星」が実装できます！
ここまで読んでくださりありがとうございました！

 

 Escolaは、プログラミングスクールのクチコミが集まっているサイトです！
スクールを検討している方も、卒業された方もぜひご覧ください！

www.escola-pro.com