現在投稿系のアプリを作成しており、1投稿に対してコメントを複数つけるようにしました。
そこでコメントが少ない場合なら良いのですが増えてきたときにコメントを見るために下までスクロールしないといけなくなります。
自分がユーザーでも面倒くさいので他の方法を考えました。
2つ考えてみました
1つ目の方法は （クリックしてコメントを表示）みたいなボタンを作ってボタンがクリックされたら表示する。という動作です これはjavascriptを使って実装できると思いました。 普段は@commentを(display:none)で消しておいて、onclickでshowさせるみたいにできるはずです。以下のサイトが参考になると思います。
2つ目の方法は
gem 'kaminari' を実装して、設定した数だけ表示して他の要素はページを切り替えることで見れるようにすることです
↓こんな感じ
こっちが簡単かなと思ったのでkaminariでやっていこうと思います
kaminariを使ったのpaginationの実装の仕方は今回は省きます。
こちらの記事を参考にさせて頂きました！
いざ実装!
まずはkaminariを導入します 投稿の詳細画面でコメントを表示させ、1ページに付き3件のコメントを表示させたいと思います def show
@comments = Comment.all.order(created_at: :desc).page(params[:page]).per(3)
end
orderで投稿が新しい順に表示します。
3件の指定は .per に渡している数字です
ひとまず機能はできたのですが、ちゃんと動くか分かりません。
動作を確認するためには大量のコメントデータを作る必要があるのですが、1つ1つ作っても良いのですがめちゃくちゃ面倒なのでgemを使います
ダミーデータを作るには、__「faker」__というgemを使うとすぐに実装できます
今回はコメントのダミーだけ作りたいので、コメントする投稿は1種類でコメントするuserと内容だけをダミーにしたいと思います。
ダミーのユーザーは下のコードで作りました。
nicknameを見ればわかると思いますが、そうですドラゴンボールのキャラをランダムで作りました笑
他にもポケモンやワンピースなどでも作ることができます！
20.times do |n|
User.create!(
nickname: Faker::JapaneseMedia::DragonBall.unique.character,
email: Faker::Internet.unique.email,
password: "3150test",
password_confirmation: "3150test"
)
end
ダミーの投稿に関しては、
commentsテーブルのカラムがuser_id, post_id, contentを入れています。
ここでどれか指定を忘れていると適用する時にエラーになるので気をつけて下さい
user_idは先ほど作成したダミーを使うので
user_id: rand(1..20)
post_idは固定するので試したい投稿のidを入れて下さい
contentんはランダムで適当なものを作るので
content: Faker::Lorem.sentence
10.times do |n|
Comment.create!(
user_id: rand(1..20),
post_id: 4,
content: Faker::Lorem.sentence
)
end
こんな感じで作ることができます！
