ActiveStorageを使う！

アウトプットに時間を使わなきゃと思いつつ中々やらずにいたので、重い腰をあげようかと…
今回は、毎度使っていてあれ？と振り返っていることなので自分が使っていることこちらに書き出してみようと思います。

概要

• ActiveStorageとは
• 導入方法
• 使用方法
• 保存した画像を表示
• 画像加工のツールについて
• 感想

ActiveStorageとは

Active StorageとはAmazon S3、Google Cloud Storage、Microsoft Azure Storageなどの クラウドストレージサービスへのファイルのアップロードや、ファイルをActive Recordオブジェクトにアタッチする機能を提供します。development環境とtest環境向けのローカルディスクベースのサービスを利用できるようになっており、ファイルを下位のサービスにミラーリングしてバックアップや移行に用いることもできます。

アプリケーションでActive Storageを用いることで、ImageMagickで画像のアップロードを変換したり、 PDFやビデオなどの非画像アップロードの画像表現を生成したり、任意のファイルからメタデータを抽出したりできます。

Railsガイド引用

画像アップロード機能が簡単に実装できるGemです。
ActiveStorageはRails5.2から標準で搭載されるようになりました。

導入方法

• Active Record モデルを用意する まず、導入したいアプリケーションのディレクトリで

rails active_storage:install

rails active_storage:installコマンドを実行すると、Active Storageに関連したマイグレーションが作成されます。
続けてマイグレートします。

rails db:migrate

生成されるテーブルは以下の二つになります。
画像用のカラムを用意する必要がない点もActive Storageの特徴の一つです。

active_storage_blobs

カラム名	保存内容
id	ID
key	ファイルを一意に識別するkey
filename	アップロードしたファイルの名前
content_type	ファイルの種類
metadata	メタデータ(画像なら縦横の大きさなどが格納される)
byte_size	ファイルサイズ(byte単位)
checksum	チェックサム
created_at	作成日時

active_storage_attachments

カラム名	保存内容
id	ID
name	モデルの属性名(Userモデルのavatarとか)
record_type	モデル名(Userとか)
record_id	record_typeのモデルのID
blob_id	active_storage_blogsのID
created_at	作成日時

使用方法

例としてpostテーブルをつかいます。

やることは

• Active Storageのテーブルとpostテーブルのアソシエーションを定義
• post_controller.rbにて、imageカラムの保存を許可

モデルに1つの画像を添付するには、has_one_attachedを使います。

class モデル < ApplicationRecord
  has_one_attached :ファイル名
end

has_one_attachedメソッド

各レコードとファイルを1対1の関係で紐づけるメソッドです。
has_one_attachedメソッドを記述したモデルの各レコードは、それぞれ1つのファイルを添付できます。
has_one_attached:ファイル名は、
:photo、:avatar、:hogeなど、ファイルの用途に合わせて好きなものを指定してください。

画像の保存を許可するストロングパラメーター

  private

  def post_params
    params.require(:post).permit(:image).merge(user_id: current_user.id)
  end

ストロングパラメーターについて割愛
これでイメージ画像の保存を許可できました。

保存した画像を表示

• image_tagメソッド

img要素を生成するRailsのヘルパーメソッドです。

image_tagメソッドでは、複雑なRailsのディレクトリパスを指定しなくても、モデルから画像ファイルを呼び出して引数に記述するだけで、画像を表示するimg要素を生成します。つまり簡単。

# ファイルをモデルから指定する場合
<%= image_tag モデル.画像ファイル %>
<%= image_tag user.avatar %>

# app/assets/ディレクトリ下の画像ファイルパスでも指定できる
<%= image_tag 画像ファイルのパス %>
<%= image_tag "avatar.png" %>

自談（自分体験談そして余談）
image_tagの存在忘れて一生懸命画像表示しようとしていたw
この場合のpostモデルから引っ張ってもimage自体は他テーブルにあるため、下記のような表示にしかならなかった。

#<ActiveStorage::Attached::One:0x00007f8ba7b765f8>

どうようにしてオプションもある。

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

attached?メソッド

レコードにファイルが添付されているかどうかで、trueかfalseを返すメソッドです。

モデル.ファイル名.attached?

用途としては必ず画像を表示する記述が読み込まれるため、画像が存在しない場合にはエラーが起きてしまうので、こちらのメソッドを使い
if文を使って工夫することで画像が存在する場合にのみ画像を読み込む記述を読み込まれるようにすることができる。
＊＊クラス属性もつけられます。

画像加工のツールについて

• ImageMagick
• MiniMagick
• ImageProcessing

ImageMagick

コマンドラインから画像に処理を加えることができるツールです。
処理としては、画像の作成やサイズ変更、保存形式の変更などがあります。

ImageMagickはGemではなく、ソフトウェアです。
そのため、Homebrewからインストールします。

GemではないImageMagickをRubyやRailsで扱うには、MiniMagickというGemが必要となります。

brew install imagemagick

こちらは一度入れれば問題ないのですでに入っている場合は、とばしてOK。

MiniMagick

ImageMagickの機能をRubyで扱えるようにしてくれるGemです。
RailsでImageMagickを扱うために必要となります。

ImageProcessing

MiniMagickでは提供できない、画像サイズを調整する機能を提供するGemです。

# Gemfileの一番下に記述する

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

 bundle install

gemの更新をしたので、サーバーの立ち上げを忘れずに。

こちらを実装するとvariantメソッドを使用することで、ファイルの表示サイズを指定できます。

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

感想

記録として残すつもりで書きました。
最後グダッてしまいましたが、文章力や伝え方について改善点があればコメントお願いします。
他、書いてあることに間違いがあれば申し訳ないです。ご指摘お願いします。
このほかにもS3を使う方法なんかをよく見かけますがこちらは実際に試したあと、追記で残そうかなと思っています。
以上、ありがとうございました。

　参考URL

https://qiita.com/hmmrjn/items/7cc5e5348755c517458a
https://qiita.com/kimuray/items/3335a87d3488be340374
https://qiita.com/sibakenY/items/e550166970e84d96e16e
https://railsguides.jp/active_storage_overview.html#active-storage%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6