Active Storageで添付ファイルを付けられるようにする

チャットアプリでもECサイトでも、画像や動画が添付できるのは当たり前ですよね。そんなわけで、Active StorageというGemを使ってRailsアプリにファイルアップロード機能を追加する方法を学びました。

画像加工ツールたち

名称	区分	目的
Active Storage	Gem	簡単に画像アップロード機能が作れる
ImageMagick	ツール	コマンドラインから画像の保存形式の変更などが行える
mini_magick	Gem	ImageMagickをrailsから使えるようにしてくれる
image_processing	Gem	画像サイズを調整してくれる

導入

brew install imagemagick

Gemfile

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

bundle install

インストール後、サーバを再起動する

rails active_storage:install

rails db:migrate

has_one_attached

レコードとファイルを１対１の関係で結びつける
モデルに記述する

class Message < ApplicationRecord
  belongs_to :room
  belongs_to :user
  has_one_attached :image

  validates :content, presence: true
end

ビューファイルで画像を呼び出す

<div class="lower-message">
    <div class="message-content">
    <!-- 投稿したメッセージ内容を記述する -->
      <%= message.content%>
    </div>
    <%= image_tag message.image, class: 'message-image' if message.image.attached? %>
</div>

if message.image.attached?を加えることによって、画像ファイルが添付されていないmessageの時はimage_tagが読み込まれないようになる

表示される画像の大きさを調節する

variantメソッド

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

テキストがない画像だけの投稿を可能にする

 class Message < ApplicationRecord
  belongs_to :room
  belongs_to :user
  has_one_attached :image
  validates :content, presence: true, unless: :was_attached?

  def was_attached?
    self.image.attached?
  end
end

バリデーションにunlessオプションをつけ、imageがattacheされている場合のみ例外的に:contentがなくてもOKにする

ファイル添付を必須とする

デフォルトのエラーメッセージだと、「:imageを入力してください」となり、若干の違和感があるので、エラーメッセージもカスタマイズする。

例）商品（item）モデルの場合

class Item < ApplicationRecord
  belongs_to :user
  has_one_attached :image

  #省略

  validates :image, presence: { message: 'をアップロードしてください' }
end

ずみーBlog

元クラゲ研究者（見習い）の92年生まれがエンジニアを目指しながら日々寄り道するブログです。