yuta_eng_prg’s diary

筆者がプログラミング学習の内容を綴るだけのブログです。

画像投稿機能の実装方法(Active Storage)

画像投稿機能の実装方法(Active Storage)について確認します。

・ファイルアップロードを簡単に実装できるGemのActive Storage ・コマンドラインから簡単に画像の保存形式の変更などが行えるツールのImageMagick ・画像のサイズを調整してくれるgemのimage_processing

の3つを導入します。

まず、ターミナルで

% brew install imagemagick

上記のコマンドを実行し、Gemfileに

Gemfileの一番下に記述します。
gem 'mini_magick'
gem 'image_processing', '~> 1.2'

上記のコードを追加し、ターミナルで

% bundle install

を実行します。

その後サーバーを再起動させて変更を反映させます。

次に、Active Storageを準備します。 ターミナルで

% rails active_storage:install

% rails db:migrate

のコマンドを実行します。

以上で導入は終了です。

次に、画像をimageカラムとして保存するテーブルのモデルファイルを

class Message < ApplicationRecord
下記のコード一文を追加
  has_one_attached :image

中略
end

上記のように編集し、

他にもimageカラムのストロングパラメーターの記述を追加します。

画像を表示したい場所に

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

のように記述します。

「if message.image.attached?」と記述することで、画像が存在する場合のみ読み込まれます。

「variant(resize:'500x500')」と記述することで、画像の高さと横幅を指定できます。

また、画像とテキストを投稿するアプリで、テキストがなくても画像があれば投稿できるようにするには、バリデーションを、

class Message < ApplicationRecord
  中略
  has_one_attached :image
下記の記述を追加
  validates :content, presence: true, unless: :was_attached?

  def was_attached?
    self.image.attached?
  end
上記まで
中略
end

上記のように設定することで可能となります。

画像の入力フォームはform_withメソッドで

<%= f.file_field :image, class: 'hidden' %>

のような入力欄を作ることで実装できます。

以上が画像投稿機能の実装方法です。