【Railsチュートリアル】第13章 ユーザーのマイクロポスト④

13.4 マイクロポストの画像投稿

• 画像付きマイクロポストを投稿できるようにする

13.4.1 基本的な画像アップロード

• Railsに組み込まれているActive Storageという機能を用いる

演習 1

画像付きのマイクロポストを投稿してみましょう。もしかして、大きすぎる画像が表示されてしまいましたか?（心配しないでください、次の13.4.3でこの問題を直します）。

確認のみなので省略。

演習 2

リスト 13.64に示すテンプレートを参考に、13.4で実装した画像アップローダーをテストしてください。テストの準備として、まずはサンプル画像をfixtureディレクトリに追加してください（リスト 13.63）。リスト 13.64で追加したテストでは、Homeページにあるファイルアップロードと、投稿に成功した時に画像が表示されているかどうかをチェックしています。なお、テスト内にあるfixture_file_uploadというメソッドは、fixtureで定義されたファイルをアップロードする特別なメソッドです18 。ヒント: image属性が有効かどうかを確かめるときは、11.3.3で紹介したassignsメソッドを使ってください。このメソッドを使うと、投稿に成功した後にcreateアクション内のマイクロポストにアクセスするようになります。

test/integration/microposts_interface_test.rb

require 'test_helper'

class MicropostInterfaceTest < ActionDispatch::IntegrationTest

  def setup
    @user = users(:michael)
  end

  test "micropost interface" do
    log_in_as(@user)
    get root_path
    assert_select 'div.pagination'
    assert_select 'input[type="file"]'
    # 無効な送信
    assert_no_difference 'Micropost.count' do
      post microposts_path, params: { micropost: { content: "" } }
    end
    assert_select 'div#error_explanation'
    assert_select 'a[href=?]', '/?page=2'  # 正しいページネーションリンク
    # 有効な送信
    content = "This micropost really ties the room together"
    image = fixture_file_upload('test/fixtures/kitten.jpg', 'image/jpeg')
    assert_difference 'Micropost.count', 1 do
      post microposts_path, params: { micropost:
                                      { content: content, image: image } }
    end
    assert FILL_IN.image.attached?
    follow_redirect!
    assert_match content, response.body
    # 投稿を削除する
    assert_select 'a', text: 'delete'
    first_micropost = @user.microposts.paginate(page: 1).first
    assert_difference 'Micropost.count', -1 do
      delete micropost_path(first_micropost)
    end
    # 違うユーザーのプロフィールにアクセスする
    get user_path(users(:archer))
    assert_select 'a', { text: 'delete', count: 0 }
  end
  .
  .
  .
end

13.4.2 画像の検証

演習 1

5MB以上の画像ファイルを送信しようとした場合、どうなりますか?
エラーが出る。

演習 2

無効な拡張子のファイルを送信しようとした場合、どうなりますか?
そもそも無効な拡張子を選ぶことができない。
（たぶん）エラーが出る（はず）。

13.4.3 画像のリサイズ

演習 1

解像度の高い画像をアップロードし、リサイズされているかどうか確認してみましょう。画像が長方形だった場合、リサイズはうまく行われているでしょうか?

確認のみなので省略

13.4.4 本番環境での画像アップロード

演習 1

本番環境で解像度の高い画像をアップロードし、適切にリサイズされているか確認してみましょう。長方形の画像であっても、適切にリサイズされていますか?

確認のみなので省略。

さいごに

やりごたえのある章が終わりました。
ここまできて得たものは

1. エラーに屈しなくなった
2. コードを一行ずつ読むようになった
3. 学習をはじめた頃と比べてコードを読める（ふりがなをふれる）ようになったこと

これからは、上記に加えてコードを書けるように努力していきたいです。
さぁ、いよいよ最終章です！