[Rails]Railsアプリへの画像アップロード機能を実装する[ActiveStorage]

記事の概要

　画像ファイルアップロード機能の実装についてまとめました。まずは、各種画像加工ツールの導入手順をまとめたのち、簡単に画像アップロードを実現してくれるActiveStorageについてまとめました。

画像加工ツール導入手順

①ImageMagickの導入

　まず、画像変換ツールであるImageMagickをインストールする。これはGemではなくソフトウェアなので、Homebrewからインストールする。

% brew install imagemagick

②MiniMagickとImageProcessingの導入

　MiniMagickは、ImageMagickの機能をRuby on Railsで使えるようにするためのGem。
　ImageProcessingは、画像サイズを調整する役割を持つGem。

Gemfile

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

% bundle install

ActiveStorage導入手順

　ActiveStorageはGemですが、Railに統合されているため、改めてGemfileへの記述とbundle installは不要。
　アプリ内でActiveStorageを利用できるようにするために、専用テーブルを下記コマンドで生成します。

% rails active_storage:install 

　これでマイグレーションが生成されるので、続けてマイグレート実行。

% rails db:migrate

　DBに「active_storage_attachments」と「active_storage_bolbs」の二つのテーブルが生成されていれば無事準備完了。

画像保存機能の実装

①ActiveStorageと、紐付けたいモデルとの間のアソシエーション

　今回、とあるモデルテーブルの各レコードと画像ファイルを1対1で紐付けるとする。例えば一つのツイートにファイルを一つ添付したい場合。has_one_attachedメソッドを使い、:ファイル名を記述。

models/tweet.rb

class Tweet < ApplicationRecord
  has_one_attached :image #ここのファイル名の命名は任意。
end

　一つのツイートに複数枚添付したいなら、has_one_attachedの代わりにhas_many_attachedとする。:imageは:imagesとする(複数形)。

②フォームの実装

new.html.erb

<%= form_with model: @tweet, local: true  do |form| %>
  <%= form.text_area :content %><br>
  <%= form.file_field :image %><br>
  <%= form.submit %>
<% end %>

　複数枚アップロードする場合は、:imageを:imagesのように複数形にして、file_fieldにmultiple: trueを追記して、複数ファイルの選択ができるようにする。

③画像の保存を許可する

　コントローラー側で、ストロングパラメータを定義し受け取った画像の保存を許可する。imageという名前で送られてくる画像を含めてpermitする。

tweets_controller

def create
  Tweet.create(tweet_params)
end

private
# ここから、ストロングパラメータの記述
def tweet_params
   params.require(:tweet).permit(:content,:image).merge(user_id: current_user.id)
end

　ここも、複数枚の画像保存する場合は、:imageを、images:[]のように記述しておく。

画像を表示させる

　image_tagヘルパーメソッドで画像を表示する。引数にモデルから画像ファイルを呼出して記述する。ここでは、ファイル名imageとしているので、tweet.imageで取得できる。

#　ビューファイル
<%= image_tag tweet.image %>

　画像ファイルの表示サイズを指定したい時はvariantメソッドを使う。

モデル.ファイル名.variant(resize: '幅x高さ')