17
16

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.

CarrierWaveを使ってみた-画像のアップロード+画像リサイズ機能の実装

Last updated at Posted at 2019-11-13

画像をアップロードする機能を実装するために「CarrierWave」を使ってみたので、備忘録もかねてまとめます。
今回は画像(Image)をアップロードする想定+その画像のリサイズもできるように実装することを想定してます。
基本的にはREADMEをベースに記載してます。

#Carrier Waveとは
Ruby on RailsなどのRackベースのアプリケーション向けにファイルをアップロードすることを可能にする'gem'。

##How to[使うための準備]
まず、carrierwaveの最新版をインストールします。

terminal
$ gem install carrierwave

次にRailsのGemfileに以下を追記します。

Gemfile
gem 'carrierwave', '~> 2.0'

最後にサーバーをリスタートし、変更を適用させてください。
*CarrierWaveのversion 2.0では、Rails 5.0以降・Ruby 2.2以降が要求されます。

terminal
$ bundle install

##How to[画像アップロード機能]
アップローダーを生成します。

terminal
$ rails generate uploader image

これによって、以下のフォルダ・ファイルが生成されます。
app/uploaders/image_uploader.rb

モデルに紐づける場合は、モデルファイル内に以下の記載をしましょう。

model
mount_uploader :image, ImageUploader

##How to[リサイズ機能]
リサイズ機能を実装するには「Imagemagick」(画像処理ライブラリ)が必要となります。
まずはターミナルで「Imagemagick」をインストールしましょう。

terminal
$ brew install imagemagick

さらにRailsでリサイズ機能を実装するには、「RMagick」か「MiniMagick」というgemが必要となります。
READMEでは「MiniMagick」が推奨されているので、「MiniMagick」をインストールします。

Gemfile
gem 'mini_magick'
terminal
$ bundle install

リサイズ機能の詳細については、アップローダーのファイルに記載をします。
今回は通常のリサイズに追加でサムネイル用のリサイズも記載します。

app/uploaders/image_uploader.rb
include CarrierWave::MiniMagick
 process resize_to_fit: [800, 800]
 
 version :thumb do
   process resize_to_fill: [200,200]
 end
end

*resize_to_fit :縦横比を維持したまま、width, heightを100pxにリサイズする。
*resize_to_fill :縦横比固定でリサイズをして、さらにgravityで指定された位置をくりぬきます。
詳細は以下参考のwebサイトがわかりやすかったので、そちらご参照ください。

以上となります。最後までご覧いただき、ありがとうございました!
今後も学習した事項に関してQiitaに投稿していきますので、よろしくお願いします!
記述に何か誤りなどございましたら、お手数ですが、ご連絡いただけますと幸いです。

###参考
README
https://github.com/carrierwaveuploader/carrierwave/blob/master/README.md
Imagemagickとは
https://www.ossnews.jp/oss_info/ImageMagick
画像リサイズの種類
http://noodles-mtb.hatenablog.com/entry/2013/07/08/151316

17
16
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
17
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?