はじめに
Railsアプリでユーザーのプロフィール画像(アバター)機能を実装したいとき、どのライブラリを使うべきか迷ったことはありませんか?
この記事では、Railsの公式標準機能である Active Storage を使って、まずは最小限の実装で最速・手軽にプロフィール画像を表示する方法を解説します。
さらに、後半では実運用を見据えて、
・なぜ画像のリサイズが必要なのか
・高速な libvips を使った自動リサイズ(variant)の導入方法
までステップ順に紹介します。
目次
- 1. CarrierWaveと何が違う?
- 2. Active Storageの導入ステップ
- 3. モデルとビューの実装(リサイズなし・最短バージョン)
- 4. ストロングパラメータとフォームの準備
- 【コラム】なぜ画像のリサイズ(variant)が必要なの?
- 【発展編】libvipsやImageMagickを使って、自動リサイズ(variant)を導入しよう
- まとめ
1. CarrierWaveと何が違う?
Ruby on Railsでプロフィール画像(アバター)機能を実装する主な方法は、Rails標準の機能である Active Storage を使う方法と、アップロード用Gem(CarrierWave など)を使う方法の2つがあります。
-
CarrierWaveの特徴
- 非常に歴史が長く、ネット上の情報量が豊富。
- アップロード用のクラス(Uploader)を個別に定義するなど、細かなカスタマイズが強力。
-
Active Storageの特徴(選定理由)
- Railsの公式標準機能であるため、追加の巨大なファイルアップロード用Gemを大量に入れる必要がない。
- モデルに
has_one_attachedと一行書くだけで、直感的にファイルと紐づけられる。 - クラウドストレージ(Amazon S3やGoogle Cloud Storageなど)への移行も、設定ファイルの書き換えだけで簡単に対応できる。
「特別なこだわりがなければ、まずは公式標準の Active Storage を使うのが最もスムーズでメンテナンスしやすい」ため、今回はこちらを採用しました。
2. Active Storageの導入ステップ
まずは、アプリでActive Storageを使えるように準備をします。
2-1. マイグレーションファイルの作成と実行
ターミナルで以下のコマンドを実行し、Active Storageに必要なテーブルを作成します。
bin/rails active_storage:install
bin/rails db:migrate
2-2. 関連するGemの確認
開発や本番でバリデーション(画像の形式やサイズ制限など)を行うために、active_storage_validations を Gemfile に記述して bundle install を済ませておきます。
3. モデルとビューの実装(リサイズなし・最短バージョン)
3-1. モデルの設定
モデルに has_one_attached を追加します。
class User < ApplicationRecord
has_one_attached :avatar
# (参考)バリデーションをかけたい場合の例(画像形式やサイズ制限)
validates :avatar, content_type: [:png, :jpg, :jpeg], size: { less_than: 5.megabytes }
end
3-2. ビューの設定(プロフィール詳細画面など)
<h2>プロフィール詳細</h2>
<% if @user.avatar.attached? %>
<%= image_tag @user.avatar %>
<% else %>
<!-- デフォルト画像を表示する場合 -->
<%= image_tag"default_avatar.png" %>
<% end %>
4. ストロングパラメータとフォームの準備
4-1. コントローラー(ストロングパラメータ)の許可
ユーザー登録や編集を行うコントローラーで:avatar を許可します。
def user_params
params.require(:user).permit(:name, :email, :avatar) # :avatar を追加
end
4-2. 入力フォームの作成
form_with を使ってファイル選択フィールド(file_field)を配置します。
<%= form_with model: @user do |f| %>
<div class="field">
<%= f.label :name %>
<%= f.text_field :name %>
</div>
・・・(省略)
<div class="field">
<!-- プロフィール画像用のファイル選択 -->
<%= f.label :avatar %>
<%= f.file_field :avatar %>
</div>
<div class="actions">
<%= f.submit "保存する" %>
</div>
<% end %>
【コラム】なぜ画像のリサイズ(variant)が必要なの?
ここまでで「まずは最小限のコードでプロフィール画像を表示する」ことができました!
しかし、実運用においては1つ大きな課題があります。
それは、「ユーザーがスマホなどで撮影した数MB〜十数MBもある巨大な画像データが、そのままのサイズでサーバーに保存され、ブラウザにダウンロードされている」という点です。
表示時にCSSで小さく見せていたとしても、裏側のデータは重いままです。プロフィール一覧画面などでユーザーアイコンが何十人も並ぶと、ページ全体の読み込みが非常に重くなってしまいます。
これを解決するのが、サーバー側であらかじめ画像を小さく縮小・生成する リサイズ(variant)機能 です。
【発展編】libvipsやImageMagickを使って、自動リサイズ(variant)を導入しよう
Rails公式ガイド(Active Storage Overview - Requirements)でも、画像のリサイズや変換を行うにはサードパーティ製の画像処理エンジンが必須であると明記されています。
Active Storageの様々な機能は、Railsではインストールされないサードパーティ製ソフトウェアに依存しており、別途インストールする必要があります。
- 画像解析および変換には、libvips v8.6以降またはImageMagickを使用してください。
(参考:Rails Guides - Active Storage Overview)
ここでは、ImageMagickよりも最大10倍高速でメモリ消費も少ないと言われている libvips を導入して、自動リサイズ機能を実装してみます。
1. 開発環境への libvips のインストールと設定確認
お使いの環境のターミナルで、以下のコマンドを実行してインストールします。
Mac(Homebrew)の場合のインストール方法
brew install vips
Docker / Codespaces などのLinux(コンテナ)環境でRailsを動かしている場合のインストール方法
sudo apt update
sudo apt install -y libvips
また、開発環境で libvips を有効にするために、設定ファイルへ一行を追加しましょう。
config.active_storage.service = :local
# 以下の行を追加してください
config.active_storage.variant_processor = :vips
Railsサーバーを再起動。
2. モデルに variant(リサイズルール)を定義する
モデル(app/models/user.rb)に has_one_attached のブロックを追加し、あらかじめ縮小ルール(:thumb)を登録します。
class User < ApplicationRecord
has_one_attached :avatar do |attachable|
# 最大100x100pxに収まるように自動縮小するバリエーションを定義
attachable.variant :thumb, resize_to_limit: [100, 100]
end
validates :avatar, content_type: [:png, :jpg, :jpeg], size: { less_than: 5.megabytes }
end
3. ビュー側で variant を呼び出すように変更する
ビュー側で .variant(:thumb) を指定することで、サーバー側で軽量化された画像が自動生成・表示されるようになります。
<h2>プロフィール詳細</h2>
<% if @user.avatar.attached? %>
<!-- モデルで定義した :thumb(リサイズ済み画像)を呼び出す -->
<%= image_tag @user.avatar.variant(:thumb) %>
<% else %>
<!-- デフォルト画像を表示する場合 -->
<%= image_tag"default_avatar.png" %>
<% end %>
無事実装できたようです!
【注意】 libvipsを入れる前に .variant を書いてしまうと…?
もし、システム側に libvips(またはImageMagick)をインストールする前に、ビュー側で .variant(:thumb) を呼び出してしまうと、画像がうまく生成されず添付のように表示エラーになってしまいます。
まとめ
今回は、Railsの Active Storage を使ってプロフィール画像を実装するアプローチを2段階でまとめました。
1.まずは外部ツールなしで、手軽に表示を完了させる
2.パフォーマンスが気になったら、libvips を入れて variant による自動リサイズにステップアップする
開発のフェーズに合わせて、ぜひ試してみてください!


