【Rails】kaminariとboostrap4を使ってページネーションをする

11914 ワード
Rails Ruby ページネーション Boostrap4 kaminari Ruby テキストリンク

ページネーションとは？

ページネーションとは画像の通り、検索した時などの下に出てくる、今は何ページ目…と表記してくれるもの。

railsでこのページネーションを導入する際にはkaminariと言うgemを使っていく。

手順
①kaminariのインストール
②ページネーションデザインのデフォルトの設定ファイルを作成/編集
③コントローラーの編集
④viewの実装

①kaminariのインストール

今回はboostrap4を一緒に使っていくので、Gemfileにkaminariとbootstrap4-kaminari-viewsを記入し、bundle installする。

Gemfile.
gem 'kaminari'
gem 'bootstrap4-kaminari-views'

→　bundle install

②ページネーションデザインのデフォルトの設定ファイルを作成/編集

ターミナルにて、設定ファイルの作成コマンドを実施。

ターミナル.
rails g kaminari:config

config/initializers/kaminari_config.rbを開くと、下記がデフォルトで入っている。
基本的にコメントアウトされているので設定したいもののコメントアウトを外していく。それぞれの意味は下記に記載していく。

kaminari_config.rb
# frozen_string_literal: true

Kaminari.configure do |config|
  # config.default_per_page = 25
　　　　　　　　1ページあたりの表示件数(デフォルトは25レコード）

  # config.max_per_page = nil
　　　　　　　　1ページあたりの最大表示件数(デフォルトはnil。つまり無限）

  # config.window = 4
　　　　　　　現在のページから、左右何ページ分のリンクを表示させるか(デフォルトは4件)

  # config.outer_window = 0
　　　　　　　最初(First)と最後(Last)のページから、左右何ページ分のリンクを表示させるか(デフォルトは0件)

  # config.left = 0
　　　　　　　最初(First)のページから、何ページ分のリンクを表示させるか(デフォルトは0件)

  # config.right = 0
　　　　　　　最終(Last)ページから、何ページ分のリンクを表示させるか(デフォルトは0件)

  # config.page_method_name = :page
　　　　　　　モデルに追加されるページ番号を指定するスコープの名前:page by default

  # config.param_name = :page
　　　　　　　ページ番号を渡すために使用するパラメータ名(デフォルトは:page)
　　　　　　　↑Board.page(params[:page])のようにparamsメソッドで取得できる。

  # config.max_pages = nil
　　　　　　　最大ページ数(デフォルトはnil）

  # config.params_on_first_page = false
　　　　　　　最初のページでparamsを無視しない
end

③コントローラーの編集

ページネーションを表示させたいところに.page(params[:page])を追加。
例えばBoardにページネーションをつけたい場合、以下のように記載。

boards_controller.rb
def index
 @boards = Board.all.includes(:user).order(created_at: :desc).page(params[:page])
end

ここの表記に.per(20)を付け足たら以下のようになる↓
@boards = Board.all.includes(:user).order(created_at: :desc).page(params[:page]).per(20)

ただし、１ページにこの場合だと最大２０件と設定できるが、毎回ページネーションを新たに追加するごとに同じように記入しなければならないので、出来ればコントローラーに記載した方が、DRYな記法になる。

④viewの実装

あとはページネーションさせたいviewに下記を追記するだけで出来る。

index.html.rb
<%= paginate @boards %>

ページネーションのデザイン変更

先程のだけだと少しシンプルすぎるので、先程のviewに以下を書き足す。

index.html.rb
<%= paginate @boards, theme: 'twitter-bootstrap-4' %>

結果きれいに装飾され見やすくかつボタンが押しやすくなった。

またこれとは別に、cssを編集してさらに自分好みのデザインに変更することも可能。

ラベルを日本語に変更

ラベルとは、ページ番号の前後についているFirstやPrveのこと。
デフォルトでは英語表記なので、こちらを日本語に変更したい場合はrailsアプリのデフォルト言語を日本語に変更したあと、ja.ymlにてそれぞれ編集する必要がある。
▶︎デフォルトの言語を日本語に設定

config/localesに日本語変換用のja.ymlを作成。下記のは一例。

config/locales/ja.yml
ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."

ラベルのアイコン化

ラベルをアイコンのみにすることで、よりシンプルなページネーションを作ることができる。
Font Awesome使った例を記載。

はじめに、Font Awesomeを読み込むために,
app/views/layouts/application.html.erbに以下のコードを追加して、アプリ全体にFont Awesomeを適用。

app/views/layouts/application.html.rb
#コード追加　Font Awesome読み込みコード
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

あとは先程出てきたja.ymlファイルに使用したいアイコンのコードに書き換えるのみでOK。

<< < 1 2 3 .....9 10 > >>のようになる。

config/locales/ja.yml
ja:
  views:
    pagination:
      first: <i class="fas fa-angle-double-left"></i>
      last: <i class="fas fa-angle-double-right"></i>
      previous: <i class="fas fa-angle-left"></i>
      next: <i class="fas fa-angle-right"></i>
      truncate: "..."

参考記事

【Rails】kaminariの使い方をざっくりまとめてみた
【Rails初心者】ページネーションを実装して自分好みにデザインを変える
Kaminariの使い方 まとめ