心はいつも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

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

  関連記事

Mac miniのメモリを自力で16Gに増設しました

Mac miniとDellの27インチIPS液晶、とても快適です。もっと快適にす …

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

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

Google Webfont使ってみたよ

地元に戻ってきてまず思ったのは「観光サイトを立ち上げたい」ということ。いや、観光 …

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

6.2.3長さを検証する、です。空データを拒否した次は、入力できるデータ長の制限 …

パーフェクトRuby 2章Rubyの基礎 2-1 Hello,Ruby

12章から5章まではPart2 Ruby言語仕様 です。 2章 Rubyの基礎 …

WordPressのテンプレートを自分で作ってみました

ブログ更新は久々になりました。この2週間、ずっとこのブログ用にWordPress …

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

6.3セキュアなパスワードを追加する、です。 パスワードはセキュアであるべきと思 …

no image
gamilアカウントが乗っ取られました

朝起きてすぐ行うメール確認。iphoneでgmail接続できないってエラーが出る …

no image
ブログデザイン変更しました

予告通り、本日中にブログのデザインを変更できました。WordPressのテーマT …

パーフェクトRuby 2章Rubyの基礎 2-7-3 シンボル

p61 2-7-3 シンボル シンボル好きです。Ruby始めた頃の一番最初の疑問 …