読者です 読者をやめる 読者になる 読者になる

ちーくんのブログ

プログラミング備忘録

Railsでcarrierwaveを使って画像をアップロードする方法

こんにちは。本日はrailsで画像をアップロードする時によく使用されるcarrierwaveの使い方を説明したいと思います。

今回は基本的な使い方のみを説明します。
また後々、何回かに分けてcarrierwaveの便利な機能の使い方も説明したいと思っていますので、そちらも合わせて参考にしていただければ幸いです。

バージョン

Ruby '2.2.1'
Rails '4.2.1'


carrierwaveのインストール

まずcarrierwaveを使うためにGemfileに記述します。

# Gemfile
gem 'carrierwave'
bundle install

次に画像をアップロードするカラムの属性(今回はPostカラムのpicture属性)を以下のコマンドで指定します。

# ターミナル
rails g uploader Picture

すると以下のファイルが生成されます。

app/uploaders/picture_uploader.rb

以上でcarrierwaveのインストールは完了です。


カラムとmodelの修正

現段階でPostカラムが以下のようになってるとします。

属性
title string
content text

今回はPostカラムで画像をアップロードするので、アップロードした画像を収納するpicture属性をPostカラムに作成します。

# ターミナル
rails g migration add_picture_to_posts picture:string
# ターミナル
rake db:migrate

これでPostカラムは以下のように変更になりました。

属性
title string
content text
picture string

次に画像に関連付けるためにモデルを修正。
carrierwaveをインストールするとmount_uploaderというメソッドが使えるようになります。
これは引数に(カラムの属性名, 生成されたアップローダーのクラス名)をとります。

# post.rb
class Post < ActiveRecord::Base
  # carrierwaveとモデルの関連付け
  mount_uploader :picture, PictureUploader
end

投稿フォームの修正

それでは投稿フォームに画像をアップロードするフォームを出現させましょう。

# posts/_form.html.erb

<!-- ここから追加 -->
<%= form_for(@post, html: {multipart: true}) do |f| %>
<!-- ここまで追加 -->

  <% if @post.errors.any? %>
    <div id="error_explanation" class="alert alert-danger">
      <h2><%= pluralize(@post.errors.count, "error") %> prohibited this post from being saved:</h2>

      <ul>
      <% @post.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

<!-- ここから追加 -->
  <div class="field">
    <%= f.label :picture %>
    <%= f.file_field :picture %>
  </div>
<!--ここまで追加-->

  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :content %><br>
    <%= f.text_area :content %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

これで投稿フォームに画像アップロードフォームが現れました。


posts_controller.rbの編集

画像アップロードの属性(picture)を追加したので、posts_controller.rbのストロングパラメーターを修正します。

# posts_controller.rb
def post_params
      params.require(:post).permit(:picture, :title, :content)
    end

実際に画像を投稿してみる

今回はアップロードした画像を投稿詳細ページ(show.html.erb)で表示したいと思います。

# posts/show.html.erb
<%= image_tag @post.picture.url %>

それでは投稿してみましょう。

f:id:chi_kun:20160504184127p:plain


はい、きちんと画像がアップロードできました。

今回はシンプルに画像をアップロードする方法でしたが、carrierwaveは他にも画像のサイズやファイル名を調整することができます。

くわしくは今後見ていきたいと思います。


※追記

便利な機能まとめ(part1)
chi-kun.hatenablog.com



本日は以上です。