紙一重の積み重ねスマートフォン用の表示で見る紙一重の積み重ねアラフォーのエンジニアがなれる最高の自分を目指して、学んだことをこつこつ情報発信するブログです。マイクロポストの画像投稿の演習まとめ&解答例です。個人の解答例なので、誤りがあればご指摘ください。本章での学び画像付きマイクロポストを投稿できるようにする。基本的な画像アップロード本章での学び【事前準備】CarrierWaveのインストール画像アップローダーであるCarrierWaveをGemfileに追加する。画像処理を行うmini_magickと、クラウド環境へアップロードするためのfogも追加する。'1.40.0'インストール。support.------------------------------【事前準備】画像アップローダーの作成Railsのジェネレーターで画像アップローダーを生成する。Micropostモデルにpicture属性を追加する。db/migrate/20170820040443_add_picture_to_microposts.rb自動生成されたマイグレーションファイル。endendマイグレーションの実行。==================【model】Micropostモデルに画像を追加するCarrierWaveに画像と関連付けたモデルを伝えるために、mount_uploaderメソッドを使用する。引数に、属性名(今回はpicture)と、クラス名(PictureUploader)を指定する。}endチュートリアルでは、この時点でのtestはgreenになると書かれているが、redになる。skips一旦先に進めることにする。【view】パーシャルに画像を追加する。f.file_field属性を使って、マイクロポスト投稿フォームに画像を表示する。file_fieldは、ファイル選択ボックスを表示するとのこと。%>【controller】Micropostsコントローラのリファクタリングpicture属性をブラウザから更新できる許可リストに追加する。end【view】マイクロポスト表示パーシャルのリファクタリングimage_tagヘルパーを使って、マイクロポストの表示項目に画像を追加する。画像が存在する場合のみ、画像を表示する。image_tagヘルパーは以下参照。</span>演習1画像付きのマイクロポストを投稿してみましょう。(心配しないでください、次の13.4.3でこの問題を直します)。画像がアップロードできることを確認。13.63に示すテンプレートを参考に、13.4で実装した画像アップローダーをテストしてください。test/fixtures/)。13.63で追加したテストでは、Homeページにあるファイルアップロードと、投稿に成功した時に画像が表示されているかどうかをチェックしています。テスト内にあるfixture_file_uploadというメソッドは、fixtureで定義されたファイルをアップロードする特別なメソッドです18。picture属性が有効かどうかを確かめるときは、11.3.3で紹介したassignsメソッドを使ってください。このメソッドを使うと、投稿に成功した後にcreateアクション内のマイクロポストにアクセスするようになります。サンプル画像をfixtureディレクトリに配置する。test/fixtures/テストを追加する。※しれっと、params:ハッシュがなくなっているので注意。本章での学び画像サイズや拡張子に対するバリデーションを実装する。画像フォーマットのバリデーション追加extension_whitelistメソッドのコメントアウトを外す。画像のサイズを制限する独自のバリデーションを追加する。独自のバリデーションを定義するためには、validatesメソッドではなく、validateメソッドを使用する。5MBを超えた場合はエラーメッセージを表示する。end【view】パーシャルにファイルサイズチェックを追加するマイクロポスト投稿フォームに、画像の拡張子の許可と、ファイルサイズチェックを行うjQuery関数を追加する。jQuery関数では、ブラウザのインスペクタ機能でjavaScriptを直接修正したり、curlで直接POSTしてきた場合、防ぐことができない。そのために前項で実装したサーバサイド側のバリデーションも必要となる。});</script>演習15MB以上の画像ファイルを送信しようとした場合、どうなりますか?jQueryの警告が表示されアップロードできない。演習2無効な拡張子のファイルを送信しようとした場合、どうなりますか?ホワイトリストのエラーメッセージが表示される。画像のリサイズ本章での学び画像のリサイズ処理を実装する。【事前準備】ImageMagickのインストールImageMagickをインストールする。--fix-missingアップローダーのリファクタリングMiniMagickというImageMagickとRubyをつなぐgemを使って画像をリサイズする。縦横どちらかが400pxを超えていた場合、適切なサイズにリサイズする。400]演習1解像度の高い画像をアップロードし、リサイズされているかどうか確認してみましょう。en.errors.messages.mini_magick_processing_errorエラーが発生する。