質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Active Record

Active Recordは、一つのオブジェクトに対しドメインのロジックとストレージの抽象性を結合するデザインパターンです。

ImageMagick

ImageMagickとは、画像の表示や操作を行うオープンソースのソフトウェアです。プログラムはCで書かれており、GIFやJPEG、PDFなど画像ファイルフォーマット100種類以上に対応しています。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

解決済

Active Recordを使った画像のリサイズができない

Utsubo
Utsubo

総合スコア9

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Active Record

Active Recordは、一つのオブジェクトに対しドメインのロジックとストレージの抽象性を結合するデザインパターンです。

ImageMagick

ImageMagickとは、画像の表示や操作を行うオープンソースのソフトウェアです。プログラムはCで書かれており、GIFやJPEG、PDFなど画像ファイルフォーマット100種類以上に対応しています。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

1回答

0リアクション

0クリップ

236閲覧

投稿2022/08/13 16:33

前提

Railsチュートリアル13章を勉強しております。
RailsチュートリアルではRails6で説明されていますが、私はRails7を使用しております。
ただ、解説はないのですが、Rails7で実装されたコードがGitHub上で公開されているので、Rails6での解説 + GitHubで公開されているRails7で実装されたコードを見ながら学習しております。

その中でActive Storageを使って画像のアップロード、画像の検証(ファイルの種類、ファイルのバイト数)の機能を実装し、画像が表示されることを確認しました。
イメージ説明

実現したいこと

画像のリサイズ機能を追加したい。

発生している問題・エラーメッセージ

画像のリサイズ機能を実装した際に下図のように、適切に画像が表示されない問題が発生しました。
イメージ説明

該当のソースコード

公開されているRails7で書かれたRailsチュートリアルのコードは下記です。
https://github.com/yasslab/sample_apps/tree/main/7_0/ch13

_micropost.html.erbファイルの7行目、micropost.image.variant(:display)だと画像はうまく表示されませんが、リサイズを行わないmicropost.imageだけだとうまく表示されます。
下記のような別の記法も試しましたがダメでした。
micropost.image.variant(resize: "100x100")
micropost.image.variant(resize_to_limit: [100, 100])

以下に私が書いたコードを記載します。
app/views/microposts/_micropost.html.erb

ruby

<li id="micropost-<%= micropost.id %>"> <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %> <span class="user"><%= link_to micropost.user.name, micropost.user %></span> <span class="content"> <%= micropost.content %> <% if micropost.image.attached? %> <%= image_tag micropost.image.variant(:display) %> <% end %> </span> <span class="timestamp"> Posted <%= time_ago_in_words(micropost.created_at) %> ago. <% if current_user?(micropost.user) %> <%= link_to "delete", micropost, data: { "turbo-method": :delete, turbo_confirm: "You sure?" } %> <% end %> </span> </li>

app/models/micropost.rb

ruby

class Micropost < ApplicationRecord belongs_to :user has_one_attached :image do |attachable| attachable.variant :display, resize_to_limit: [500, 500] end default_scope -> { order(created_at: :desc) } validates :user_id, presence: true validates :content, presence: true, length: { maximum: 140 } validates :image, content_type: { in: %w[image/jpeg image/gif image/png], message: "must be a valid image format" }, size: { less_than: 5.megabytes, message: "should be less than 5MB" } end

Gemfile

ruby

source "https://rubygems.org" git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby "3.1.2" gem "rails", "~> 7.0.3", ">= 7.0.3.1" gem "sprockets-rails" gem "bootstrap-sass", "3.4.1" gem "pg", "~> 1.1" gem "puma", "~> 5.0" gem "importmap-rails" gem "turbo-rails" gem "stimulus-rails" gem "jbuilder" gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ] gem "bootsnap", require: false gem "bcrypt" gem "faker" gem "will_paginate" gem "bootstrap-will_paginate" gem "active_storage_validations", "0.9.7" gem "image_processing", "1.12.2" group :development, :test do gem "debug", platforms: %i[ mri mingw x64_mingw ] end group :development do gem "web-console" end group :test do gem "capybara" gem "selenium-webdriver" gem "webdrivers" gem "rspec-rails" gem "factory_bot_rails" end

試したこと

下記のRailsガイドを参照し、variantメソッドの書き方が間違っていないか確認しました。
https://railsguides.jp/active_storage_overview.html#has-one-attached

Rails7で書かれたRailsチュートリアルのコードと自分のコードを何回も見比べ、間違いがないか確認しました。

ネットで同様の事象がないか検索しました。よくある原因は以下のようなものでした。
・ImageMagickをインストールしていない
→ homebrewでインストールしたことを確認しました
・gem mini_magickをbundle installできていない
→ gem image_processingをbundle installしているので、今回は不要と判断しました。下記の記事にあるように、image_processingをインストールすると自動でmini_magickもインストールされるようです。
https://qiita.com/fgem28/items/54c5ca70753f16ef420c
また、Rails7で書かれたRailsチュートリアルのコードのGemifileを確認しても記載されていなかったため、不要だと考えました。

補足情報(FW/ツールのバージョンなど)

OS:macOS Big Sur Version 11.4
ruby: 3.1.2
Rails: 7.0.3.1
ImageMagick: 7.1.0-45

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Active Record

Active Recordは、一つのオブジェクトに対しドメインのロジックとストレージの抽象性を結合するデザインパターンです。

ImageMagick

ImageMagickとは、画像の表示や操作を行うオープンソースのソフトウェアです。プログラムはCで書かれており、GIFやJPEG、PDFなど画像ファイルフォーマット100種類以上に対応しています。

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。