動かざることバグの如し

3分経てば忘れそうなことをメモします

RailsとCarrierWaveで画像アップローダをつくってみる

そういやsinatraでもつくったことあったな

thr3a.hatenablog.com

懐かしい(

環境

  • Rails 4.2
  • rmagick(macbrew install imagemagick pkg-config)

要件

せっかくだし前回同様にしてみる

  • 画像を投稿できて一覧表示できるようにする
  • 画像投稿には必ず「画像の題」が必要
  • 一覧表示に負荷がかからないよう、各画像にサムネイルと縮小版の画像も自動生成

Starting

rails new gazo -TB

Gemfileに以下追記してbundle

gem "slim-rails"
gem 'carrierwave'
gem 'rmagick'

骨組みの作成

面倒だしscaffoldでいいや

rails g scaffold post title image

画像を管理するモデルも自動生成

rails g uploader image

ちゃんとrake db:migrateすること

フォームの作成

つってもRailsたんがすでに作ってくれてるので画像うpする所だけtext_fieldからfile_fieldに変更

  .field
    = f.label :image
    = f.file_field :image

これでもう画像投稿はできるようになった

画像を表示したい

= image_tag post.image だけ

設定は基本的にapp/uploaders/image_uploader.rbに記述する

サムネイルとか縮小画像欲しい

resize_to_limit

縦横比を維持したままリサイズ。ただし元画像の解像度が指定したpxを下回る場合はそのまま

# 高さを最大 300px、横 を最大 200 pxに調整
process resize_to_limit: [300, 200]

resize_to_fill

指定解像度でくり抜きを行う

# 縦横100pxで中央から切り抜き
# 第三引数は 'NorthWest', 'North', 'NorthEast', 'West', 'Center', 'East', 'SouthWest', 'South', 'SouthEast'のいずれか(デフォルトはCenter)
process resize_to_fill: [100, 100, "Center"]

resize_to_fit

縦横比を維持したままリサイズ。ただし元画像の解像度が指定したpxを下回る場合はその解像度まで拡大される

# 高さを最大 300px、横 を最大 200 pxに調整
process resize_to_limit: [300, 200]

resize_and_pad

resize_to_limit同様に縦横比を維持したままリサイズ。ただし足りなかった余白部分は塗りつぶされる。つまり必ず指定した解像度になる。

# 高さを最大 300px、横 を最大 200 pxに調整
# 第三引数で塗りつぶす色、第四引数で余白が発生した場合の画像の配置を指定
process resize_to_limit: [300, 200, "#ffffff", "Center"]

ランダムなファイル名が欲しい

下手に自作するより公式ドキュメントのコピペしたほうが早い

class PhotoUploader < CarrierWave::Uploader::Base
  def filename
     "#{secure_token(10)}.#{file.extension}" if original_filename.present?
  end

  protected
  def secure_token(length=16)
    var = :"@#{mounted_as}_secure_token"
    model.instance_variable_get(var) or model.instance_variable_set(var, SecureRandom.hex(length/2))
  end
end