2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CarrierwaveとMiniMagickで画像アップロードの実現

Last updated at Posted at 2022-03-27

はじめに

自作PF作成中に結構時間を要してしまったので今後のためにまとめる

環境と前提

M1 Mac
Rails 6.1.4.7
Ruby 3.1.0
MacにImageMagicが入っていることが前提

Image Magicが入っていることを確認

下記のコマンドを使用してimagemagickが入っていれば問題ないです
何も表示されなければ入っていません

terminal
$ brew list | grep imagemagic

入っていなければこちらのコマンドで入れてください

terminal
$ brew install imagemagick

Carrierwave

  gem 'carrierwave', '~> 2.0'
  gem 'mini_magick'
  
  bundle install
terminal
# アップローダークラスを作成
# app/uploaders/image_uploader.rbを生成
rails g uploader image # 関連するカラム名
app/models/photo.rb
# 画像カラムにアプローダークラスをマウント
# ImageUploaderは生成したファイルのクラス名
mount_uploader :image, ImageUploader

MiniMagickを使えるようにする

app/uploaders/image_uploader.rb
# 3行目のコメントアウトを外す
include CarrierWave::MiniMagick
全ての画像をリサイズする
# コメントアウト外すだけでOK サイズはお好みで
# Process files as they are uploaded:
process resize_to_fit: [200, 200]
リサイズバージョンを作成する
# Create different versions of your uploaded files:
# 追記する
  version :small do
    process resize_to_fit: [55, 55]
  end
許容する拡張子の設定
# Add an allowlist of extensions which are allowed to be uploaded.
# For images you might use something like this:
# コメントアウト外すだけでOK
def extension_allowlist
  %w(jpg jpeg gif png)
end

view側で使用する際

自分はdeviseを使っているのでcurrent_userでユーザー情報を取得できます
ここは自分のアプリに合わせてください

<!-- 基本 -->
<%= image_tag current_user.class名_url %>

<!-- 小さめアイコンの表示 上で作成したリサイズバージョンを使えます-->
<%= image_tag current_user.image_url(:small) %>

gitの管理対象外にする

public/uploads/

デフォルト画像を設定する

default.jpgというファイル名でapp/assets/images内に適当な画像ファイルを置く

app/uploaders/image_uploader.rb
# Provide a default URL as a default if there hasn't been a file uploaded:
def default_url(*args) # コメントアウトを外す
 #   # For Rails 3.1+ asset pipeline compatibility:
 #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
   "default.jpg" # 書き加える
 #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
end # コメントアウトを外す

参考

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?