はじめに

Active Storageを使うと、画像などのファイルのアップロードを簡単にするメソッドが使用できたり、画像を保存するテーブルを簡単に作成できます。

目次

画像加工ツールの導入
Active Storageのインストール
画像の保存方法
画像の表示

1. 画像加工ツールの導入

まず画像加工に必要な画像変換ツールと、これをRailsから使えるようにするためのgemを導入します。
ImageMagicはコマンドラインから画像の作成やサイズ変更、保存形式などの変更ができます。
以下のコマンドを実行します。

ターミナル

brew install imagemagick

ImageMagicはgemではないのでRubyやRailsで扱うには、MiniMagickというgemを導入する必要があります。
MiniMagicはImageMagicをRubyで扱えるようにするためのgemです。
次に画像サイズの変更をするためのgemをインストールします。
ImageProcessingはMiniMagicではできない、画像サイズを調整する機能を提供するgemです。
以下のようにgemfileの一番下に追記します。
その後、コマンドでbundle installを実行します。

gemfile

gem 'mini_magick'
gem 'image_processing', '~> 1.2'

2. Active Storageのインストール

ターミナルで以下を実行します。

ターミナル

rails active_storage:install

Active Storageに関連したマイグレーションが作成されるので、続けて以下を実行します。

ターミナル

rails db:migrate

3. 画像の保存方法

Active Storageのテーブルに画像を保存するために、アソシエーションの定義とimageカラムの保存の許可を設定します。
今回はhas_one_attachedメソッドを使って、一つの画像ファイルを添付できるようにしました。

app/models/post.rb

class Post < ApplicationRecord
  ~略~
  has_one_attached :image
  ~略~
end

これでpostsテーブルに画像ファイルの紐付けができました。
このとき、postsテーブルにカラムを追加する必要はありません。

次にストロングパラメーターにimageを追加し、画像ファイルの保存を許可します。

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  ~略~
  def post_params
    params.require(:post).permit(:name, :image, :price, :evaluation, :description, :category_id, :shop_name).merge(user_id: current_user.id)
  end
  ~略~
end

4. 画像の表示

Railsのヘルパーメソッドであるimage_tagメソッドを用いて画像を表示します。

例

<%= image_tag post.image, class: "post-img" %>

attached?メソッドを使うことで画像が存在しないときのエラーを防ぐことができます。

例

<%= image_tag @post.image ,class:"user-box-img" if @post.image.attached? %>

上記のように記述することで画像が存在する場合のみimage_tagが読み込まれます。

Active Storageを導入している場合、variantメソッドを用いることができます。
variantメソッドを使用することで、画像ファイルの表示サイズを指定することができます。

例

<%= image_tag post.image.variant(resize: '500x500'), class: "post-img" %>