個人アプリ開発 carrierwaveでハマった

作業内容

今日は各所の微調整を行いました。
・部分テンプレートを作成しリファクタリング
・仮で入れていた箇所のDB連携
・スタイリング修正
・テスト情報の入力

躓き

その中でハマってしまったのが、画像に関して。
テストイメージを入力した際に、以下のように潰れてしまっている
f:id:kobegoro:20200813224214p:plain

以前気づいた時はケータイ画像を使用していたので、単純に拡大しすぎが原因だとスルーしてしまっていました。

・小さい画像を拡大したのが原因か?

→元画像のサイズは大きい

JPEGをサイズ変更したのが原因?

PNGファイルでもダメ

・webアプリでトリミングした画像をUPしてみる(縦横比が変わらないように)

→ダメ

ここでhamlファイル、cssファイルのサイズの指定を外して表示してみることに。
すると画像が極小に表示されてしまいました。
元画像は大きいはずなのになぜ、、、とここで気がつき、carrierwaveのuploderの設定を確認すると、

[app > uploders > image_uploders.rb]
process resize_to_fit: [100, 100]

取り込み画像のサイズ設定を小さくしてしまってました泣
大きい元画像→carrierwaveで小さい画像→拡大して粗くなる、となっていたのが原因でした。
こちらを修正してOKでした。

最初にcarrierwaveをインストールする際に何気なく設定してしまっていましたが、とても学びになりました。
今後も新しいgemを入れる際など、「この記述の意味は?」「値を変えることで例えばどんなリスクがあるか?」などの思考を挟めるように精進していきたいと思います。


毎日いろんなエラーや思った通りにならない事ばかりですが、徐々に建設的に対処法を考えたり、スピード感を持って解決に当たることができるようになっている気がします。(もちろんまだ初心者ですが)

何より少しずつ自信がついてきて、プログラミングを楽しめているのが自分にとっては嬉しいです。
引き続き毎日時間を作ってPDCAを回しつつ精進していきたいと思います。