【149日目】【1日20分のRailsチュートリアル】【第11章】マイクロポストのビューを追加する
今日は「11.2.1 マイクロポストの描画」から。
11.2.1 マイクロポストの描画
この項では、ユーザーのプロフィール画面 (show.html.erb) でそのユーザーのマイクロポストを表示させ、また、これまでに投稿した総数も表示するようにしていきます。
ふむふむ。Twitterのプロフィール画面のイメージかな。
まずは、Micropostのコントローラとビューを作成するために、コントローラを生成しましょう。
生成しましょう。
$ rails generate controller Microposts create app/controllers/microposts_controller.rb invoke erb create app/views/microposts invoke test_unit create test/controllers/microposts_controller_test.rb invoke helper create app/helpers/microposts_helper.rb invoke test_unit invoke assets invoke coffee create app/assets/javascripts/microposts.coffee invoke scss create app/assets/stylesheets/microposts.scss
user.html.erbパーシャルと同じようにmicropost.html.erbパーシャルを定義してマイクロポストを表示するようにする。
パーシャル定義しようとしたらファイルがなかったので作成しておく。
$ touch app/views/microposts/_micropost.html.erb
app/views/microposts/_micropost.html.erb
<li id="micropost-<%= micropost.id %>"> <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %> <span class="user"><%= link_to micropost.user.name, micropost.user %></span> <span class="content"><%= micropost.content %></span> <span class="timestamp"> Posted <%= time_ago_in_words(micropost.created_at) %> ago. </span> </li>
今回の場合は、ユーザーコントローラのコンテキストにおいて、マイクロポストをページネーションしたいため、明示的に@microposts変数を will_paginateに渡す必要があります。
will_paginateについての説明が全くピンと来てないけど明示的に変数を渡す必要があるのは分かった。
チュートリアルのコードにはredirect_toの行のコードがないけどとりあえず下に@microposts変数追加しといた。
app/controllers/users_controller.rb
def show @user = User.find(params[:id]) redirect_to root_url and return unless @user.activated? @microposts = @user.microposts.paginate(page: params[:page]) end
これですべての要素が揃ったので、プロフィール画面にマイクロポストを表示させてみましょう (リスト11.23)。
マイクロポストの投稿数はuser.microposts.countで取得できて、それなりに高速らしい。いいね!
アイコンの表示の下にマイクロポストを表示させるようにコードを追加。
app/views/users/show.html.erb
<div class="col-md-8"> <% if @user.microposts.any? %> <h3>Microposts (<%= @user.microposts.count %>)</h3> <ol class="microposts"> <%= render @microposts %> </ol> <%= will_paginate @microposts %> <% end %> </div>
ここで、改良した新しいプロフィール画面をブラウザで見てみましょう (図11.5)。
…何とも寂しいページで、がっかりですね。マイクロポストが1つもないのでは無理もありません。
今までのユーザーページと何も変わっていない…!ので動作確認はマイクロポスト追加してからにしよう。
今日の学習時間は【20分】。
次は「11.2.2 マイクロポストのサンプル」から。