このパートでは画像アップロードするためにcarrierwaveとMiniMagickの導入を行います。

本パートの目標物

本パートでは、carrierwaveとMiniMagickの導入を行います。

目標物を作成するまでの流れ

1. carrierwaveの導入
2. MiniMagickの導入

今回のGemの導入に関しても、基本的に公式ドキュメントに沿って行っていくので、導入方法を覚える必要はないです。

では実際に進めていきましょう。

1. carrierwaveの導入

carrierwaveはファイルを簡単かつ柔軟にアップロードする方法を提供するライブラリです。

carrierwaveの公式ドキュメントを元にcarrierwaveを導入していきます。

carrierwaveのGemをインストール

まずは、Gemfileの最下部に以下のコードを追加します。

Copied!
techpitgram
└── Gemfile

Gemfile
1
 
Copied!
gem 'carrierwave', '~> 2.0'

追加したら、bundle installを実行してcarrierwaveをインストールします。

Copied!
$ bundle install

CarrierWaveのアップローダーを作成

次に、CarrierWaveのアップローダーを作成します。

以下のコマンドを実行してください。

Copied!
$ rails g uploader image

上記のコマンドを実行すると以下のファイルが作成されます。

Copied!
create  app/uploaders/image_uploader.rb

モデルのカラムにアップローダーを紐付け

Photoモデルのimageカラムと、先ほど作成したアップローダーImageUploaderと紐付けをします。（ImageUploaderはapp/uploaders/image_uploader.rbのクラスの名前です。）

app/models/photo.rbに以下のコードを追加してください。

app/models/photo.rb
12345678
        
Copied!
class Photo < ApplicationRecord
  belongs_to :post

  validates :image, presence: true

  # ここを追加
  mount_uploader :image, ImageUploader
end

2. MiniMagickの導入

MiniMagickは、CarrierWaveからImageMagickを使えるようにします。ImageMagickとは、画像処理ライブラリです。

MiniMagickを導入することで、画像をリサイズできます。

参考）MiniMagick

imagemagickをインストール

MiniMagickを使えるようにするにはimagemagickを開発環境にインストールする必要があります。

OSがMacの方

まず開発環境がMacの方から説明していきます。

開発環境にimagemagickがあるかどうかは以下のコマンドで確認ができます。

Copied!
$ brew list

上記のコマンドを実行して、imagemagickがあれば、既にインストールされています。

imagemagickがなければ、以下のコマンドを実行して、imagemagickをインストールしてください。

Copied!
$ brew install imagemagick

Cloud9で進めている方

Cloud9では、以下のコマンドでimagemagickをインストールできます。

Copied!
$ sudo yum update
$ sudo yum install -y ImageMagick

MiniMagickのGemをインストール

次に、Gemfileの最下部に以下のコードを追加します。

Copied!
techpitgram
└── Gemfile

Gemfile
1
 
Copied!
gem "mini_magick"

上記のコードを追加できたらコマンドでbundle installを実行します。

Copied!
$ bundle install

アップローダーの記述を修正

次にapp/uploaders/image_uploader.rbを修正します。

ここで修正するのは以下の3点です。

Copied!
- 4行目のすでに生成されているコードのコメントを外す
- 「version :medium」というサイズを指定するコードを追加
- extension_whitelistメソッドのコメントアウトを外す

Copied!
app
└── uploaders
    └── image_uploader.rb

app/uploaders/image_uploader.rb
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
                                                       
Copied!
class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick # ここのコメントアウトを外す

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # 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('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # ==========ここから追加する==========
  version :medium do
    process resize_to_fill: [1080, 1080]
  end
  # ==========ここまで追加する==========

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:

  # ここのコメントアウトを外す
  def extension_whitelist
    %w(jpg jpeg gif png)
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end
end

ruby
123
   
Copied!
version :medium do
  process resize_to_fill: [1080, 1080]
end

というコードでmediumというバージョンが作成され、画像を1080 x 1080ピクセルにリサイズします。

以上で今回のパートは終了です。

お疲れさまでした。