はじめに
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を実行します。
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メソッドを使って、一つの画像ファイルを添付できるようにしました。
class Post < ApplicationRecord
~略~
has_one_attached :image
~略~
end
これでpostsテーブルに画像ファイルの紐付けができました。
このとき、postsテーブルにカラムを追加する必要はありません。
次にストロングパラメーターにimageを追加し、画像ファイルの保存を許可します。
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" %>