はじめに
やりたいこと
- 簡単に画像を登録したい
Active Storage でできること
- モデルに簡単に画像を紐付けできる
- Amazon S3、GCPなどクラウドストレージへのアップデートも可能 => たしかAWSでデプロイするときもActive Storageまわりはいじらなくてよかったはず。。。
やってみて
毎度お世話になってますが初期設定のやり方を毎回忘れるので備忘しておきます。
※Active Storage はGem？
Active Storage はファイルアップロード用のGemだそうです。
もともとは外部からインストールが必要なGemでしたがRailsに統合されたため、Active Storage 自体のbundle installは不要です。
参考URL
Rails ガイド > Active Storage の概要
手順
- 画像加工ツールの導入
- Active Storage のインストールとマイグレーション
- アソシエーション
- ストロングパラメーターに含める
- 保存した画像を表示する
画像加工ツールの導入
ImageMagicのインストール
ImageMagick とは
画像処理ライブラリのひとつ。Gemではなくソフトウェアなので、Homebrewからインストールします。よって一度構築すれば次回以降この作業は不要です。
ターミナル
% brew install imagemagick
必要なGemのインストール
MiniMagick
ImageMagickをRubyで扱うためのGem
ImageProcessing
画像サイズ調整用のGem
Gemfile
gem 'mini_magick'
gem 'image_processing', '~> 1.2'
ターミナル
% bundle install
&サーバー再起動
Active Storage のインストールとマイグレーション
Active StorageはあくまでGemなのでインストールを行います。
ターミナル
% rails active_storage:install
インストールが完了するとActive Storage関連のマイグレーションが作成されるので、そのままmigrateします。
ターミナル
% rails db:migrate
アソシエーション
画像を扱わせたいモデルにアソシエーションを記述します。
models/profile.rb
class Profile < ApplicationRecord
has_one_attached :image
end
この際、対象のテーブルにimageカラムを設ける必要はありません。
ストロングパラメーターの設定
最後にimageをストロングパラメーターに含めます。
profiles_controller.rb
class ProfilesController < ApplicationController
〜中略〜
private
def profile_params
params.require(:profile).permit(:image)
end
end
以上で、画像データが保存できるようになりました。
保存した画像を表示する
image_tagメソッドを使用して表示します。
example
image_tag モデル.カラム名
image_tag profile.image
画像の有無で条件分岐する
画像ファイルのある／なしで表示を変える場合、attached?メソッドを使います。
example
image_tag profile.image, class: 'profile-image' if profile.image.attached?
※画像の大きさ調整の記事を書く！
おわりに
Qiita、2回目の投稿です。
できる限り毎日、ネタが尽きるまで更新していこうと思います。
最後まで読んでいただきありがとうございました！！
✔︎