More than 1 year has passed since last update.

【簡単】Railsでの画像アップロードと表示機能の追加方法

Posted at 2023-11-05

このガイドでは、ImageMagick、MiniMagick、Image Processing、およびActive Storageを使用して、Railsアプリケーションで画像のアップロードと表示を実現する手順を説明します。

1. ImageMagickのインストール

まず、ImageMagickをインストールしましょう。ImageMagickは画像の処理と変換に必要です。Homebrewを使用してインストールできます。

brew install imagemagick

次に、MiniMagickおよびImage ProcessingのGemをプロジェクトに追加しましょう。Gemfileに以下の行を追加します。

gem 'mini_magick'
gem 'image_processing'

その後、ターミナルで以下のコマンドを実行して、Gemをインストールします。

bundle install

config/application.rbファイル内に、MiniMagickのバージョンを指定します。これはMiniMagickがImage Processingと連携するために必要です。

config.active_storage.variant_processor = :mini_magick

Active Storageをセットアップするには、ターミナルで以下のコマンドを実行します。

rails active_storage:install
rails db:migrate

これにより、アプリケーション内でファイルアップロードと管理に必要なデータベーステーブルが作成されます。

画像をアップロードしたいモデルに、has_one_attachedメソッドを使用してアソシエーションを追加します。例えば、Messageモデルに画像を紐づける場合のコードは以下の通りです。

class Message < ApplicationRecord
  has_one_attached :image
end

画像をアップロードするためのフォームをビューに設置します。例えば、Messageモデルを編集するビューにフォームを追加する方法は以下の通りです。

<%= form_with model: @message, local: true do |f| %>
  <!-- 他のフォームフィールド -->
  <%= f.file_field :image %>
  <!-- 送信ボタンなどのフォームコントロール -->
<% end %>

画像を表示するには、image_tagヘルパーを使用します。例えば、Messageモデルのインスタンスから画像を表示する方法は以下の通りです。

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

これにより、アップロードされた画像が指定したサイズにリサイズされて表示されます。

以上で、Railsアプリケーション内での画像のアップロードと表示が設定されました。ユーザーは画像をアップロードし、必要に応じてリサイズなどの画像処理を行うことができます。

この手順に従って、アプリケーションに画像の機能を統合し、ユーザーエクスペリエンスを向上させましょう。