はじめに
アプリケーション作成にあたって、ファイルのアップロード機能の実装は、割と導入することが多いんじゃないかなーと思っています。
整理してまとめておこうと思います！
Active Storage
RailsではActive StorageというGemで画像などのファイルのアップロードを簡単にするメソッドが使用できたり、画像を保存するテーブルを簡単に作成できます。
現在Railsに統合されているのでいちいちGemfileに記述をする必要はないそうです。
※その他に必要なGemがあるのでそちらは記述してインストールする必要があります
画像加工ツール
Active Storageでファイルをアップロードして保存しても、サイズや色などを加工することはできません。
そこで画像を加工できるように、画像変換ツールやGemをインストールします。
・ ImageMagick
まずはImageMagick。
これはGemではなくソフトウェアです。なので一回インストールしちゃえば、それ以降は基本的にいちいちコマンド実行する必要ないと思います！
コマンドラインから画像に処理を加えることができ、画像の作成やサイズ変更、保存形式の変更などができます。
Homebrewからインストールします。
% brew install imagemagick
・ MiniMagick
こちらはGemです。
先ほどのImageMagickをRubyで扱えるようにしてくれます。
・ ImageProcessing
こちらもGemです。
MiniMagickによってImageMagickがRubyが使えるようになったのですが、サイズ調整はできないみたいです。
そこでこのImageProcessingがサイズ調整を担当してくださるそうです。
なんだか、ややこしいですね。。。
魔法を使うにも下準備はたくさんしてあげないとってことなんでしょうか 笑
魔法陣を描いてると思って導入しちゃってください！
# Gemfileの一番下に記述する
gem 'mini_magick'
gem 'image_processing', '~> 1.2'
からの
% bundle install
画像加工ツールはこれでOKです
Active Storage インストール
ターミナルで下記のコマンド入力で完了です
% rails active_storage:install
% rails db:migrate
データベースを確認して
[active_storage_attachments]と[active_storage_blobs]
というテーブルが作成されていれば、導入成功です。
どうやって保存するのか
おそらく画像をアップロードして保存する時は他の情報も一緒に保存することが多いと思います。
例えばメッセージと一緒に画像を添付して保存とか
でも、メッセージのテーブルとは別にActive Storageのテーブルが用意されています。なのでその二つのテーブルのアソシエーションを組んであげて関連づけてあげれば問題なしです！
※メッセージのテーブルに:imageとかのカラムを作成する必要はありません！！
上記の例でmessagesというテーブルにレコードが保存される時、画像を添付して保存する方法を説明します。
アソシエーションを定義
Active Storageのテーブルと messagesテーブルのアソシエーションを組みます。
そのためにhas_one_attachedメソッドを使います
has_one_attachedは各レコードとファイルを1対1の関係で紐づけるメソッドです。
has_one_attachedメソッドを記述したモデルの各レコードは、それぞれ1つのファイルを添付できます。
今回の場合messageモデルに下記のように記述します
class Message < ApplicationRecord
has_one_attached :image
end
これでアソシエーションは組めました。
あとはmessageのストロングパラメーターに:imageも許可してあげたら、メッセージ送信時に添付されているファイルはActive Storageのテーブルへ保存されるはずです。
おまけ
最後に、Active Storage関連で重要そうだから名前とざっくりとした役割だけ書いといて、詳しい使い方は調べたり別の回でまとめようと思っているものたちを適当に書いておきます。
image_tagメソッド
画像関連のimg要素を生成するヘルパーメソッド
ビューですごくご活躍されているイメージ
attached?メソッド
ファイルが添付されてたらtrue
されてなかったらfalseを返してくれる
オブションでifと一緒に使ってあげると便利そう
variantメソッド
ファイルの表示サイズが指定できる
'幅 x 高さ'みたいな感じで大きさ調整するみたいなんですが、[ x ]はエックスらしいので、なんだか、それは覚えておこうと思った