簡易SNSを作ってみよう（14）

ページネーションの導入

投稿が多くなるといろいろと問題が発生する，1画面に大量の投稿を表示するわけにはいかない．また，大量の投稿を処理するための時間がかかってしまいシステムのレスポンスが低下することも問題である．そこで，複数のページに分割することを考える．これをページネーションという．

ページネーションは，Kaminariというgemを使うと簡単に実現できる．

Kaminariのインストール

ページネーションを簡単に作ってくれるgemであるKaminariをインストールする．

【手順】

vi Gemfile

（以下を追記）

gem 'kaminari'

bundle install

bin/rails g kaminari:config

vi config/initializers/kaminari_config.rb

（以下を修正．とりあえず8件ずつ表示することにする）

# frozen_string_literal: true

Kaminari.configure do |config|

  config.default_per_page = 8

  # config.max_per_page = nil

  # config.window = 4

  # config.outer_window = 0

  # config.left = 0

  # config.right = 0

  # config.page_method_name = :page

  # config.param_name = :page

  # config.max_pages = nil

  # config.params_on_first_page = false

end

vi app/controllers/users_controller.rb

（以下を追加）

class UsersController < ApplicationController

  before_action :authenticate_user!

  def show

    @user = User.find(params[:id])

    @posts = Post.where(user_id: @user.id).order('created_at desc')

    @posts = Kaminari.paginate_array(@posts).page(params[:page])

…（略）…

vi app/views/users/show.html.erb

（以下を追加）

<% if @posts != nil %>

   <% l = @posts.length; @posts.each_with_index {|post, i|

…（略）…

           <div class="card-body">

                <%= simple_format(h(post.body)) %></div>

    </div>

   <% } %>

   <br />

   <%= paginate @posts %>

   <br />

<% end %>

最後に，見栄えをよくすべく，Bootstrap4に対応させる．

【手順】

bin/rails g kaminari:views bootstrap4

ページネーションのテスト

いずれかのStudentユーザーでログインして，9件以上のメッセージを投稿してみよう．図8のようなページネーションのコントロールが出てきたらOK．