2019年02月08日

kaminariを使ってRailsのページャーを実装する

今回はkaminariというGemを使ってページャーを実装します。
記事数が増えるとレイアウトが崩れてしまうのでページャーで見やすくしましょう!

この記事の目次

  • 1.kaminariのインストール
  • 2.Controllerの編集
  • 3.Viewの編集
  • 4.デフォルト値の設定
  • 5.日本語化の設定
  • 6.まとめ

kaminariのインストール

Gemfile
gem 'kaminari'

Gemfileにkaminariを記述します。

commandline
$ bundle install

bundle installkaminariをインストールします。

Controllerの編集

ページャーを適用したいコントローラーを編集します。

app/controller/articles_controller.rb
class ArticlesController < ApplicationController
    def index
        @articles = Article.page(params[:page]).per(10)
    end
end

.page(params:[page]).allの代わりをしてくれます。

.per()に1ページに表示する記事数を設定しましょう。

Viewの編集

x:app/view/index.html.erb
   <% @articles.each do |article| %>
   <%= article.title %>
   <% end %>
   <%= paginate(@articles) %>

該当のページでコードを記述して下さい。

<%= paginate(@articles) >の部分にページャーが表示されます。

デフォルト値の設定

先ほどは.per()を使って表示する記事数を指定しましたが、デフォルトで設定することも可能です。

commandline
$ rails g kaminari:config
   create  config/initializer/kaminari_config.rb

このコマンドでconfig/initializer/kaminari_config.rbが作成されます。

作成されたファイルを編集してデフォルト値を設定できます。

config/initializer/kaminari_config.rb
Kaminari.configure do |config|
  # config.default_per_page = 25         # 表示する記事数の定義
  # config.max_per_page = nil              # 最大数の表示数の定義
  # config.window = 4                          # 現在のページの+-いくつまで表示するか
  # config.outer_window = 0                 #最大最小ページから何ページ表示するか
  # config.left = 0                                #最初のページから何ページ表示するか
  # config.right = 0                              #最後のページから何ページ表示するか
  # config.page_method_name = :page # Controllerのメソッド定義
  # config.param_name = :page            # メソッドの引数定義
end

コメントアウトすることで使用可能で.perメソッドを省略できるようになります。

詳しくはこちら

日本語化の設定

kaminariはデフォルトだと英語の表示なのでlocalesで日本語化の設定をします。

config/locales/ja.yml
ja:
  views:
    pagination:
      first: "最初へ"
      last: "最後へ"
      previous: "前へ"
      next: "次へ"
      truncate: "..."

これで日本語に変更できます。

まとめ

今回はkaminariを使ったページ表示を変更しました。
このメディアも先ほど記述した設定がされています。
機能を試して使ってみて下さい。
ありがとうございました!