[Rails]ActiveStorageで画像投稿機能を作成しよう！

前提条件

railsに関しての基礎的な知識があることのみです

事前準備

今回の画像投稿機能を作成するにあたり以下のものを準備します。
まずはそのツールに関しての説明をします
・ActiveStorage
・ImageMagick
・MiniMagick
・ImageProcessing

ActiveStorageとは

ActiveStorageとは「gem」のことです
インストールすることで、画像やファイルのアップロードを簡単にするメソッドを使用できたり、
画像を保存するテーブルを簡単に作成できるようにします。

ImageMagic

ImageMagicはgemではなく、ソフトウェアです。
画像の作成、サイズ変更、保存形式の変更を行います。
Homebrewからインストールします。

ちなみに、こいつ単体ではRails内で使用できません。
使用するためにはMinMagicが必要です。

MiniMagick

こいつは、ImageMagickがRails内で使用できるようにするためのgemです。
ただ、こいつも完璧ではないんですよね、、、↓

ImageProcessing

MiniMagickでは提供できない画像サイズを調整する機能を持ちます

実際にインストールをして行こう

ここからはただただ無心で進めましょう

①ImageMagickのインストール

bundle install imagemagick

②MinMagickとImageProcessingのインストール

Gemfile

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

もちろん、記載するだけでなく
ターミナルでこれを打たないと意味ないですよ！！

bundle install

③ActiveStorageのインストール
※以下は一旦rails sでサーバは立ち上げた後に行ってください。

% rails active_storage:install
% rails db:migrate

DBに、「active_storage_attachments」と「active_storage_bolbs」が作成されていれば準備完了です

（SequelProというツールでDBはみれますよ！！！調べてみてください）

実装していこう

ようやく準備が終了！！
ここからが本番。

まずは今回、Messageモデルに対して画像を保存させたいという前提で話を進めます。

MessagesテーブルとActiveStorageテーブルで管理された画像ファイルを1対1でアソシエーションします。（つまり1メッセージにつき1枚だけ添付可能とする）

models/message.rb

class Message < ApplicationRecord
  has_one_attached :image #ここはファイル名記載、なんでもOK！
end

:imageはファイル名なので:photoでもいいし、:pictureでもOKです

これでテーブル同士はつながりました。

ただし、画像を保持するカラムはMessagesテーブルにはないので（だからこそ、上記でアソシエーションした）、imageという名前でアクセスできるようになった画像ファイルの保存を許可する実装を行うために、ストロングパラメータにmergeしてあげましょう。

messages_controller.rb

 private
  def message_params
    params.require(:message).permit(:content, :image).merge(user_id: current_user.id)
  end

これでよし！！！

あとは画像を表示させるだけ

あとは、viewファイルで表示すれば完成です！！

たとえば、こんな感じです

image.html.erb

 <%= image_tag message.image, class: 'image_message' %>

ちなみ、このままでは画像なしの場合にエラーが発生しますので
attached?メソッドを使用するといいです

image.html.erb

<%= image_tag message.image, class: 'image_<%= image_tag message.image, class: 'message-image' if message.image.attached? %' if message.image.attached? %>

さて、ここまでで実際に投稿機能を実装してテスト投稿してみた方は思ったでしょう、、、、
サイズがバラバラじゃねーか！！！と、、、、.

そんなときは、variantメソッドで高さと幅を決めましょう！

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

こんな感じで使ってみましょう↓

image.html.erb

<%= image_tag message.image.variant(resize: '500x500'), class: 'message-image' if message.image.attached? %>

終わりに

初めて使う方は難しく感じるかもしれませんが、触っているうちに慣れてきて便利さに気づくかと思いますので是非当記事を参考にしながら練習してみてください。