Ruby on Rails 【jQuery Raty】Rails6.0でレビュー機能を実装する


投稿日:2020年10月03日 (土)
Bulmaでレビュー機能を実装する場合、yarnを利用して以下のように「raty-js」をインストールします。
yarn add raty-js

そして「application.scss」ファイルに以下の記述を追加します。
@import 'raty-js/lib/jquery.raty';

その後「app\javascript\packs\application.js」ファイルに以下の記述を追加する流れになります。
require("raty-js")

これは当サイトのプロジェクト「民泊サイトの構築Rails6.0」で詳しく解説していますので参考にしてください。

しかしBootstrapで実装しようとすると「@import 'raty-js/lib/jquery.raty';」とした時点で型くずれを起こしてしまいます。
そこでRalis6.0でBootstrapを利用してレビュー機能を実装する場合はyarnを利用しないで「jQuery Raty」を実装すると良いです。

「app\assets」フォルダに「javascripts」フォルダを新規作成します。
作成した「javascripts」フォルダに「jquery.raty.js」ファイルを新規作成します。


app\assets\javascripts\jquery.raty.js(新規作成したファイル)
/*!
 * jQuery Raty - A Star Rating Plugin
 *
 * The MIT License
 *
 * author:  Washington Botelho
 * github:  wbotelhos/raty
 * version: 2.9.0
 *
 */
(function($) {
    'use strict';
  
    var methods = {
      init: function(options) {
        return this.each(function() {
          this.self = $(this);
  
          methods.destroy.call(this.self);
  
          this.opt = $.extend(true, {}, $.fn.raty.defaults, options, this.self.data());
  
          methods._adjustCallback.call(this);
          methods._adjustNumber.call(this);
          methods._adjustHints.call(this);
  
          this.opt.score = methods._adjustedScore.call(this, this.opt.score);
  
          if (this.opt.starType !== 'img') {
            methods._adjustStarType.call(this);
          }
  
          methods._adjustPath.call(this);
          methods._createStars.call(this);
  
          if (this.opt.cancel) {
            methods._createCancel.call(this);
          }
  
          if (this.opt.precision) {
            methods._adjustPrecision.call(this);
          }
  
          methods._createScore.call(this);
          methods._apply.call(this, this.opt.score);
          methods._setTitle.call(this, this.opt.score);
          methods._target.call(this, this.opt.score);
  
          if (this.opt.readOnly) {
            methods._lock.call(this);
          } else {
            this.style.cursor = 'pointer';
  
            methods._binds.call(this);
          }
        });
      },
  
      _adjustCallback: function() {
        var options = ['number', 'readOnly', 'score', 'scoreName', 'target', 'path'];
  
        for (var i = 0; i < options.length; i++) {
          if (typeof this.opt[options[i]] === 'function') {
            this.opt[options[i]] = this.opt[options[i]].call(this);
          }
        }
      },
  
      _adjustedScore: function(score) {
        if (!score) {
          return score;
        }
  
        return methods._between(score, 0, this.opt.number);
      },
  
      _adjustHints: function() {
        if (!this.opt.hints) {
          this.opt.hints = [];
        }
  
        if (!this.opt.halfShow && !this.opt.half) {
          return;
        }
  
        var steps = this.opt.precision ? 10 : 2;
  
        for (var i = 0; i < this.opt.number; i++) {
          var group = this.opt.hints[i];
  
          if (Object.prototype.toString.call(group) !== '[object Array]') {
            group = [group];
          }
  
          this.opt.hints[i] = [];
  
          for (var j = 0; j < steps; j++) {
            var
              hint = group[j],
              last = group[group.length - 1];
  
            if (last === undefined) {
              last = null;
            }
  
            this.opt.hints[i][j] = hint === undefined ? last : hint;
          }
        }
      },
  
      _adjustNumber: function() {
        this.opt.number = methods._between(this.opt.number, 1, this.opt.numberMax);
      },
  
      _adjustPath: function() {
        this.opt.path = this.opt.path || '';
  
        if (this.opt.path && this.opt.path.charAt(this.opt.path.length - 1) !== '/') {
          this.opt.path += '/';
        }
      },
  
      _adjustPrecision: function() {
        this.opt.half = true;
      },
  
      _adjustStarType: function() {
        var replaces = ['cancelOff', 'cancelOn', 'starHalf', 'starOff', 'starOn'];
  
        this.opt.path = '';
  
        for (var i = 0; i < replaces.length; i++) {
          this.opt[replaces[i]] = this.opt[replaces[i]].replace('.', '-');
        }
      },
  
      _apply: function(score) {
        methods._fill.call(this, score);
  
        if (score) {
          if (score > 0) {
            this.score.val(score);
          }
  
          methods._roundStars.call(this, score);
        }
      },
  
      _between: function(value, min, max) {
        return Math.min(Math.max(parseFloat(value), min), max);
      },
  
      _binds: function() {
        if (this.cancel) {
          methods._bindOverCancel.call(this);
          methods._bindClickCancel.call(this);
          methods._bindOutCancel.call(this);
        }
  
        methods._bindOver.call(this);
        methods._bindClick.call(this);
        methods._bindOut.call(this);
      },
  
      _bindClick: function() {
        var that = this;
  
        that.stars.on('click.raty', function(evt) {
          var
            execute = true,
            score   = (that.opt.half || that.opt.precision) ? that.self.data('score') : (this.alt || $(this).data('alt'));
  
          if (that.opt.click) {
            execute = that.opt.click.call(that, +score, evt);
          }
  
          if (execute || execute === undefined) {
            if (that.opt.half && !that.opt.precision) {
              score = methods._roundHalfScore.call(that, score);
            }
  
            methods._apply.call(that, score);
          }
        });
      },
  
      _bindClickCancel: function() {
        var that = this;
  
        that.cancel.on('click.raty', function(evt) {
          that.score.removeAttr('value');
  
          if (that.opt.click) {
            that.opt.click.call(that, null, evt);
          }
        });
      },
  
      _bindOut: function() {
        var that = this;
  
        that.self.on('mouseleave.raty', function(evt) {
          var score = +that.score.val() || undefined;
  
          methods._apply.call(that, score);
          methods._target.call(that, score, evt);
          methods._resetTitle.call(that);
  
          if (that.opt.mouseout) {
            that.opt.mouseout.call(that, score, evt);
          }
        });
      },
  
      _bindOutCancel: function() {
        var that = this;
  
        that.cancel.on('mouseleave.raty', function(evt) {
          var icon = that.opt.cancelOff;
  
          if (that.opt.starType !== 'img') {
            icon = that.opt.cancelClass + ' ' + icon;
          }
  
          methods._setIcon.call(that, this, icon);
  
          if (that.opt.mouseout) {
            var score = +that.score.val() || undefined;
  
            that.opt.mouseout.call(that, score, evt);
          }
        });
      },
  
      _bindOver: function() {
        var
          that   = this,
          action = that.opt.half ? 'mousemove.raty' : 'mouseover.raty';
  
        that.stars.on(action, function(evt) {
          var score = methods._getScoreByPosition.call(that, evt, this);
  
          methods._fill.call(that, score);
  
          if (that.opt.half) {
            methods._roundStars.call(that, score, evt);
            methods._setTitle.call(that, score, evt);
  
            that.self.data('score', score);
          }
  
          methods._target.call(that, score, evt);
  
          if (that.opt.mouseover) {
            that.opt.mouseover.call(that, score, evt);
          }
        });
      },
  
      _bindOverCancel: function() {
        var that = this;
  
        that.cancel.on('mouseover.raty', function(evt) {
          var
            starOff = that.opt.path + that.opt.starOff,
            icon    = that.opt.cancelOn;
  
          if (that.opt.starType === 'img') {
            that.stars.attr('src', starOff);
          } else {
            icon = that.opt.cancelClass + ' ' + icon;
  
            that.stars.attr('class', starOff);
          }
  
          methods._setIcon.call(that, this, icon);
          methods._target.call(that, null, evt);
  
          if (that.opt.mouseover) {
            that.opt.mouseover.call(that, null);
          }
        });
      },
  
      _buildScoreField: function() {
        return $('<input />', { name: this.opt.scoreName, type: 'hidden' }).appendTo(this);
      },
  
      _createCancel: function() {
        var
          icon   = this.opt.path + this.opt.cancelOff,
          cancel = $('<' + this.opt.starType + ' />', { title: this.opt.cancelHint, 'class': this.opt.cancelClass });
  
        if (this.opt.starType === 'img') {
          cancel.attr({ src: icon, alt: 'x' });
        } else {
          // TODO: use $.data
          cancel.attr('data-alt', 'x').addClass(icon);
        }
  
        if (this.opt.cancelPlace === 'left') {
          this.self.prepend('&#160;').prepend(cancel);
        } else {
          this.self.append('&#160;').append(cancel);
        }
  
        this.cancel = cancel;
      },
  
      _createScore: function() {
        var score = $(this.opt.targetScore);
  
        this.score = score.length ? score : methods._buildScoreField.call(this);
      },
  
      _createStars: function() {
        for (var i = 1; i <= this.opt.number; i++) {
          var
            name  = methods._nameForIndex.call(this, i),
            attrs = { alt: i, src: this.opt.path + this.opt[name] };
  
          if (this.opt.starType !== 'img') {
            attrs = { 'data-alt': i, 'class': attrs.src }; // TODO: use $.data.
          }
  
          attrs.title = methods._getHint.call(this, i);
  
          $('<' + this.opt.starType + ' />', attrs).appendTo(this);
  
          if (this.opt.space) {
            this.self.append(i < this.opt.number ? '&#160;' : '');
          }
        }
  
        this.stars = this.self.children(this.opt.starType);
      },
  
      _error: function(message) {
        $(this).text(message);
  
        $.error(message);
      },
  
      _fill: function(score) {
        var hash = 0;
  
        for (var i = 1; i <= this.stars.length; i++) {
          var
            icon,
            star   = this.stars[i - 1],
            turnOn = methods._turnOn.call(this, i, score);
  
          if (this.opt.iconRange && this.opt.iconRange.length > hash) {
            var irange = this.opt.iconRange[hash];
  
            icon = methods._getRangeIcon.call(this, irange, turnOn);
  
            if (i <= irange.range) {
              methods._setIcon.call(this, star, icon);
            }
  
            if (i === irange.range) {
              hash++;
            }
          } else {
            icon = this.opt[turnOn ? 'starOn' : 'starOff'];
  
            methods._setIcon.call(this, star, icon);
          }
        }
      },
  
      _getFirstDecimal: function(number) {
        var
          decimal = number.toString().split('.')[1],
          result  = 0;
  
        if (decimal) {
          result = parseInt(decimal.charAt(0), 10);
  
          if (decimal.slice(1, 5) === '9999') {
            result++;
          }
        }
  
        return result;
      },
  
      _getRangeIcon: function(irange, turnOn) {
        return turnOn ? irange.on || this.opt.starOn : irange.off || this.opt.starOff;
      },
  
      _getScoreByPosition: function(evt, icon) {
        var score = parseInt(icon.alt || icon.getAttribute('data-alt'), 10);
  
        if (this.opt.half) {
          var
            size    = methods._getWidth.call(this),
            percent = parseFloat((evt.pageX - $(icon).offset().left) / size);
  
          score = score - 1 + percent;
        }
  
        return score;
      },
  
      _getHint: function(score, evt) {
        if (score !== 0 && !score) {
          return this.opt.noRatedMsg;
        }
  
        var
          decimal = methods._getFirstDecimal.call(this, score),
          integer = Math.ceil(score),
          group   = this.opt.hints[(integer || 1) - 1],
          hint    = group,
          set     = !evt || this.move;
  
        if (this.opt.precision) {
          if (set) {
            decimal = decimal === 0 ? 9 : decimal - 1;
          }
  
          hint = group[decimal];
        } else if (this.opt.halfShow || this.opt.half) {
          decimal = set && decimal === 0 ? 1 : decimal > 5 ? 1 : 0;
  
          hint = group[decimal];
        }
  
        return hint === '' ? '' : hint || score;
      },
  
      _getWidth: function() {
        var width = this.stars[0].width || parseFloat(this.stars.eq(0).css('font-size'));
  
        if (!width) {
          methods._error.call(this, 'Could not get the icon width!');
        }
  
        return width;
      },
  
      _lock: function() {
        var hint = methods._getHint.call(this, this.score.val());
  
        this.style.cursor = '';
        this.title        = hint;
  
        this.score.prop('readonly', true);
        this.stars.prop('title', hint);
  
        if (this.cancel) {
          this.cancel.hide();
        }
  
        this.self.data('readonly', true);
      },
  
      _nameForIndex: function(i) {
        return this.opt.score && this.opt.score >= i ? 'starOn' : 'starOff';
      },
  
      _resetTitle: function() {
        for (var i = 0; i < this.opt.number; i++) {
          this.stars[i].title = methods._getHint.call(this, i + 1);
        }
      },
  
      _roundHalfScore: function(score) {
        var
          integer = parseInt(score, 10),
          decimal = methods._getFirstDecimal.call(this, score);
  
        if (decimal !== 0) {
          decimal = decimal > 5 ? 1 : 0.5;
        }
  
        return integer + decimal;
      },
  
      _roundStars: function(score, evt) {
        var
          decimal = (score % 1).toFixed(2),
          name ;
  
        if (evt || this.move) {
          name = decimal > 0.5 ? 'starOn' : 'starHalf';
        } else if (decimal > this.opt.round.down) { // Up: [x.76 .. x.99]
          name = 'starOn';
  
          if (this.opt.halfShow && decimal < this.opt.round.up) { // Half: [x.26 .. x.75]
            name = 'starHalf';
          } else if (decimal < this.opt.round.full) { // Down: [x.00 .. x.5]
            name = 'starOff';
          }
        }
  
        if (name) {
          var
            icon = this.opt[name],
            star = this.stars[Math.ceil(score) - 1];
  
          methods._setIcon.call(this, star, icon);
        } // Full down: [x.00 .. x.25]
      },
  
      _setIcon: function(star, icon) {
        star[this.opt.starType === 'img' ? 'src' : 'className'] = this.opt.path + icon;
      },
  
      _setTarget: function(target, score) {
        if (score) {
          score = this.opt.targetFormat.toString().replace('{score}', score);
        }
  
        if (target.is(':input')) {
          target.val(score);
        } else {
          target.html(score);
        }
      },
  
      _setTitle: function(score, evt) {
        if (score) {
          var
            integer = parseInt(Math.ceil(score), 10),
            star    = this.stars[integer - 1];
  
          star.title = methods._getHint.call(this, score, evt);
        }
      },
  
      _target: function(score, evt) {
        if (this.opt.target) {
          var target = $(this.opt.target);
  
          if (!target.length) {
            methods._error.call(this, 'Target selector invalid or missing!');
          }
  
          var mouseover = evt && evt.type === 'mouseover';
  
          if (score === undefined) {
            score = this.opt.targetText;
          } else if (score === null) {
            score = mouseover ? this.opt.cancelHint : this.opt.targetText;
          } else {
            if (this.opt.targetType === 'hint') {
              score = methods._getHint.call(this, score, evt);
            } else if (this.opt.precision) {
              score = parseFloat(score).toFixed(1);
            }
  
            var mousemove = evt && evt.type === 'mousemove';
  
            if (!mouseover && !mousemove && !this.opt.targetKeep) {
              score = this.opt.targetText;
            }
          }
  
          methods._setTarget.call(this, target, score);
        }
      },
  
      _turnOn: function(i, score) {
        return this.opt.single ? (i === score) : (i <= score);
      },
  
      _unlock: function() {
        this.style.cursor = 'pointer';
        this.removeAttribute('title');
  
        this.score.removeAttr('readonly');
  
        this.self.data('readonly', false);
  
        for (var i = 0; i < this.opt.number; i++) {
          this.stars[i].title = methods._getHint.call(this, i + 1);
        }
  
        if (this.cancel) {
          this.cancel.css('display', '');
        }
      },
  
      cancel: function(click) {
        return this.each(function() {
          var self = $(this);
  
          if (self.data('readonly') !== true) {
            methods[click ? 'click' : 'score'].call(self, null);
  
            this.score.removeAttr('value');
          }
        });
      },
  
      click: function(score) {
        return this.each(function() {
          if ($(this).data('readonly') !== true) {
            score = methods._adjustedScore.call(this, score);
  
            methods._apply.call(this, score);
  
            if (this.opt.click) {
              this.opt.click.call(this, score, $.Event('click'));
            }
  
            methods._target.call(this, score);
          }
        });
      },
  
      destroy: function() {
        return this.each(function() {
          var
            self = $(this),
            raw  = self.data('raw');
  
          if (raw) {
            self.off('.raty').empty().css({ cursor: raw.style.cursor }).removeData('readonly');
          } else {
            self.data('raw', self.clone()[0]);
          }
        });
      },
  
      getScore: function() {
        var
          score = [],
          value ;
  
        this.each(function() {
          value = this.score.val();
  
          score.push(value ? +value : undefined);
        });
  
        return (score.length > 1) ? score : score[0];
      },
  
      move: function(score) {
        return this.each(function() {
          var
            integer  = parseInt(score, 10),
            decimal  = methods._getFirstDecimal.call(this, score);
  
          if (integer >= this.opt.number) {
            integer = this.opt.number - 1;
            decimal = 10;
          }
  
          var
            width   = methods._getWidth.call(this),
            steps   = width / 10,
            star    = $(this.stars[integer]),
            percent = star.offset().left + steps * decimal,
            evt     = $.Event('mousemove', { pageX: percent });
  
          this.move = true;
  
          star.trigger(evt);
  
          this.move = false;
        });
      },
  
      readOnly: function(readonly) {
        return this.each(function() {
          var self = $(this);
  
          if (self.data('readonly') !== readonly) {
            if (readonly) {
              self.off('.raty').children(this.opt.starType).off('.raty');
  
              methods._lock.call(this);
            } else {
              methods._binds.call(this);
              methods._unlock.call(this);
            }
  
            self.data('readonly', readonly);
          }
        });
      },
  
      reload: function() {
        return methods.set.call(this, {});
      },
  
      score: function() {
        var self = $(this);
  
        return arguments.length ? methods.setScore.apply(self, arguments) : methods.getScore.call(self);
      },
  
      set: function(options) {
        return this.each(function() {
          $(this).raty($.extend({}, this.opt, options));
        });
      },
  
      setScore: function(score) {
        return this.each(function() {
          if ($(this).data('readonly') !== true) {
            score = methods._adjustedScore.call(this, score);
  
            methods._apply.call(this, score);
            methods._target.call(this, score);
          }
        });
      }
    };
  
    $.fn.raty = function(method) {
      if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
      } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
      } else {
        $.error('Method ' + method + ' does not exist!');
      }
    };
  
    $.fn.raty.defaults = {
      cancel:       false,
      cancelClass:  'raty-cancel',
      cancelHint:   'Cancel this rating!',
      cancelOff:    'cancel-off.png',
      cancelOn:     'cancel-on.png',
      cancelPlace:  'left',
      click:        undefined,
      half:         false,
      halfShow:     true,
      hints:        ['bad', 'poor', 'regular', 'good', 'gorgeous'],
      iconRange:    undefined,
      mouseout:     undefined,
      mouseover:    undefined,
      noRatedMsg:   'Not rated yet!',
      number:       5,
      numberMax:    20,
      path:         undefined,
      precision:    false,
      readOnly:     false,
      round:        { down: 0.25, full: 0.6, up: 0.76 },
      score:        undefined,
      scoreName:    'score',
      single:       false,
      space:        true,
      starHalf:     'star-half.png',
      starOff:      'star-off.png',
      starOn:       'star-on.png',
      starType:     'img',
      target:       undefined,
      targetFormat: '{score}',
      targetKeep:   false,
      targetScore:  undefined,
      targetText:   '',
      targetType:   'hint'
    };
  })(jQuery);


星の画像が必要です。
「star-off.png」「star-on.png」「star-half.png」ファイルを「app\assets\images」フォルダにコピーして下さい。




実際にはモデル、コントローラ、ルートの設定が必要になります。
当サイトのプロジェクトではレビューの実装方法を詳しく解説していますので参考にしてください。



実装すると以下のようなことができます。

レビューボタンをクリックします。
レビューボタンをクリック.png 160KB



モダールが開き、星をつけてレビューを書きます。

レビュー投稿.png 185KB



レビューがテーブルに格納されます。

テーブル確認.png 90.6KB





Rails6.0 Windows MacOSX

動画学習サイトの構築 Rails6.0

  0 (0)

タスク   128

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

民泊サイトの構築 Rails6.0

  0 (0)

タスク   128

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

動画学習サイトの構築 Rails5.0

  0 (0)

タスク   100

1,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

お仕事売買サイトの構築 Rails6.0

  0 (0)

タスク   146

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

民泊サイトの構築 Rails5.0

  0 (0)

タスク   136

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。