心はいつもAirPucci (空元気でもいいから)

毎日がPucciを着ているような気分

RailsTutorial4.0を高速で復習する。10.2章。

   


10.2マイクロポストを表示する、です。

ポストの投稿ではなく、表示だけを先に作ります。

仕様の確認

ユーザープロファイルページ(userのshow)にポストを表示する。

10.2.1ユーザー表示ページの拡張、です。

テストを書く

リスト10.16 ユーザーのshowページでマイクロポストが表示されていることをテストする。
spec/requests/user_pages_spec.rb

require 'spec_helper'

describe "User pages" do
略
  describe "profile page" do
    let(:user) { FactoryGirl.create(:user) }
    let!(:m1) { FactoryGirl.create(:micropost, user: user, content: "Foo") }
    let!(:m2) { FactoryGirl.create(:micropost, user: user, content: "Bar") }

    before { visit user_path(user) }

    it { should have_content(user.name) }
    it { should have_title(user.name) }

    describe "microposts" do
      it { should have_content(m1.content) }
      it { should have_content(m2.content) }
      it { should have_content(user.microposts.count) }
    end
  end
略
end

実装する

リスト10.17 ユーザーのshow画面にマイクロポストを追加する。
app/views/users/show.html.erb

<% provide(:title, @user.name) %>
<div class="row">
略
  <aside>
略
  </aside>
  <div class="span8">
    <% if @user.microposts.any? %>
      <h3>Microposts (<%= @user.microposts.count %>)</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
</div>

リスト10.18 1つのマイクロポストを表示するパーシャル。
app/views/microposts/_micropost.html.erb

<li>
  <span class="content"><%= micropost.content %></span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
  </span>
</li>

リスト10.19 @micropostsインスタンス変数をユーザーshowアクションに追加する。
app/controllers/users_controller.rb

class UsersController < ApplicationController
略
  def show
    @user = User.find(params[:id])
    @microposts = @user.microposts.paginate(page: params[:page])
  end
略
end

テストはパスします。

10.2.2マイクロポストのサンプル、です。

マイクロポストのデータが無いので試験用に6人分、マイクロポストのデータを作成します。

リスト10.20 サンプルデータにマイクロポスト用のコードを追加する。
lib/tasks/sample_data.rake

namespace :db do
  desc "Fill database with sample data"
  task populate: :environment do
略
    users = User.all(limit: 6)
    50.times do
      content = Faker::Lorem.sentence(5)
      users.each { |user| user.microposts.create!(content: content) }
    end
  end
end
bundle exec rake db:reset
bundle exec rake db:populate
bundle exec rake test:prepare

リスト10.21 マイクロポスト用のCSS (この章全般にわたって使用するCSSも含む)
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;
}
.gravatar {
float: left;
margin-right: 10px;
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}

いったんコミットし、次は
10.3マイクロポストを操作する
です。

 - テクニカル ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

パーフェクトRuby 3章制御構造/メソッド/組み込み関数 3-1演算子

パーフェクトRuby2章の後は6章をやろうと思っていましたが、やっぱり順番にやっ …

RailsTutorial4.0を高速で復習する。7章

第7章ユーザー登録、です。 6章でuserモデルを作ったので、7章はwebでの登 …

attr_accessorでRuby文法を噛み締める

作りたいwebアプリがあって、プログラムやろう!となって現在にいたってる訳です。 …

Objective-C苦節3ヶ月アプリ作れるようになった

このブログairpucci.comのメニューにアプリ開発追加しました。 昨年秋よ …

Macにコマンドラインツールをインストールする

Mac miniのメモリが16Mになったので、気分も新たに、Ruby on Ra …

iPad使用前/使用後、雑感。

5/28にiPadがAppleStoreからクロネコヤマトで届けられました。 週 …

アイキャッチ画像のリサイズ

768 × 1024 pxの写真をアイキャッチに指定して、150pxにリサイズ表 …

初めてのRuby8章「オブジェクトとクラス」

2章「配列とハッシュ」の次はいきなり8章「オブジェクトとクラス」に行ってしまいま …

no image
RailsTutorial4.0を高速で復習する。5.4章。

5.4ユーザー登録: 最初のステップ、です。ようやく開発っぽくなってきます。 5 …

no image
RailsTutorial4.0を高速で復習する。9.3章。

9.3すべてのユーザーを表示する、です。 いろいろ細かい実装するまえにこれやるべ …