【Rails】画像アップロード機能の導入

目的

Railsで作成したアプリに画像アップロード機能を追加する。

開発環境

macOS: Big Sur
Rubyバージョン: 2.6.5
Railsバージョン: 6.0.0

前提

• アプリを作成済み。

手順

1. 必要な手順の確認
2. ImageMagickのインストール
3. Gemのインストール
4. Active Storageのインストール
5. アソシエーションの設定
6. ストロングパラメーターの定義
7. バリデーションの設定
8. 画像の表示

必要な手順の確認

まずは、必要な手順から確認していきましょう！

画像のアップロードには、RailsのActive StorageというGemを使用します。
これを使用することで、画像などのファイルのアップロードを簡単にするメソッドが使用できたり、画像を保存するテーブルを簡単に作成できます!

また、画像のサイズや色などを編集する機能も実装します。
画像加工のために必要なImageMagickという画像変換ツールと、それをRailsから使うためのGemをインストールしていきます!

ImageMagickのインストール

まずImageMagickのインストールから行いましょう!
ImageMagickとはサイズ変更や保存形式の変更など、画像に処理を加えることができるツールのことです。

ターミナル

% brew install imagemagick

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

Gemのインストール

ImageMagickはインストールできましたが、
これをRailsで使用するためには、MiniMagickというGemが別に必要となります。
また画像サイズを調整するため、ImageProcessingというGemも合わせてインストールしましょう！

Gemfile

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

ターミナル

% bundle install

ターミナル

% rails s

サーバーの再起動も忘れずに！

Active Storageのインストール

続いて、Active Storageをアプリケーション内で使用する準備を行います。
以下のコマンドを実行しましょう!

ターミナル

% rails active_storage:install

上記のコマンドを実行後、Active Storageに関連したマイグレーションが作成されるため、続けてマイグレートしましょう!

ターミナル

% rails db:migrate

これで、Active Storageと画像加工ツールの導入は完了です!

続いて画像を保存するための方法も記載します。

アソシエーションの設定

まずはアソシエーションの設定です。
以下の記述により、モデル.ファイル名で、添付されたファイルにアクセスできるようになります！

app/models/post.rb

class Post < ApplicationRecord
  has_one_attached :image
end

has_one_attachedメソッドとは、各レコードとファイルを1対1の関係で紐づけるメソッドです。

ストロングパラメーターの定義

次にimageという名前でアクセスできるようになった画像ファイルの保存を許可します！

app/controllers/posts_controller.rb

  # 中略

  private

  def test_params
    params.require(:post).permit(:text, :image)
  end

この記述で、imageという画像ファイルの保存を許可できました。

バリデーションの設定

今回は投稿時には画像が必須という機能を実装したいため、バリデーションの追加も行います！

post.rb

with_options presence: true do
    validates :text
    validates :image
  end

これで投稿時には画像が必須となりました。

画像の表示

最後に保存した画像を表示します。

app/views/posts/index.html.erb

<%= image_tag post.image.variant(resize: '500x500') %>

Active Storageを導入している為、variantメソッドが使用可能です。
このメソッドを使用することで、ファイルの表示サイズを指定できます！

最後に

これで、画像アップロードの機能は追加できました!
あとは、ビューファイルの編集などしてください!
では。