オピニオンの詳細画面

完成イメージ

オピニオン詳細画面の完成イメージは以下になります。レイアウトは、２カラムで構成します。右にはサイドバーがあり、オピニオン一覧が表示されています。また、画面上部にあるようなパンくずリストも追加します。Bootstrapを活用して、素早くこのようなレイアウト・デザインを作り上げます。では、実際に作成していきましょう。

パンくずリスト

パンくずリストとは、アプリ内のどのページに自分がいるのかを表すものです。以下のように、ページ階層順に表示されておりページ名はテキストリンクになっています。

では、パンくずリストを実装していきましょう。今回は、olタグと組み合わせて記述します。opinions/show.html.erbに以下を参考に追加して下さい。

# opinions/show.html.erb

<ol class="breadcrumb mt-4">
  <li class="breadcrumb-item">
    <%= link_to "クリップ一覧", clips_url %></li>
  <li class="breadcrumb-item">
    <%= link_to @clip.title.truncate(25), @clip %></li>
</ol>

breadcrumbやbreadcrumb-itemは、Bootstrapのパンくずリスト用cssクラスです。また、truncateメソッドで長すぎるタイトルは省略して表示するようにしています。

https://getbootstrap.com/docs/4.1/components/breadcrumb/

これで、パンくずリストを実装する事が出来ました。

2カラムの作成

レイアウトを２カラムに変更しましょう。左にはメインコンテンツ、右にはサイドメニューを配置します。

これは、Bootstrapのグリッドシステムを使えば簡単に実装する事が出来ます。opinions/show.html.erbを開いて、以下のように変更して下さい。

# opinions/show.html.erb

<div class="row">
  <div class="col-md-8">

  </div>
  <div class="col-md-4">

  </div>
</div>>

シンプルフォーマット

「フォームで折返しなども入れたはずなのに反映されてない！」ってことがありますよね。これはRailsのデフォルトでは改行無しの文字として表示するようになっているからなんですね。こんな時にシンプルフォーマット（simple_format）を使うと便利です。

シンプルフォーマットとは、Railsに備わっているビューの為のヘルパーメソッドです。これは、改行等をタグに変換して表示する為に使用します。

使い方は以下のように、適用したい要素の前に記述するだけでOKです。

<%= simple_format @opinion.body %>

全体のコードも載せておきます。

# opinions/show.html.erb

<div class="row">
  <div class="col-md-8">
    <h1><%= @opinion.title %></h1>
    <%= simple_format @opinion.body %>    
  </div>
  <div class="col-md-4">
  </div>
</div>

サイドバーコントローラの設定

サイドバーには、オピニオン一覧を表示します。その為に、コントローラのshowでオピニオン一覧取得の記述を追加しておきましょう。

# opinions_controller.rb#show

def show
  @clip = @opinion.clip
  @opinions = @clip.opinions
end

課題1

clips/show.html.erbも以下のように２カラムのデザインしましょう。右にはオピニオンの多い順に8件が並ぶようにします。

課題2

以下の作業を行いHerokuにデプロイしましょう。

$ git add . 
$ git commit -m "Fix opinion detail"
$ git checkout master
$ git merge opinion-detail
$ git push
$ git push heroku master
$ heroku run rails db:migrate

まとめ

このコースでは、オピニオンを中心とした仕上げの作業を行いました。

クリップのオピニオンカウンター追加

アイコンを作成する

truncate機能を使う

メッセージやDeviseの日本語化

クリップの詳細画面作成

オピニオンカウンターの追加を通して、counter_cacheの使い方やデータベースについて学びました。

また、truncateメソッドやFont Awesomeを使用してレイアウトやデザインを行いました。