画像のアップロードができるようにする

画像のアップロードとは

今日は画像のアップロード機能の追加方法について勉強していきます。

この機能って結構アプリケーションを作成する時に使用しますよね。

ただなんだか難しそう、、、、!

 

そう思ってたんですけど意外と簡単でした。

 

なんせGemという簡単なライブラリを使えばあっという間に実装できちゃうんです。

 

今日はそんな画像アップロードの方法について書いていきます。

 

CarrierwaveというGemを使う

まず下準備としてgemのインストールをしましょう。

 

gemfileにgemの記述を追加して、ターミナルでbundle installを行えばいいんです。

じゃあ実際にやってみます。

 

f:id:lilybelly:20181007123153p:plain

 

今回は画像アップロードができる"carrierwave"と一緒に画像処理をしてくれる"mini_magick"を一緒に追加しました。

(幾つかの記事でcarrierwaveと共に「rmagick」の導入が促されていますが、こちらのgemは最新版がインストール出来ない不具合があるためインストールしないようにしましょう。かわりに「mini_magick」というgemをインストールすることをおすすめします。)

 

f:id:lilybelly:20181007123534p:plain

gemfile.lockを確認すると、きちんと反映されていました。オッケーです!

 

画像のアップローダーを作成する

画像のアップローダーは

ターミナルのコマンド

$ rails g uploader image

を入力すると

image_uploader.rbというアップローダーを作成できます。

 

このアップローダー、なんで作る必要があるのかというと

アップロードした画像を保存する場所を指定できる

という特徴があるからなんです。

 

なので、画像のアップロード機能を追加したい場合は

gemのインストール後のアップローダーを生成して

色々とここから設定を記述していく必要があるみたいです。

 

私もその通りにアップローダーを生成しました。

 

f:id:lilybelly:20181007125647p:plain

 

これで、app/uploadersのディレクトリ内に

image_uploader.rbが生成されたのがわかります。

 

image_uploader.rbに記述する

さっき作ったimage_uploader.rbに

画像の設定を色々と記述していきます。

 

以下に色々と設定したいパターンごとの見本を載せておくので

参考にしてください。

 

f:id:lilybelly:20181007131430p:plain

 

私は今回、縦横比を維持したまま、width, heightをリサイズしたかったので

先程 インストールした画像処理ができるmini_magickを使ってリサイズを行います。

 

そこで上記のリサイズするパターンを見習って

include CarrierWave::MiniMagick を記述するのと、

(RMagickではなく今回はMiniMagicを使ってるので)

 

縦横比を維持したまま、width, heightをリサイズするには

「resize_to_fit」が使えるので、

process resize_to_fit: [800, 800]

で縦横比を維持したまま、アップされた画像を width, heightが800pxにリサイズされるように設定しました。

 ↓

  include CarrierWave::MiniMagick

  process resize_to_fit: [800, 800]

 

カラムと結びつける

そしてアップロードされた画像と実際にあるカラムを結びつけてあげます。

 

アップロードされた画像がテーブルのどこに保存されるべきか

指定してあげないと、画像がどこにもされないでエラーがおきますから。

 

今回はチャットアプリのメッセージと一緒に画像もアップロードできるように

機能を追加しているので

メッセージテーブルのカラムを見てみます。

 

f:id:lilybelly:20181007130213p:plain

 

そうすると、imageカラムがありますね。

そう、このimageカラムにアップロードした画像が入ってくれればいい訳です。

なので今回はimageカラムと結びつけてあげます。

 

mount_uploaderメソッドを使う

画像とカラムを結びつけるために、

「mount_uploaderメソッド」を使います。

 mount_uploader :結びつけたいカラム名, ImageUploader
 mount_uploader :image, ImageUploader


このようにmount_uploader :結びつけたいカラム名, さっき色々と画像の設定をしたファイル名
を記述することによって

「ImageUploader に書いた設定に沿って画像をイメージカラムと結びつけてね」
 と設定できます。


これで完成です!
画像がアップロードできるように設定できました。

 

 

まとめ

以上の手順をまとめると

  1. gem carrierwave, mini_magickをインストール
  2. uploaderを作成し、画像の設定を行う
  3. 保存したいモデルのカラムを結びつける

です。

簡単ですね。

ぜひやってみてください!!!