【159日目】【1日20分のRailsチュートリアル】【第11章】基本的な画像アップロード機能を実装する

Ruby on Railsチュートリアル(第3版)

今日は「11.4.1 基本的な画像アップロード」のHomeページ上にアップローダーを追加するところから。

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

図 11.18のようにHomeページ上にアップローダーを追加するためには、マイクロポストのフォームにfile_fieldタグを含める必要があります (リスト11.57)。

マイクロポストのフォームにfile_fieldタグを追加する。

app/views/shared/_micropost_form.html.erb

<%= form_for(@micropost, html: { multipart: true }) do |f| %>
  :
  <span class="picture">
    <%= f.file_field :picture %>
  </span>
<% end %>

html: { multipart: true }
form_forの引数に上のオプションが追加されていることに注目してください。これはファイルをアップロードする際に必要となるオプションです。

へー。画像をアップロードするにはオプションの追加が必要、と。

最後に、Webから更新できる許可リストにpicture属性を追加しましょう。追加すると、micropost_paramsメソッドはリスト11.58のようになります。

picture属性追加する。

app/controllers/microposts_controller.rb

  private

    def micropost_params
      params.require(:micropost).permit(:content, :picture)
    end

一度画像がアップロードされれば、Micropostパーシャルのimage_tagヘルパーでその画像を描画できるようになります (リスト11.59)。

spanタグの中に画像を描画するようにビューを修正。

app/views/microposts/_micropost.html.erb

  :
  <span class="content">
    <%= micropost.content %>
    <%= image_tag micropost.picture.url if micropost.picture? %>
  </span>
  :

手動で画像付きの投稿をしてみると、図 11.20のようになります。

動作確認してみよう。サーバーを起動して

$ rails server -b $IP -p $PORT

まずホーム画面にアクセス。

画像をアップロードするフォーム？追加されてる！

試しにWindowsに元々入ってたサンプル ピクチャをアップロードしてみる。

ひえっ！画像がデカすぎてレイアウトが残念な感じに…！！！
この辺はおいおい対応していくんでしょう。とりあえず画像のアップロードはできた、ということで。

今日の学習時間は【25分】。

次は「11.4.2 画像の検証」から。