3
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 3 years have passed since last update.

【Rails】画像アップロードの実装(自分用メモ)

Last updated at Posted at 2020-04-23

#はじめに
アプリを作成する中で、画像を投稿する。といった実装は比較的必要になってくる知識だと思っています。
なので、この実装方法について定着するまでのメモとして、手順をまとめておこうかと思っています。

#導入までの手順

##1.gemをインストール

Gemfileに対象のgemを記述

gem 'carrierwave'
gem 'mini_magick'

gemはアルファベット順に並べる方が良いらしい(ボソ)

その後、ターミナルで bundle install

##2..gitignore に記述
投稿する画像をGithubで管理する必要がなければ、.gitignoreに以下の記述を追加しましょ。

app/.gitignore
public/uploads/*

public/uploads/を指定する理由は、アプリケーションのpublic以下に溜まってくみたいなのです。

##3.アップローダーの作成
末尾の image は任意の文字列でOK。
でも基本的に画像に紐づいた名前にしてあげましょ。

rails g uploader image

##4.画像を扱うテーブルに紐づくモデルにマウント

mount_uploader :image, ImageUploaderそういう言葉だと覚えちゃいましょ

(例)item.rb
class Item < ApplicationRecord
  belongs_to :user

  validates :content, presence: true, unless: :image?

  mount_uploader :image, ImageUploader #←これを記述じゃ
end

##5.image_uploader.rbminimagic使うよ。の記述をする

/app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick
  # storage :fog
# 〜省略〜
  process resize_to_fit: ["任意の数値", "任意の値数値"]
# 〜省略〜
end

include CarrierWave::MiniMagickprocess resize_to_fit: [50, 50]については実は最初から記述されていたり。
なので、コメントアウトを外すだけでもOK。

##補足
###riseze_to_fitですが、実は他にも種類があるようで。

名前 意味 引数[第一引数,第二引数,第三引数,第四引数] 用途
resize_to_fit 指定した大きさより小さい場合、指定した大きさまで拡大 [width,height] 縦横比を維持してフレキシブルに表示したい時とか
resize_to_limit 指定した大きさより小さい場合なにもしない。でも余白を塗り潰したりもできるぞ [width, height, 余白の色, どの位置を中身に画像を表示するか] 縦横比を維持して、固定の領域に画像全体を表示したいときとか
resize_to_fill 指定の場所から、指定しただけの幅高さで画像をカット [width,height,どの位置を中心に画像を表示するか] 画像見切れても良いから、指定の領域に同一のサイズで表示したいとき
(これ以外にもたくさんあるようだ)

###拡張子の指定なんかもできちゃうみたい
生成したimage_uploader.rbをよ〜〜〜〜くみると、拡張子を指定するような記述が。
どうやらこのコメントアウトを外せば拡張子も指定できるようです。
事故防止のためにもここで指定してしまってもいいかもしれないですね。

/app/uploaders/image_uploader.rb
   def extension_whitelist
     %w(jpg jpeg gif png)
   end

#最後に
なんとなーく言われるがママに使ってましたが、こうやっておさらいしてみると実装中にこまった部分なんかもCarrierWave側で色々対応できそうです。
あと、記事書いている内に少しググったりしましたが、同じような記事いっぱいありました(笑
わざわざやる必要なかったな・・・笑

ではでは、ありがとうございました。

3
1
0

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
3
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?