Rails Active_storage -画像の保存を簡易化する-

Active storageとは

Active Storageは、ファイルアップロードを行うための機能です。これを使えば、フォームで画像の投稿機能などが簡単に作れます。クラウドストレージサービス(Amazon S3, Google Cloud Storage, Microsoft Azure Storageなど)に対するファイルのアップロードを簡単に行うことができます。

導入方法

• Active_storageに沿ったテーブルを作る

% rails active_storage:install

Active_storageをインストールし、関連ファイル(マイグレーションなど)を生成

%rails db:migrate

Seaquel Proを確認すると以下のようなテーブルが生成されていたらここまでは成功です。

これで画像を保存するための「入れ物」は完成しました。

モデルの記述： 画像１枚を添付する

「メッセージに画像を添付する」、「商品情報に画像を添付する」など画像情報は他モデルと関わることが多くあります。ここでよくあるのが、「imagesテーブルがあるからimageモデルを作ってアソシエーションを組む」という考え方です。実はactive_storageで作成したテーブルに関しては別途モデルを作る必要はなありません。関わらせたいモデルに「has_one_attached :ファイル名」を追記すればアソシエーションは完成します。 今回はメッセージとアソシエーションを組むことを想定していきます。 models/message.rb

class Message < ApplicationRecord
　　~他 associationなどの記述は省略~

  has_one_attached :image
 
end

アソシエーションというよりも、「擬似的な画像カラムを作った」と言った方がイメージしやすいかもしれません。

コントローラの記述： ストロングパラメータ

seaquel_proのmessageテーブルを見てみると、imageカラムは存在していません

しかしながらモデルで記述したhas_one_attachedによって、messagesテーブルには「擬似的なimageカラム」が存在していることになっています。
※画像情報はrails active_storage:installで生成したテーブル内に保存されます。

このことからmessages_controller.rb内のparamsで画像の情報が飛ばせるようになりました。

controllers/messages_controller.rb

class MessagesController < ApplicationController

  def new
    @message = Message.new
  end

  def create
   @mesage = Message.create(message_params)
  end

  private

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

ビューの記述： 画像の送信

ここに関してはいつも通りform要素のfile_fieldを使います。

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

ビューの記述： 画像の表示

imgタグでも可能ですが、railsのヘルパーメソッドであるimage_tagを使って記述を簡略化します。

<% if @message.image.attached? %>
  <%= image_tag @message.image %>
<% end %>

以上です！！