初めに
ポートフォリオテーマとして業者のレビューサイトを作成しています。
以下の画像のようなレビューサイトを作っていこうと思います。
※自分用でまとめてますので、分かり辛かったらすいません。
また理解不足・誤りがあったらコメント頂けますと幸いです。m(__)m<ヨロシクオネガイシマス
発生している問題・エラー
・先程の画像のように、一覧ページ(画像を扱っているページ限定)
を開こうとしたとき読み込みが重たくなる現象が発生
※問題なく表示されるパターンもあれば、タイムアウトや以下のエラーが発生する時もありました。
考えられる原因
・attachの処理が何か悪く動作している => 一覧表示するさいすべてのデータに対してattachしていることになる
def get_image
unless image.attached?
file_path = Rails.root.join('app/assets/images/20200502_noimage.jpg')
image.attach(io: File.open(file_path), filename: 'default-image.jpg', content_type: 'image/jpeg')
end
image
end
unless => ifと同じ条件文で条件に足して偽の場合処理が行われる
(今回は投稿に対して画像が保存されていない場合、次の処理が行われる)
fail_path => デフォルトでアタッチしたい画像を保存しているフォルダの相対パスを指定している
image.attach(以下略) => アタッチ処理を行う
※io: fike.open(指定のパス) => アタッチするファイルを指定している
※filename: => オプション機能の一つで、アタッチしたファイルの名前を指定
※content_type: => オプション機能の一つで、拡張子の指定
試してみた対策方法
・画像を保存していないデータ(今回は投稿post)に対して、アタッチを行わないようにする
具体的にしたこと
・モデルファイルの記述を変更
・Viewファイルの記述を変更
※今回はメンターさんに協力してもらい解決した方法を記載します。
もしかしたらそれ以外にも解決策があるかもしれませんので、その際はコメント頂けると幸いです。m(__)m
まずはモデルファイル
def get_image
unless image.attached?
file_path = Rails.root.join('app/assets/images/20200502_noimage.jpg')
image.attach(io: File.open(file_path), filename: 'default-image.jpg', content_type: 'image/jpeg')
end
image
end
get_imageメソッドをまるまる削除
次にビューファイル
<% @posts.each do |post| %>
<tr>
<td><%= image_tag post.get_image, size: "100x100" %></td>
以下略
</tr>
<% end %>
<% @posts.each do |post| %>
<tr>
<td>
<% if post.image.attached? %>
<%= image_tag post.image, size: "80x80" %>
<% else %>
<%= image_tag '20200502_noimage.jpg', size: "80x80" %>
<% end %>
</td>
以下略
</tr>
<% end %>
ポイント① attached? → 特定の投稿に対して、画像が保存されているかをif文にかけチェック
ポイント② 条件が真の場合 → 保存されている画像のサイズを指定する → resize
をView側で指定できる記述をしているため
ポイント③ 条件が偽の場合 → /app/assets/images/
に保存した画像ファイルを表示 ※アタッチはしていません
感想
基礎学習の際に教えてもらったことをそのまま組んでみた結果、今回のように読み込み速度が遅くなる問題が発生しました。
前習った内容が悪いというわけではなく、いい意味で失敗をできたと思いました。
重くなった原因から問題解決に至るまで、アクティブストレージの基礎知識や条件式の考え方など色々と復習もできました。
またメンターさん(通っているプログラミングスクールの質問対応者のこと)にもアタッチの概念やif文の条件についてアドバイスを頂いたので、個人的に勉強になりました。
今回の記事はその教えてもらったことを忘れないようにするために投稿しました。何度も申し訳ありませんが、自分用でまとめてますので、分かり辛かったらすいません。また理解不足・誤りがあったらコメント頂けますと幸いです。m(__)m<ヨロシクオネガイシマス