0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Rails】Active Storageによるプロフィール画像機能の導入手順&libvipsでのパフォーマンス最適化

0
Last updated at Posted at 2026-10-11

はじめに

Railsアプリでユーザーのプロフィール画像(アバター)機能を実装したいとき、どのライブラリを使うべきか迷ったことはありませんか?

この記事では、Railsの公式標準機能である Active Storage を使って、まずは最小限の実装で最速・手軽にプロフィール画像を表示する方法を解説します。

さらに、後半では実運用を見据えて、
 ・なぜ画像のリサイズが必要なのか
 ・高速な libvips を使った自動リサイズ(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 を追加します。

app/models/user.rb
class User < ApplicationRecord
  has_one_attached :avatar

  # (参考)バリデーションをかけたい場合の例(画像形式やサイズ制限)
  validates :avatar, content_type: [:png, :jpg, :jpeg], size: { less_than: 5.megabytes }
end

3-2. ビューの設定(プロフィール詳細画面など)

app/views/profiles/show.html.erb
<h2>プロフィール詳細</h2>

<% if @user.avatar.attached? %>
    <%= image_tag @user.avatar %>
<% else %>
    <!-- デフォルト画像を表示する場合 -->
    <%= image_tag"default_avatar.png" %>
<% end %>

4. ストロングパラメータとフォームの準備

4-1. コントローラー(ストロングパラメータ)の許可

ユーザー登録や編集を行うコントローラーで:avatar を許可します。

users_controller.rb
def user_params
  params.require(:user).permit(:name, :email, :avatar) # :avatar を追加
end

4-2. 入力フォームの作成

form_with を使ってファイル選択フィールド(file_field)を配置します。

app/views/users/new.html.erb
<%= 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ではインストールされないサードパーティ製ソフトウェアに依存しており、別途インストールする必要があります。

ここでは、ImageMagickよりも最大10倍高速でメモリ消費も少ないと言われている libvips を導入して、自動リサイズ機能を実装してみます。

1. 開発環境への libvips のインストールと設定確認

お使いの環境のターミナルで、以下のコマンドを実行してインストールします。

Mac(Homebrew)の場合のインストール方法

brew install vips

Docker / Codespaces などのLinux(コンテナ)環境でRailsを動かしている場合のインストール方法

sudo apt update
sudo apt install -y libvips

また、開発環境で libvips を有効にするために、設定ファイルへ一行を追加しましょう。

config/environments/development.rb
  config.active_storage.service = :local

  # 以下の行を追加してください
  config.active_storage.variant_processor = :vips

Railsサーバーを再起動。

2. モデルに variant(リサイズルール)を定義する

モデル(app/models/user.rb)に has_one_attached のブロックを追加し、あらかじめ縮小ルール(:thumb)を登録します。

app/models/user.rb
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) を指定することで、サーバー側で軽量化された画像が自動生成・表示されるようになります。

app/views/profiles/show.html.erb
<h2>プロフィール詳細</h2>

<% if @user.avatar.attached? %>
    <!-- モデルで定義した :thumb(リサイズ済み画像)を呼び出す -->
    <%= image_tag @user.avatar.variant(:thumb) %>
<% else %>
    <!-- デフォルト画像を表示する場合 -->
    <%= image_tag"default_avatar.png" %>
<% end %>

無事実装できたようです!

image.png


【注意】 libvipsを入れる前に .variant を書いてしまうと…?

もし、システム側に libvips(またはImageMagick)をインストールする前に、ビュー側で .variant(:thumb) を呼び出してしまうと、画像がうまく生成されず添付のように表示エラーになってしまいます。

image.png

まとめ

今回は、Railsの Active Storage を使ってプロフィール画像を実装するアプローチを2段階でまとめました。

1.まずは外部ツールなしで、手軽に表示を完了させる
2.パフォーマンスが気になったら、libvips を入れて variant による自動リサイズにステップアップする

開発のフェーズに合わせて、ぜひ試してみてください!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?