Railsチュートリアル 第13章 ユーザーのマイクロポスト - マイクロポストのサンプル

# サンプルデータにマイクロポストを追加する

## マイクロポストを追加するのは最初の6人のユーザーのみ

Railsチュートリアル本文の手順通りに進めてきたのであれば、サンプルアプリケーションには100人ほどのユーザーが存在するはずです。その全てにマイクロポストを追加していくのは、いくら自動生成するといっても非常に時間がかかってしまいます。というわけで、「マイクロポストを追加するのは最初の6人のユーザーのみ」とします。

以下のコードにより、「最初の6人のユーザーにのみマイクロポストを追加する」という動作が実現されます。

```ruby:
User.order(:created_at).take(6)
```

ポイントは以下です。

* 「最初に作成されたユーザーから」という動作を実現するために、メソッドチェーンに`order(:created_at)`を含めている
* 「6人のユーザーを対象とする」という動作を実現するために、`take(6)`というメソッドを実行している

### マイクロポストを追加していくためのコード

上記6人のユーザーに対しては、1人あたり50個のマイクロポストを追加していきます。「50」という値には、「1ページの表示限界数(30)より大きな、ある程度切りのいい数値」という意味合いがあります。

「1人あたり50個のマイクロポストを追加する」というコードは以下のようになります。

```ruby:
50.times do
  content = Faker::Lorem.sentence(5)
  users.each { |user| user.microposts.create!(content: content) }
end
```

### `Faker::Lorem.sentence`メソッド

マイクロポストの本文は、Faker gemの`Lorem.sentence`というメソッドを使って自動生成するようにしています。「引数で与えた数の単語を、[lorem ipsum](https://ja.wikipedia.org/wiki/Lorem_ipsum)からランダムに抽出し、文らしい文字列を返す」というメソッドですね。

`Lorem.sentence`の実行結果は、例えば以下のようになります。

```
>> Faker::Lorem.sentence(5)
=> "Neque dignissimos voluptatem architecto atque et consequatur itaque quia."
>> Faker::Lorem.sentence(5)
=> "Placeat est praesentium quam et id tenetur quaerat sunt."
>> Faker::Lorem.sentence(5)
=> "Corrupti eius fuga enim adipisci totam quia."
```

### 「6人のユーザーに対して1つのマイクロポストを生成する操作を50回行う」という処理順序の理由

上記のコードでは、「6人のユーザーに対して1つのマイクロポストを生成する操作を50回行う」という処理順序になります。少々不自然なように思えるこの処理順序は、Railsチュートリアル本文によれば以下のような理由があります。

> これは[14.3](https://railstutorial.jp/chapters/following_users?version=5.1#sec-the_status_feed)でステータスフィード (いわゆるタイムライン) を実装するときに役立ちます。というのも、ユーザー毎に50個分のマイクロポストをまとめて作成してしまうと、ステータスフィードに表示される投稿がすべて同じユーザーになってしまい、視覚的な見栄えが悪くなるからです。

## 実際にサンプルデータにマイクロポストを追加するコード

`db/seeds.rb`に実装を追加していきます。

```diff:db/seeds.rb
  ...略
+
+ users = User.order(:created_at).take(6)
+ 50.times do
+   content = Faker::Lorem.sentence(5)
+   users.each { |user| user.microposts.create!(content: content) }
+ end
```

## サンプルデータを再生成する

ここまでの実装が完了したら、サンプルデータを再生成していきましょう。

サンプルデータの再生成に先がけて、Railsサーバーはシャットダウンされていなければなりません。Railsコンソールが起動されていたら、それも終了させておきましょう。

以降はいつものサンプルデータ再生成手順となります。

```
# rails db:migrate:reset
# rails db:seed
```

# マイクロポスト用のCSSを追加する

## 現状のユーザーのプロフィール画面の見栄え

上記の実装を終えれば、晴れてユーザーのプロフィール画面にマイクロポストが表示されるようになります。

<img width="1168" alt="スクリーンショット 2019-12-26 16.40.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323778/e67fe295-ff6d-c21e-5c5a-ea9e5112d580.png">

…しかしこれはいかにも見栄えが悪いですね。マイクロポストの表示が段ずれしていっています。このような事態を是正するため、マイクロポスト用のCSSを追加していく必要があります。その内容は以下のようになります。

## マイクロポスト用のCSSの内容

```diff:app/assets/stylesheets/custom.scss
  ...略
+
+ /* Microposts */
+ 
+ .microposts {
+     list-style: none;
+     padding: 0;
+     li {
+         padding: 10px 0;
+         border-top: 1px solid #e8e8e8;
+   }
+     .user {
+         margin-top: 5em;
+         padding-top: 0;
+     }
+     .content {
+         display: block;
+         margin-left: 60px;
+         img {
+             display: block;
+             padding: 5px 0;
+         }
+     }
+     .timestamp {
+         color: $gray-light;
+         display: block;
+         margin-left: 60px;
+     }
+     .gravatar {
+         float: left;
+         margin-right: 10px;
+         margin-top: 5px;
+     }
+ }
+ 
+ aside {
+     textarea {
+         height: 100px;
+         margin-bottom: 5px;
+     }
+ }
+ 
+ span.picture {
+     margin-top: 10px;
+     input {
+         border: 0;
+     }
+ }

...略 
```

なお、上記の実装には、「Railsチュートリアル13章中で今後必要となるCSSの内容」も全て含まれています。

## マイクロポスト用のCSSの内容を反映すると、見栄えはどうなるか

上記CSSを反映すると、Webブラウザにおけるユーザーのプロフィール画面の表示は以下のようになります。

<img width="1168" alt="スクリーンショット 2019-12-26 16.55.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323778/03dc16d9-54f1-da60-3227-f82a81520a07.png">

見るに堪える見栄えになりましたね。

別のユーザーのプロフィール画面の表示は、例えば以下のようになります。


<img width="1168" alt="スクリーンショット 2019-12-26 16.59.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323778/ba70d14d-f69f-4a88-cd78-e891777c092d.png">

また、以下のスクリーンショットからは、ページネーション用リンクも正常に表示されているのがわかります。

<img width="1168" alt="スクリーンショット 2019-12-26 16.59.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/323778/61fd3a18-6c43-717c-6d9a-557ca9a6455a.png">