0
0

Rails7でActive Storageを用いた画像リサイズを行うために必要な準備

Posted at

Rails初学者の備忘録として、表題の手順を簡単にまとめておきます。
振り返るとだいぶ初歩的な部分で詰まってしまったのですが、自身と同じくActive Storageを全く初めて使う方に少しでも参考になれば幸いです。

使用環境

  • Rails 7.0.8.4
  • Ruby 3.2.1

現状・実現したいこと

  • ECサイトの商品一覧ページを只今製作中
  • とりあえずActiveStorageの導入は済んでおり、Item(商品)テーブル上のimageカラムに画像の登録はできている
  • 現在はシンプルに下記コードで画像表示中
app/views/items/index.html.erb
<%= image_tag item.image %>
  • 下記画像のように、現状、Seedで登録した画像サイズがバラバラで、見栄えがよろしくないので450x300のサイズに統一したい

スクリーンショット 2024-08-25 17.15.42.png

以下、Active Storageを用いた画像リサイズを行うための必要手順をまとめます。

Active Storage自体の導入手順 (rails active_storage:installを実行する等) は割愛します。

準備① 必要なgemを導入する

Active Storageを用いた画像分析・画像加工のためにはimage_processingのgemが必要です。
これはGemfileにコメントアウトされているかと思うので、コメントを解除します。

Gemfile
# コメントアウトまたは追加
gem "image_processing", ">= 1.2"

gem導入後はbundle installを忘れずに。

準備② libvipsを導入する

筆者は準備①だけで画像サイズ調整ができると思っており、index.html.erbの画像表示部分を以下内容に置き換えました。

app/views/items/index.html.erb
<%= image_tag item.image.representation(resize_to_fill: [450, 300]) %>

この内容で実行したところ、Could not open library 'vips.so.42': vips.so.42: cannot open shared object file: No such file or directory.というエラーが発生しました。

エラー内容から何かのライブラリがまだ足りないと察し、調べたところ、表題の通りlibvipsが導入必須であること分かりました。

Active Storageの公式ドキュメント冒頭をよく読むと、

1.1 要件

Active Storageの多くの機能は、Railsによってインストールされないサードパーティソフトウェアに依存しているため、別途インストールが必要です。

  • libvips v8.6以降(またはImageMagick): 画像解析や画像変形用
  • ffmpeg v3.4以降: 動画プレビュー、ffprobeによる動画/音声解析
  • popplerまたはmuPDF: PDFプレビュー用

と、ちゃんと書いてありました。
公式ドキュメントはちゃんと最初から読みましょう・・・ (自戒)

Dockerで環境構築を行なっているため、下記の通りDockerfileのRUN apt-get部分にlibvips42を追加して、再度Docker-compose buildを実行します。

Dockerfile
RUN apt-get update -qq && \
  apt-get install -y build-essential \
  # 略
  libvips42 \

これで再度実行したところ、無事に画像のリサイズが行われました。

スクリーンショット 2024-08-25 22.44.07.png

ちなみに、画像のリサイズ方法は色々用意されており、例えばresize_to_fitの場合は、画像の切り取りは行わずに指定の寸法に収まるように画像の拡大縮小を行います。

詳しくはActive Storageの公式ドキュメント、「9 画像を変形する」に色々記載されております。

参考

Railsガイド Active Storageの概要
https://railsguides.jp/active_storage_overview.html

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