はじめに

やりたいこと

簡単に画像を登録したい

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回目の投稿です。
できる限り毎日、ネタが尽きるまで更新していこうと思います。

最後まで読んでいただきありがとうございました！！

✔︎