ぞえの技術めも

Ruby on Rails勉強中

【149日目】【1日20分のRailsチュートリアル】【第11章】マイクロポストのビューを追加する

Ruby on Railsチュートリアル(第3版)

今日は「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 マイクロポストのサンプル」から。