5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

クービックAdvent Calendar 2015

Day 14

レビューの★の数のちょっとした計算

Posted at

あらまし

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

補足: font awesome の★

言葉で説明するのはちょっと大変なので下記の画像をみていただきたく。1
スクリーンショット 2015-12-14 11.52.57.png

課題

  • レビューの値が 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
  1. https://fortawesome.github.io/Font-Awesome/icons/

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?