34
43

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

Rails 画像アップロード機能の実装方法 メモ

Posted at

#初めに
railsで画像をアップロードする機能を実装するには、carrierwaveというgemを使う方法があります。
今回、画像を投稿する機能について学習したので、自分なりにまとめておこうと思います。

##使用するgem
###・Carrierwave
画像をアップロードするために必要な機能を追加するためのgem

※Carrierwaveの導入には「ImageMagick」がインストールされている必要があるので、
実装前に以下のコマンドを入力して置くといいかもです。

$ brew install imagemagick

###・Minimagick
画像に対して、画像同士を合成したり、リサイズしたりと編集することができるようになるためのgem

##実装
では実装に入っていきます。
1.まずは上記の2つのgemを扱えるようにするためGemfileに以下のように追記します。

Gemfile
gem 'carrierwave'
gem 'mini_magick' #画像に対して処理を行う場合

2.gemをGemfileに追記したのでターミナルで以下のコマンドを実行します。

$ bundle install

3. 次にcarrierwaveを利用するためのアップローダーを作成します。carrierwaveを導入したことで以下のコマンドが利用できるようになったので、ターミナルで実行しましょう。

$ rails g uploader image ※imageの箇所は任意の名前でOKです。例:pictureなど

するとapp/uploadersディレクトリ以下にimage_uploader.rbが作成されます。
このファイルに別途記述を行うことで、アップロードの仕方を設定できます。
※設定方法は下記5.以降を参照

4.アップローダーが作成できたので、画像アップロード機能を実装したいモデルに対して編集を行っていきます。

モデル名.rb
# app/models/モデル名.rb
  mount_uploader :image, ImageUploader

上記を追記することで、アップローダーを任意のモデルに対して
マウントすることができました。
※マウント
取り付ける、搭載するなどの意味

↑↑↑画像をアップロードする機能のみの場合はここまで↑↑↑

5.アップロードする画像に対して別途処理を行いたい場合は
以下の設定を行います。
3.で行ったrails g uploader imageで作成された
image_uploader.rbを確認し、
include CarrierWave::MiniMagickがコメントアウトされているので、これを以下のように解除しましょう。
コメントアウトを解除することでgem 'mini_magick'を使用することができるようになります。

app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick

これでmini_magickの機能が使用できるようになったので
例えば、image_uploader.rbの任意の箇所に以下のコードを追記すると、縦横比を維持したまま、width, heightを800pxにリサイズしアップロードすることができるようになります。

app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick
  # ~省略~
  process resize_to_fit: [800, 800]
end

#おわりに
以上がgemのCarrierwaveとmini_magickを使用した画像のアップロード機能の実装になります。
画像の投稿はwebアプリケーションにおいて基本的な機能ですので抑えて置きたいと思います。

###使用したgemのGithub
・Carrierwave
https://github.com/carrierwaveuploader/carrierwave
・mini_magick
https://github.com/minimagick/minimagick

34
43
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
34
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?