0
0

More than 1 year has passed since last update.

一覧ページの読み込みが重たい問題について

Posted at

初めに

ポートフォリオテーマとして業者のレビューサイトを作成しています。
以下の画像のようなレビューサイトを作っていこうと思います。

top画面1.png

※自分用でまとめてますので、分かり辛かったらすいません。
また理解不足・誤りがあったらコメント頂けますと幸いです。m(__)m<ヨロシクオネガイシマス

発生している問題・エラー

・先程の画像のように、一覧ページ(画像を扱っているページ限定)を開こうとしたとき読み込みが重たくなる現象が発生
 ※問題なく表示されるパターンもあれば、タイムアウトや以下のエラーが発生する時もありました。

イメージ画像
activerecode-errore.png

考えられる原因

attachの処理が何か悪く動作している => 一覧表示するさいすべてのデータに対してattachしていることになる

エラー箇所の処理について(因みに今回は/app/models/post.rb)
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: => オプション機能の一つで、拡張子の指定

参考資料

rails ガイド| 3.3 File/IO Objectsをアタッチする

試してみた対策方法

・画像を保存していないデータ(今回は投稿post)に対して、アタッチを行わないようにする

具体的にしたこと

・モデルファイルの記述を変更
・Viewファイルの記述を変更

※今回はメンターさんに協力してもらい解決した方法を記載します。
 もしかしたらそれ以外にも解決策があるかもしれませんので、その際はコメント頂けると幸いです。m(__)m

まずはモデルファイル

/app/models/post.rb(変更前)
 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
/app/models/post.rb(変更後)
get_imageメソッドをまるまる削除

次にビューファイル

/app/views/posts/index.html.erb(変更前)
<% @posts.each do |post| %>
    <tr>
    	<td><%= image_tag post.get_image, size: "100x100"  %></td>
        以下略
    </tr>
<% end %>
/app/views/posts/index.html.erb(変更後)
<% @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<ヨロシクオネガイシマス

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