やりたいこと

すでに画像は各投稿での表示はできているので、

各投稿の画像だけを1つのページで表示したい。

なぜ画像一覧ページを作るのか？

今作ってるのはダイエットアプリで、身体の変化がわかるようにするため。

作業内容

すでに画像はデータベースに保存できてるので、あとはデータベースから取ってきて表示するだけだ。

この「画像一覧」を押したら、current_userが投稿した画像一覧が見れるページに遷移するようにしたい。

新しくビューを作る

「画像一覧ページ」なので「image.html.haml」というファイルをpostsディレクトリ下に配置した。

コントローラーに新しくアクションを作る

posts_controllerにimageアクションを追加した。

ルーティングを設定する

config/route.rb

# 画像一覧ページ
get "posts/image" => "posts#image"

posts#imageが動くようにルーティングを設定する。

パスを設定する

$ rails routesで確認して、以下のようにpathを設定した。

ここまででposts#imageが動くようになった。

posts#imageでcurrent_userが投稿した画像データを取得

mapメソッド？
valueメソッド？

current_userが投稿した画像一覧ページができた

結果的に出来上がったページはこちら。
current_userが投稿した画像が新しい順で表示されてる。

該当コードはこちら

#####コントローラー

posts_controller.rb

def image
  @posts = Post.where(user_id: current_user.id)
end

これは単純にログイン中ユーザーの投稿を@postsというインスタンス変数に入れてビューでここから取得できるようにしてる。

ビュー

image.html.haml

.content
  .images
  - @posts.each do |post|
    = image_tag post.image.url, class: "my-images"

ここで画像を表示するのに苦労した。

最初は後述の番外編の@imagesから取得して表示しようとしたが、これだと表示できなかった。

- @posts.each do |post|
  = image_tag post.image.url, class: "my-images"

ログイン中ユーザーの投稿したpostsたちが配列の形で@postsに入ってるので、それをeachメソッドで1つ1つ取り出して、
その1つ1つ取り出すのに使うのが変数（ここでいうpost）。

@postsのにはどんな感じでposts(投稿データ)が入ってるかというと、

ターミナル

[1] pry(#<PostsController>)> @posts
  Post Load (0.5ms)  SELECT `posts`.* FROM `posts` WHERE `posts`.`user_id` = 28
  ↳ app/controllers/posts_controller.rb:65
=> [#<Post:0x00007fc263764bc0
  id: 217,
  food: "サラダ",
  calorie: 10.5,
  protein: 10.5,
  fat: 10.5,
  carbo: 10.5,
  text: "サラダを食べました。",
  created_at: Fri, 21 Aug 2020 06:56:52 UTC +00:00,
  updated_at: Fri, 21 Aug 2020 06:56:52 UTC +00:00,
  user_id: 28,
  start_time: nil,
  image: "image6.png",
  weight: 70.5>,
 #<Post:0x00007fc263764a58
  id: 219,
  food: "サラダ",
  calorie: 10.0,
  protein: 10.0,
  fat: 10.0,
  carbo: 10.0,
  text: "サラダ",
  created_at: Fri, 21 Aug 2020 10:20:31 UTC +00:00,
  updated_at: Fri, 21 Aug 2020 10:20:31 UTC +00:00,
  user_id: 28,
  start_time: nil,
  image: "image6.png",
  weight: nil>,

こんな感じだ。

@posts.imageとすることで、このうちのimageカラムを指定できる。
上記のような配列から1つ1つ取り出して、それらのimage: "image6.png"この部分だけを取り出して、
image_tag で表示できるように.urlを付ければOK。

番外編（おお!!ってなったこと）

posts_controller.rb

def image
  @images = Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
end

結構感動したのがこれ。

binding.pryするとどうなるかというと、

[1] pry(#<PostsController>)> Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
  User Load (0.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 28 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ (pry):2
  Post Load (0.4ms)  SELECT `posts`.`image` FROM `posts` WHERE `posts`.`user_id` = 28
  ↳ (pry):2
=> ["image6.png", "image6.png", "image5.png", "image4.png"]

こんな感じで、画像データを配列の形で取得している。

posts_controller.rb

def image
  @images = Post.where(user_id: current_user.id).select(:image).map{ |image| image[:image]}
end

# Post Postモデルの
# .where(user_id: current_user.id) ログイン中ユーザーの投稿を検索して取得
# .select(:image) imageカラムだけ取得

ここまでは簡単。

てっきりこれで画像データを取得できると思ったらできない。

ここまででbinding.pryするとどうなるかというと、

=> [#<Post:0x00007fc261c86290 id: nil, image: "image6.png">,
 #<Post:0x00007fc261c85fe8 id: nil, image: "image6.png">,
 #<Post:0x00007fc261c85cc8 id: nil, image: "image5.png">,
 #<Post:0x00007fc261c85a20 id: nil, image: "image4.png">]

こんな感じで画像のurl以外の情報も出てきてしまうのだ。

どうすればimage6.pngこの部分だけ取り出せるかと試行錯誤した結果、上記のやり方で取得できた。

結果的に使わなかったけれど、こういう形で取得できるんだとわかったので、勉強になった。