酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

kaminariをBootstrap3、Rails4.2環境で使う![Ruby 2.3]

Rails 4でも不動の人気を誇るページネーター「amatsuda/kaminari」を Bootstrap3、Rails4環境で使うための導入手順です。びっくりするくらい簡単に導入できちゃいますよ!

(2016/01/11) Rails 4.2 x Ruby 2.3の動作確認。記事をリファクタリング


まえおき

この記事は、Bootstrap環境を構築済の前提で話を進めます。もし、Bootstrap環境の構築からスタートしたい場合は、 拙著『Rails 4.2 + Bootstrap の Application template 1コマンドでモダンRailsが!』をご参照頂ければ幸甚です!

Gemインストール

Gemfileに以下を追加して、bundle installを実行。

1
2
3
# Gemfile
# Pagenation
gem 'kaminari'

kaminari configの設定

kaminariのconfig(設定)ファイルを生成。

1
$ rails g kaminari:config

config/initializers/kaminari_config.rbを構築するサイトに合わせて各種パラメータを調整。 パラメータの詳細は『 amatsuda/kaminari | GitHub』を参照。

Controller/Viewへの設置

Controllerでページネーションをするための変数を追加。

1
@users = User.order(:name).page(params[:page])

Viewでページネーションを表示したい場所に以下のコードを追加。

1
= paginate @users

ベージネーションViewのテンプレート取得

次のコマンドを実行すると /app/view/kaminari/ フォルダにBootstrap用のViewを生成してくれます。

1
$ rails g kaminari:views bootstrap3

ページネーターの表示カスタマイズ

ページネーションの文言(prevやnextなど)の変更程度であれば、i18nの日本語設定ファイルに以下の内容を追加するだけで解決します。

1
2
3
4
5
6
7
8
9
# conifg/locales/ja.yml
ja:
  views:
    pagination:
      first: "«"
      last: "»"
      previous: "‹"
      next: "›"
      truncate: "..."

上は英語部分を外して、記号を残した場合の例です。これだけでもシンプルでわかりやすいですよ!

fpu_tmp_1354804296.8519_d61bda

ルーティングの設定

ルーティングを以下の様に変更します。

1
2
3
4
# config/routes.rb
resources :users do
  get 'page/:page', :action => :index, :on => :collection
end

このルーティングのメリットは次の通り。

* SEO的に良い、ユーザーフレンドリーである
* params pageがURLセグメントの一部 => RailsのPageキャシュが有効に

表示確認

ブラウザで表示を確認します。以下は今回作ったサンプルページネーションです。

fpu_tmp_1354636719.4462_910632

(補足) プレゼンターのGem Draperと共存させる場合

kaminariとプレゼンターのDraperを使う場合は、Draperがうまくkaminariのメソッドを呼び出せない場合があります。

その場合は、config/initializers/draper.rbを作成して以下を記入しておくとエラーを回避できます。

1
Draper::CollectionDecorator.delegate :current_page, :total_pages, :limit_value, :total_count

Kaminari vs Draper · Issue #401 · drapergem/draper

Special Thanks

amatsuda/kaminari | GitHub

Kaminari recipes | amatsuda/kaminari | GitHub wiki

ささっと Rails4 + Bootstrap3 + kaminari でゲストブック作成してみるメモ - 牌語備忘録 - pygo

変更来歴

(2013/04/18 23:35) 補足: プレゼンターDraperと共存させる場合を追加
(2013/12/23 20:15) Bootstrap3、Rails4に対応
(2015/12/20 18:30) コマンドを修正
(2016/01/11 09:10) Rails 4.2 x Ruby 2.3の動作確認。記事をリファクタリング

おすすめの書籍