CarrierWave の履歴(No.6)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• CarrierWave へ行く。
  • 1 (2014-06-30 (月) 06:43:10)
  • 2 (2014-06-30 (月) 06:53:04)
  • 3 (2014-07-17 (木) 08:19:59)
  • 4 (2016-04-13 (水) 16:48:28)
  • 5 (2022-04-11 (月) 15:28:31)
  • 6 (2022-06-30 (木) 16:24:14)

---

Tag: CarrierWave

目次†

関連ページ†

参考情報†

• carrierwaveuploader/carrierwave …公式サイト
• Rails 超お手軽な画像アップローダー CarrierWave の使い方 | Workabroad.jp

デモプロジェクトの作成2022年版†

Gemfile†

• 以下を追加し、bundle updateを実行。記事執筆時carrierwave 2.2.2となった。

  gem 'carrierwave'
  gem 'rmagick'
  

準備†

• アップローダーの生成

  $ bundle exec rails g uploader image
  

• マイグレーションファイル

  $ bundle exec rails g migration add_image_to_books image:string
  #=> db/migrate/xxxxx_add_image_to_users.rbが生成される。
  

• マイグレーション実行。Booksテーブルにimageカラムが追加される。imageカラムにはファイル名が保存される。

  $ bundle exec rake db:migrate
  

• Bookモデルにアップローダーをマウント。

  class Book < ApplicationRecord
    validates :title, :presence => true
    # 下記を追加
    mount_uploader :image, ImageUploader
  end
  

• controllerを変更。

      def book_params
        params.require(:book).permit(:title, :author, :summary, :image)
      end
  

Uploaderの修正†

• app/uploaders/image_uploader.rbを編集し、画像サイズや、ファイルの保管場所などの設定を行う。

Viewの編集†

• 編集画面。_form.html.erb

  <%= form_with(model: book) do |form| %>
  (中略)
    <div class="field">
      <%= form.label :image %>
      <%= form.file_field :image %>
    </div>
  (中略)
  <% end %>
  

• 表示画面。show.html.erb。@book.image.urlでアクセス。

      <% if @book.image? %>
          <%= image_tag @book.image.url %>
      <% else %>
          画像がありません
      <% end %>
  

• 縮小画像を使用したい場合uploaderをカスタムする必要あり。

デモプロジェクトの作成†

Gemfile†

• 以下を追加し、bundle updateを実行

  gem 'carrierwave'
  gem 'rmagick'
  

準備†

• アップローダーの生成

  $ bundle exec rails g uploader image
  

• マイグレーションファイル

  $ bundle exec rails g migration add_image_to_books image:string
  #=> db/migrate/xxxxx_add_image_to_users.rbが生成される。
  

• マイグレーション実行。Booksテーブルにimageカラムが追加される。imageカラムにはファイル名が保存される。

  $ bundle exec rake db:migrate
  

• Bookモデルにアップローダーをマウント。

  class Book < ActiveRecord::Base
    validates :title, :presence => true
    # 下記を追加
    mount_uploader :image, ImageUploader
  end
  

• controllerを変更。

      def book_params
        params.require(:book).permit(:title, :author, :summary, :image)
      end
  

Uploaderの修正†

• app/uploaders/image_uploader.rbを編集し、画像サイズや、ファイルの保管場所などの設定を行う。

Viewの編集†

• 編集画面。

  <%= form_for(@book) do |f| %>
        (...省略...)
        <%= f.label :image %>
        <%= f.file_field :image %>
        (...省略...)
  <% end %>
  
  

• 表示画面。@book.image.<アップローダーで付けた縮小画像の名前>.urlでアクセス。

      <% if @book.image? %>
          <%= image_tag @book.image.s.url %>
      <% else %>
          画像がありません
      <% end %>
  

Tips†

ちょっとだけ異なるUploaderを作りたい。†

• 例えばimage1とimage2でベースとなるファイル名だけ変えたい場合。CarrierWave::Uploader::Baseを継承したベースクラスを作りそこからさらに継承するのはできない(仕様上うまく動かないらしい)。
• Uploaderからカラム名などにアクセスできるのでそれを使うのが簡単かも。例えばカラム名をそのままファイル名に使いたい場合、mount_asが使える。
  • book.rb

    class Book < ActiveRecord::Base
      validates :title, :presence => true
      # 下記を追加
      mount_uploader :image, ImageUploader
      mount_uploader :image2, ImageUploader
    end
    

  • image_uploader.rb。マウントされたカラムによってファイル名が変わる。

      def filename
    #    "image1.jpg" or "image2.jpg"
        "#{mounted_as}.jpg"
      end
    

縮小すると画質が劣化する†

• How to: Specify the image quality · carrierwaveuploader/carrierwave Wikiにある方法でqualityは指定できる(があまり影響なし?)。それだけでなくunsharp_maskも指定したほうがいいかも。config/initializers/carrierwave.rbを作成。

  module CarrierWave
    module RMagick
  
      def quality(percentage)
        manipulate! do |img|
          img.write(current_path){ self.quality = percentage } unless img.quality == percentage
          img = yield(img) if block_given?
          img
        end
      end
  
      # reduce image noise and reduce detail levels
      #
      #   process :blur => [0, 8]
      #
      def blur(radius, sigma)
        manipulate! do |img|
          img = img.blur_image(radius, sigma)
          img = yield(img) if block_given?
          img
        end
      end
  
      def unsharp_mask(radius, sigma, amount, threshold)
        manipulate! do |img|
          img = img.unsharp_mask(radius, sigma, amount, threshold)
          img = yield(img) if block_given?
          img
        end
      end
  
    end
  end
  

• ImageUploaderで指定する。ImageMagicの縮小オプションだと「convert -quality 90 -unsharp 2x1.4+0.5+0 -resize 560x560」に相当？

  class ImageUploader < CarrierWave::Uploader::Base
  
    version :m do
      process :resize_to_limit => [560, 560]
      process :quality => 90
      process :unsharp_mask => [2, 1.4, 0.5, 0]
    end
  
  end
  

トラブルシューティング†

undefined method `quality'†

• qualityは標準のメソッドではなくconfig/initializers/carrierwave.rbに追加した独自メソッドである。