0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ActiveStrageとは

Last updated at Posted at 2022-11-03

Activestrageとは

Webアプリを作成していると、必ずと言っていいほど必要な画像の取り扱い。
Activestrageとは単純に言ってしまえば画像を取り扱うためのgemです。
ほぼ毎回使うと言っても過言ではないので、忘れないようにまとめてみました。

Activestrageを導入しよう

画像を投稿できるようにするには、ActiveStorageが必要です。
なぜなら画像はカラムとして保存することができないため、別の手段を使って保存する必要があり、その役割を担ってくれるのがこのActiveStorageなのです。
では、まずはインストールから始めましょう。

$ rails active_storage:install

インストールが終わるとdb/migrate内にActiveStorageのマイグレーションファイルが追加されます。
マイグレーションファイルということは...
そう、毎回おなじみのこちらのコマンドが必要です。

$ rails db:migrate

ActiveStorageは3つのテーブルを作成します。
①active_storage_blobs
②active_storage_variant_records
③active_storage_attachments

①のblobsは、識別keyやファイル名、ファイルの種類、サイズなどを管理します。
②のvariantはサイズの変更などの加工情報を記録してくれます
③attachmentsはblobモデルとアプリ内のモデルを関連付ける中間テーブルの役割です。
アプリ内の他のモデルと紐付けられるように、関連するモデルのFKカラム名(外部キー)をFK値として持っているのはこの子です。

モデルへの記述

ActiveStorageを使うには、どのモデルに画像を使うのか記述する必要があります。
listだとかbookだとかpostだとか各々のモデルに合わせて記入してください。

app/models/post.rb
class Post < ApplicationRecord
  has_one_attached :image
end

※もし複数のファイルを扱いたい場合はoneをmanyに変更してください。

app/models/post.rb
class Post < ApplicationRecord
  has_many_attached :image
end

モデルに記載することで、このモデルにimageカラムが追加されたのと同じように扱うことができます。
ActiveStorageを使うとわざわざpostモデルにカラムを追加しなくてもいいので楽ですね!
あとはストロングパラメータ内にimageを追加すれば下準備は完了です。

app/controller/posts_controller.rb
:
  private
  def post_params
    params.require(:post).permit(:○○, :○○, :image) #image追加
  end

以上がActivestrageの基本の説明になります。

投稿フォーム作成

あとは画像投稿するためのviewを整えていきましょう。

app/views/posts/new.html.erb
<p>画像</p>
<%= f.file_field :image, accept: "image/*" %>
<%= f.submit %>

"file_field"はファイル投稿のためのフィールドです。
ファイルであれば画像以外(動画や音声と)も投稿できてしまうので、accept: "image/*"を使用し画像ファイルのみ投稿できるよう設定しています。
投稿後の画像を表示させるコードを記述すれば完了です。

app/views/posts/index.html.erb
<p>画像</p>
<% @posts.each do |post| %>
 :
 :
 <%= image_tag post.image, size: "100x100" %>
<% end %>

このimage_tagにpostに紐づいているimageを渡すことで画像が表示できます。
以上になります。
下記記事にもっと詳しく書いてありますのでよければ参照ください。

https://pikawaka.com/rails/active_storage

複数のファイルを取り扱ってみたい!などの要望がある方は下記記事参照ください☺︎

https://qiita.com/hmmrjn/items/7cc5e5348755c517458a

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?