Ruby on RailsでWebサイト公開！に挑戦中

ユーザープロファイルページにマイクロポストを表示するように変更します。

以下、「Ruby on Rails Tutorial」の１０章を参考に行います。
参考資料ページの６．参照

●ユーザープロファイルページにマイクロポスト表示

・ユーザープロファイルページの右サイト（<div class="span8">）部分にマイクロポストを表示します。

・class="microposts"を指定し、スタイルシートでスタイルを設定します。

・マイクロポスト数が多い場合に備え、ページ化します。

・実際のマイクロポスト部分はパーシャルにして、"render @microposts"で_micropost.html.erbを埋め込みます。

$ vi app/views/users/show.html.erb

<% provide(:title, @user.name) %>
<div class="row-fluid">
  <div class="span4">
    <h3><%= @user.name %></h3>
    左サイドバーには、ユーザーのプロファイル情報の概要を表示します。
  </div>
  <div class="span8">
    <% if @user.microposts.any? %>
      <h3>マイクロポスト (<%= @user.microposts.count %>)</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
</div>

●マイクロポストパーシャルを作成

・スタイルシートで設定するため、"content"、"timestamp"クラスを指定しています。

$ vi app/views/microposts/_micropost.html.erb

<li>
  <span class="content"><%= micropost.content %></span>
  <span class="timestamp">
    投稿日 <%= time_ago_in_words(micropost.created_at) %> 前
  </span>
</li>

●Userモデルのshowアクションに@micropostsインスタンス変数の設定を追加

$ vi app/controllers/users_controller.rb

  def show
    @user = User.find(params[:id])
    @microposts = @user.microposts.paginate(page: params[:page], :per_page => 5)
  end

●スタイルシートの設定

$ vi app/assets/stylesheets/custom.css.scss

/* microposts */

.microposts {
  list-style: none;
  margin: 10px 0 0 0;

  li {
    padding: 10px 0;
    border-top: 1px solid #e8e8e8;
  }
}
.content {
  display: block;
}
.timestamp {
  color: $grayLight;
}

・マイクロポストのリストの行頭文字は表示しない。
list-style: none;

・投稿のコンテンツとタイムスタンプを同じ行にせず、改行させるため"content"を下記のように指定します。
display: block;

●動作確認

１）Railsコンソールでマイクロポスト登録

$ rails console

2.0.0p247 :007 > micropost = Micropost.new(content: "テスト１", user_id: 10)
2.0.0p247 :008 > micropost.save
　　　：

２）ブラウザで表示確認

該当ユーザーのマイクロポストがユーザープロファイルページのメイン部にページ化されて表示されることを確認しました。