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

CarrierWave の使い方 by チュートリアル11章

 

CarrierWaveとは画像をアップロードや画像リサイズができるgemのこと

早速実装方法を解説します。

 

1. gemfileに

    gem 'carrierwave' #アップローダ

    gem 'mini_magick'#リサイズ機能

    gem 'fog'#本番環境に画像をアップする

を追加。 

2. $ bundle install

3. $ rails g uploader Picture #pictureモデルのアップローダーを生成

 

4. $ rails g migration add_picture_to_microposts picture:string   #micropostモデルにpictureカラムを追加

5. $ rake db:migrate

 

6. models/micropost.rbに

 mount_uploader :picture, PictureUploader

 

と一行書き足す。mount_uploaderはメソッドで、赤字部分はアップローダーのクラス名を指していることに注意 。

 

7. viewにアップロードフォームをさくせいする

 _micropost_form.html.erb

(ハイライト部分が書き足したコード)

<%= form_for(@micropost, html: { multipart: true }) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.text_area :content, placeholder: "Compose new micropost..." %>
  </div>
  <%= f.submit "Post", class: "btn btn-primary" %>
  <span class="picture">
    <%= f.file_field :picture %>
  </span>
<% end %>

 html: { multipart: true } はファイルをアップロードする際に必要なオプションです

 

 

8. app/controllers/microposts_controller.rb内の

 

strongparamsに:pictureを追加

params.require(:micropost).permit(:content, :picture)

 

9. app/views/microposts/_micropost.html.erb

 マイクロポストの画像表示をするために一行追加

<%= image_tag micropost.picture.url if micropost.picture? %> 

picture? はbooleanを返してくれる。trueなら画像を表示してくれる

 

ここまでで画像投稿と表示はできるようになります。ここから下は画像のリサイズをしていきます。

 

10.  app/uploaders/picture_uploader.rbにバリデーション

 

 def extension_white_list
    %w(jpg jpeg gif png)    #これらの拡張子のみ表示できる
  end

 

11. app/models/micropost.rb 内で画像サイズのバリデーション

(ハイライト部分を新たに記述すること)

class Micropost < ActiveRecord::Base
  belongs_to :user
  default_scope -> { order(created_at: :desc) }
  mount_uploader :picture, PictureUploader
  validates :user_id, presence: true
  validates :content, presence: true, length: { maximum: 140 }
  validate  :picture_size

  private

    # アップロード画像のサイズを検証する
    def picture_size
      if picture.size > 5.megabytes
        errors.add(:picture, "should be less than 5MB")
      end
    end
end

 

12. ファイルサイズをJqueryで確認

app/views/shared/_micropost_form.html.erb

(ハイライト部分が追加したもの)

<%= form_for(@micropost, html: { multipart: true }) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.text_area :content, placeholder: "Compose new micropost..." %>
  </div>
  <%= f.submit "Post", class: "btn btn-primary" %>
  <span class="picture">
    <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
  </span>
<% end %>

<script type="text/javascript">
  $('#micropost_picture').bind('change', function() {
    var size_in_megabytes = this.files[0].size/1024/1024;
    if (size_in_megabytes > 5) {
      alert('Maximum file size is 5MB. Please choose a smaller file.');
    }
  });
</script>

バリデーションが完成しました。

 

13. 画像のリサイズ 

まずリサイズするために必要なimagemagickをインストールしていく

$ sudo apt-get update
$ sudo apt-get install imagemagick --fix-missing

macユーザーはapt-getが使えないことがあるので、そうなったらapt-getをbrewに変更してみてください。

 

14.  リサイズするためにアップローダーを修正する

app/uploaders/picture_uploader.rb
class PictureUploader < CarrierWave::Uploader::Base
include CarrierWave::MiniMagick process resize_to_limit: [400, 400]

 

400のところは任意で設定できます。

 

ここまででアップロードと画像のリサイズを実装できました!!拍手!!!

 

本番環境でのアップロード(fog)に関しては後日追加していきます。