画像のアップロードができるようにする
画像のアップロードとは
今日は画像のアップロード機能の追加方法について勉強していきます。
この機能って結構アプリケーションを作成する時に使用しますよね。
ただなんだか難しそう、、、、!
そう思ってたんですけど意外と簡単でした。
なんせGemという簡単なライブラリを使えばあっという間に実装できちゃうんです。
今日はそんな画像アップロードの方法について書いていきます。
CarrierwaveというGemを使う
まず下準備としてgemのインストールをしましょう。
gemfileにgemの記述を追加して、ターミナルでbundle installを行えばいいんです。
じゃあ実際にやってみます。
今回は画像アップロードができる"carrierwave"と一緒に画像処理をしてくれる"mini_magick"を一緒に追加しました。
(幾つかの記事でcarrierwaveと共に「rmagick」の導入が促されていますが、こちらのgemは最新版がインストール出来ない不具合があるためインストールしないようにしましょう。かわりに「mini_magick」というgemをインストールすることをおすすめします。)
gemfile.lockを確認すると、きちんと反映されていました。オッケーです!
画像のアップローダーを作成する
画像のアップローダーは
ターミナルのコマンド
$ rails g uploader image
を入力すると
image_uploader.rbというアップローダーを作成できます。
このアップローダー、なんで作る必要があるのかというと
アップロードした画像を保存する場所を指定できる
という特徴があるからなんです。
なので、画像のアップロード機能を追加したい場合は
gemのインストール後のアップローダーを生成して
色々とここから設定を記述していく必要があるみたいです。
私もその通りにアップローダーを生成しました。
これで、app/uploadersのディレクトリ内に
image_uploader.rbが生成されたのがわかります。
image_uploader.rbに記述する
さっき作ったimage_uploader.rbに
画像の設定を色々と記述していきます。
以下に色々と設定したいパターンごとの見本を載せておくので
参考にしてください。
私は今回、縦横比を維持したまま、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]
カラムと結びつける
そしてアップロードされた画像と実際にあるカラムを結びつけてあげます。
アップロードされた画像がテーブルのどこに保存されるべきか
指定してあげないと、画像がどこにもされないでエラーがおきますから。
今回はチャットアプリのメッセージと一緒に画像もアップロードできるように
機能を追加しているので
メッセージテーブルのカラムを見てみます。
そうすると、imageカラムがありますね。
そう、このimageカラムにアップロードした画像が入ってくれればいい訳です。
なので今回はimageカラムと結びつけてあげます。
mount_uploaderメソッドを使う
画像とカラムを結びつけるために、
「mount_uploaderメソッド」を使います。
mount_uploader :結びつけたいカラム名, ImageUploader
mount_uploader :image, ImageUploader
このようにmount_uploader :結びつけたいカラム名, さっき色々と画像の設定をしたファイル名
を記述することによって
「ImageUploader に書いた設定に沿って画像をイメージカラムと結びつけてね」
と設定できます。
これで完成です!
画像がアップロードできるように設定できました。
まとめ
以上の手順をまとめると
- gem carrierwave, mini_magickをインストール
- uploaderを作成し、画像の設定を行う
- 保存したいモデルのカラムを結びつける
です。
簡単ですね。
ぜひやってみてください!!!