アイコンを作成する

追加したオピニオンカウンターのビューを実装していきましょう。今回は、以下のようにアイコン付きのデザインにします。

アイコンにFontAwesomeを使う

こういったアイコンは、自分で作成したり素材画像をダウンロードして使用する事も出来ますが、もっと簡単な方法があります。FontAwesomeを使用する方法です。

FontAwesomeとは、Webアイコンフォント提供サービスです。Webアイコンフォントとは、画像ではなく文字（フォント）であるアイコンの事です。通常の文字と同じように扱えるので、cssで色やサイズを変える事が可能となります。

https://fontawesome.com/v4.7.0/icons/

通常のサイトだと、HTMLにFontAwesomeを読み込むための記述を追加して利用する、CDNと呼ばれる方法で使われることが多いかと思います。

ですが、Railsアプリの場合FontAwesome Gemというものがあるので、今回はそちらを使用します。

FontAwesome Gemを導入する

FontAwesome Gemをインストールしましょう。まず、Gemfileに以下を追加して下さい。

# Gemfile

gem 'font-awesome-rails'

次に、application.cssにFontAwesomeのcssを読み込むように記述を追加します。

# app/assets/stylesheet/application.css

*= require font-awesome
*= require_tree .
*= require_self

最後に、bundle installを実行します。これで、FontAwesomeが使用できるようになりました。

# ターミナル

$ bundle install

※Gemをインストールしたあと、反映させるにはサーバーの再起動が必要です

ビューを設定する

FontAwesomeを使って、オピニオンカウンターのビューを設定していきます。まず、アイコンの使い方について学びましょう。FontAwesomeで提供されているアイコン一覧の確認・検索は、以下公式サイトで行います。

https://fontawesome.com/v4.7.0/icons/

この中から使用したいアイコンを選び、アイコン名を確認します。今回は、usersというアイコンなどを使います。

あとは、ビューでアイコン名を指定するだけでアイコンが表示できます。書き方は、fa_icon 'アイコン名'という形です。では、アイコンとカウンター表示の記述をshow.html.erbに書いてみましょう。

# show.html.erb

<p><%= @clip.description %></p>  
<%= fa_icon 'bookmark 2x', style: "color: orange" %>
<%= @clip.user_clips_count %>クリップ
<%= fa_icon 'users 2x', style: "color: orange" %>
<%= @clip.opinions_count %>オピニオン

本来、アイコンを使う場合にはというようにiタグで書かなければなりません。しかし、Gemのインストールによって上記のようにerb記法で書くことが出来るようになっています。

また、アイコン名の後の2xというのはアイコンサイズの指定です。FontAwesomeでは、lg～5xの５つのサイズ用のクラスが用意されています。

これで、以下のようにアイコン付きでオピニオン数を表示させることが出来ました。

課題

他のページにもアイコン付きでカウントを表示させましょう。home/index.html.erbとclips/index.html.erbに追加してみて下さい。