[Rails]Viewでカテゴリーを色分けする方法

概要

カテゴリーを作成し、日本語でカテゴリーを作っていた場合にviewのclassを付与して色分けをしたいと思ったため、
そのやり方を説明します。

かなりクソコードですので、他にもっといい方法を教えてください！

付与するクラスにbackgrond-colorを指定します。

category.scss

#色は適当です。
.business{
  background-color: #cc0000;
}
.medicine{
  background-color: #ccffff;
}
.nature{
  background-color: #34ce57;
}
.culture{
  background-color: #BBBBBB;
}
.art{
  background-color: #ff66ff;
}
.person{
  background-color: #f5f5dc;
}
.social{
  background-color: #333333;
}
.novel{
  background-color: #cc6600;
}
.computer{
  background-color: #9caeb7;
}
.test{
  background-color: #fdf5e6;
}
.nocategory{
  background-color: lightgoldenrodyellow;
}

上記のcssを当てる条件分岐のhelperを作成します。

reviews_helper.rb

module ReviewsHelper
  def translation_class_name(name)
    if name == "カテゴリーなし"
      name.gsub(name,"nocategory")
    elsif name == "コンピュータ"
      name.gsub(name,"computer")
    elsif name == "ビジネス"
      name.gsub(name,"business")
    elsif name == "医学・心理学"
      name.gsub(name,"medicine")
    elsif name == "生物・自然"
      name.gsub(name,"nature")
    elsif name == "教養・雑学"
      name.gsub(name,"culture")
    elsif name == "アート・スポーツ"
      name.gsub(name,"art")
    elsif name == "人物"
      name.gsub(name,"person")
    elsif name == "社会"
      name.gsub(name,"social")
    elsif name == "小説・文庫"
      name.gsub(name,"novel")
    elsif name == "コンピュータ"
      name.gsub(name,"computer")
    elsif name == "資格・試験"
      name.gsub(name,"test")
    end
  end
end

viewで作成したhelperを読み込みます。

index.html.haml

- @books.each do | book |
.card-head{class:"#{translation_class_name(book.category.name)}"} 

translation_class_nameの引数にbook.category.nameを渡し、gsubを使って文字列を置換しviewに表示することができます。

以上

かなりのクソコードですが、card-headにclassを動的に付与することで、色分けをすることができるようになります。