はじめに
Ruby on Railsを学習中の新米エンジニアです!
この記事は、Ruby on Railsの学習過程で遭遇したエラーについての備忘録です。
参考文献
この記事の内容は、以下の書籍を参考にしています。
- 書籍名:はじめてつくるWebアプリケーション 〜Ruby on Railsでプログラミングへの第一歩を踏み出そう
- 著者:江森 真由美, やだ けいこ, 小林 智恵
- 出版日:2023/4/20
書籍について
この書籍は、Ruby on Railsを初めて学び始める人々向けに、日記投稿アプリケーションを構築しながら、基本的な概念や手法をわかりやすく解説しています。
本書の指示に従ってコードを記述し、必要なGemのインストールを進めることで、一般的なエラーは発生しないようになっています。
しかし、今回自分は本書内で提供されたコードの一部を誤って書き換えてしまい、それがエラーの原因となりました。
こうしたエラーについての詳細な解説と、修正方法について説明します。
開発の流れ
目的:日記一覧画面に画像を表示させる
①画像ファイルをアップロードするためのCarrierWaveというgemをインストール
②画像ファイルを表示・操作するアプリケーションのImageMagickのインストール
③mageMagickをCarrierWaveから利用するためのMiniMagickというgemをインストール
④MiniMagickを利用するために既存コードの書き換え ← この過程でエラー発生!
実際に書き間違えた箇所
本書では、CarrierWave gemを使用して画像をリサイズするためのメソッド(process resize_to_fitおよびprocess resize_to_fill)の書き換えを指示していました。
変更前
picture_uploader.rb# Create different versions of your uploaded files: version :thumb do process resize_to_fit: [50, 50] end
変更後
picture_uploader.rb# Create different versions of your uploaded files: version :thumb do process resize_to_fill: [300, 300,"Center"] end
しかし、自分はコードを変更せずに、変更前のコードをそのまま使い続けてしまいました。
自分のコード
# Create different versions of your uploaded files:
version :thumb do
process resize_to_fit: [300, 300,"Center"]
end
ここで、resize_to_fitとresize_to_fillのメソッドの引数の渡し方に違いがあることに気づかず、コードを修正しなかったため、エラーが発生してしたのです。
実際のエラー内容
エラーが発生する理由
エラーを読み解くと、resize_to_fitメソッドに対して不正な引数が指定されており、エラーメッセージで"ArgumentError wrong number of arguments (given 3, expected 2)"と表示されています。
resize_to_fitメソッドは、リサイズする際の幅と高さを指定するために2つの引数を受け取りますが、[300, 300,"Center"]という3つの要素からなる配列を渡してしまっています。
正しいメソッドの引数が指定されていないためエラーが発生していたのですね...
自分は@idea = idea.new(idea_params)のコントローラー設定がおかしいと思い込んでしまい、ずっと別の箇所でエラー原因を探してました...
正しいコードは以下の通り
version :thumb do
process resize_to_fit: [300, 300]
end
本書通りではないですが、仮にresize_to_fitを使う場合は、この修正によりエラーは解消されます!
resize_to_fitメソッドは、指定した幅と高さに画像をリサイズし、アスペクト比を保持するため"Center"という文字列はこのコンテキストでは不要だったのです。
一方で、resize_to_fillメソッドは3つ目の引数として位置情報を指定することができ、そのためprocess resize_to_fill: [300, 300,"Center"]は正常に処理されます(本書通り)。このメソッドを使用する場合には、位置を指定できるため、引数に位置情報を含めることができます。
process resize_to_fitと process resize_to_fillの違い
① process resize_to_fit
resize_to_fitは、指定したサイズに画像を調整し、アスペクト比を保持したまま画像全体が指定したサイズに収まるようにリサイズします。
そのため、画像が指定したサイズに収まり、余白(空白部分)が発生することがあります。
例えば、指定したサイズが200x200ピクセルである場合、縦横の比率を保持しながら、画像全体が200x200ピクセルに収まり、余白が発生することがあります。
process resize_to_fit: [200, 200]
この場合、画像は幅200ピクセルまたは高さ200ピクセルのいずれかに合わせられ、アスペクト比が保持されます。
② process resize_to_fill
resize_to_fillは、指定したサイズに画像を調整し、指定したサイズにピッタリ収まるようにリサイズします。
この場合、アスペクト比は無視され、指定したサイズにピッタリ合うように画像が切り取られることがあります。
例えば、指定したサイズが200x200ピクセルである場合、画像はアスペクト比を無視して200x200ピクセルのサイズに調整され、切り取りが行われるため、画像が指定サイズにピッタリ合うことが保証されます。しかし、画像の一部が切り取られる可能性があります。
process resize_to_fill: [200, 200]
使い分け
resize_to_fitとresize_to_fillは、特定のユースケースやデザイン要件に応じて使い分ける必要があります。
アスペクト比を保持したまま画像全体を表示したい場合はresize_to_fitを使用し、指定したサイズに画像をピッタリ合わせたい場合はresize_to_fillを使用します。
またresize_to_fillを使用する場合には、位置を指定できるため、引数に位置情報を含めることができます。
位置の指定方法(resize_to_fill)
resize_to_fillメソッドにおける位置の指定方法は、以下のようなオプションがあります。
1."Center"(デフォルト): 画像を中央に配置し、余白を均等に追加します。
2."North": 画像を上部に配置し、下部に余白を追加します。
3."NorthEast": 画像を右上に配置し、左下に余白を追加します。
4."East": 画像を右側に配置し、左側に余白を追加します。
5."SouthEast": 画像を右下に配置し、左上に余白を追加します。
6."South": 画像を下部に配置し、上部に余白を追加します。
7."SouthWest": 画像を左下に配置し、右上に余白を追加します。
8."West": 画像を左側に配置し、右側に余白を追加します。
9."NorthWest": 画像を左上に配置し、右下に余白を追加します。
これらの位置指定オプションを使用することで、リサイズした画像を特定の位置に配置し、余白を調整することができます。
必要に応じて、これらのオプションを使い分けて、画像の表示を調整できます。
まとめ
この記事では、Ruby on Railsの学習中に遭遇したエラーについて詳しく解説しました。
技術書を勉強していく中で、コードの記述ミスや環境設定の誤りによってエラーが発生することはよくあります。
しかし、そのようなエラーに遭遇しても、エラーを解決する過程は、プログラミングスキルの向上につながる貴重な経験です。
エラーが発生した際には、冷静に対処し、考えられるエラー原因を一つずつ取り除いていくことが大切です。
自分も今回のエラーを深堀りし、最終的には解決できました。
次回からは、エラー原因の特定にあまり時間をかけすぎず、スムーズに解決できるようにエラーと向き合っていきたいと思います。