あらまし

レビュー機能がサイトにあると、みんながレビューした評価を★の形で表現したい、ということがあるかとおもうのですが、その時の★の表示を例えば font awesome などで実施すると、100% の横幅の★と 50% の横幅の★しかなく、ちょっと頭をひねる必要があります。(画像で★作る時も同じような問題がでますが。)

補足: font awesome の★

言葉で説明するのはちょっと大変なので下記の画像をみていただきたく。¹

課題

レビューの値が 3.8 や 3.1 だった
しかし、使えるアイコンは 3.5 や 4.0 のものしかない

解決のアプローチ

レビューの値を標準化する

3.8 や 3.1 といったレビューの値を 3.0 や 3.5 にいい感じに寄せます。

(レビューの総得点.to_f/レビューの件数.to_f * 2).round/2.to_f

実行結果

★の標準化(18, 4) // 4.5
=> 4.5

★の標準化(17, 4) // 4.25
=> 4.5

★の標準化(13, 4) // 3.25
=> 3.5

★の標準化(15, 4) // 3.75
=> 4.0

★を font awesome を使って描きます

rating には前述した標準化された値を入れます。(0.5 で割り切れることを保証)
レビューは 5 段階評価という前提です。(5 - rating.ceil のところを書き換えれば任意に変更できるかと思います。)

  def draw_stars(rating)
    content_tag :span do
      rating.floor.times do
        concat content_tag :i, nil, class: 'fa fa-star'
      end

      if rating % 1 != 0
        concat content_tag :i, nil, class: 'fa fa-star-half-o'
      end

      (5 - rating.ceil).times do
        concat content_tag :i, nil, class: 'fa fa-star-o'
      end
    end
  end

https://fortawesome.github.io/Font-Awesome/icons/ ↩