【Rails】 kaminariの使い方を理解してページネーションを実装しよう

kaminariとは、rubyのgemの一つでページネーションを簡単に実装するためのものです。

ページネーションというのは1つのページに掲載するコンテンツが多くなってしまった時、複数ページに分けて表示させるようにしたものです。

みなさんもYahoo!やGoogleで検索したときに1 2 3 ・・・・と表示されているのをみたことがあるかと思います。この部分をページネーションと呼びます。

Railsでは、kaminariというgemを使うことによって簡単に実装することが出来ます。

kaminariの使い方

リンクをコピーしました

この章では、kaminariの使い方について丁寧に解説します。

なぜページネーションが必要なのか

リンクをコピーしました

トップページはほとんどのサイトが情報の一覧を載せています。
その情報が少なければいいですが、例えば投稿一覧がトップページに表示されるサイトの場合、全ての投稿がトップページに表示されると読み込むまでに時間がかかりますし、かなり読みにくくなってしまいますよね。

そんなときにページネーションの機能を実装しておけば表示される項目が一定数を越えると自動的に次のページへ内容を移行してくれるのでものすごい便利になります。

gemをインストールしよう

リンクをコピーしました

それではrailsのアプリでページネーション機能を実装してみましょう。
Gemfileの一番下にこのように記述してください。

1
gem 'kaminari'

その後、ターミナルでbundle installを行いましょう。
これでkaminariで定義されたメソッドや機能を使うことができるようになります。

ページネーションを定義してみよう

リンクをコピーしました

それでは実際のコードを書き方を確認してみましょう。
コントローラーでは下記の様に定義します。

1
2
3
def index
  @users = User.page(params[:page]).per(10)
end

pageとperいうメソッドがkaminariで定義されたメソッドです。
perメソッドの引数にどれだけのレコードが表示されたらページを増やすかを指定できます。

ビューでページネーションが表示される場所は下記のように定義します。

1
<%= paginate @users %>

たったこれだけでページネーションが実装できます。
ものすごい便利なgemですね！

もちろんページネーションが表示されるには表示される数が定義した数より多い必要があります。

ページネーションの見た目を変える方法

リンクをコピーしました

kaminariで表示させるページネーションはビューの中でcssを当てる事は出来ません。
見た目を変えたい場合はターミナルで下記のコマンドを実行します。

1
$ rails g kaminari:views default

するとapp/viewsフォルダにkaminariが追加されます。
そのフォルダの中にページネーションの部分のhtmlが記述されているので、そちらで変更を行いましょう。

cssのフレームワークのデザインを適用させる

リンクをコピーしました

bootstrapなどのcssのフレームワークを使っている場合、表示やデザインが崩れる場合があります。
その時は上のコマンドのdefaultの部分をそれぞれのフレームワークの名前に指定します。
bootstrap4を使っている場合は下記のコマンドになります。

1
$ rails g kaminari:views bootstrap4

用意されているフレームワークは下記のものがあります。

• bootstrap4
• bourbon
• bulma
• foundation
• materialize
• pure css ※指定するコマンドはpurecss
• semantic ui ※指定するコマンドはsemantic_ui

このコマンドを実行し、ビューファイルを作成すると何も編集しなくてもそれぞれのフレームワークのスタイルに最適化されます。

kaminariを日本語化する方法

リンクをコピーしました

ビューファイルではページネーション内の文字を変更することはできません。
デフォルトだと英語なので日本語にしたい時は新たなファイルを作成します。

config/localesフォルダにkaminari_ja.ymlというファイルを作成し、下記のようなコードを書けばOKです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ja:
  views:
    pagination:
      first: "« 最初"
      last: "最後 »"
      previous: "‹ 前"
      next: "次 ›"
      truncate: "..."
  helpers:
    page_entries_info:
      one_page:
        display_entries:
          zero: ""
          one: "<strong>1-1</strong>/1件中"
          other: "<strong>1-%{count}</strong>/%{count}件中"
      more_pages:
        display_entries: "<strong>%{first}-%{last}</strong>/%{total}件中"

これでページネーション内の文字を編集することができます。

実際のアプリでページネーションを使ってみよう

リンクをコピーしました

この章では、アプリケーションにページネーションを追加する方法について解説します。実際に手を動かすことで理解を深めることが出来るので、是非挑戦しましょう。

環境を構築する

リンクをコピーしました

それでは実際にアプリの中でページネーションを実装してみましょう。
下記のコマンドを順に実行してみましょう。

1
2
3
git clone -b kaminari https://github.com/miyagit/programan_dojo.git #1.リポジトリを複製する
cd programan_dojo #2.programan_dojoディレクトリへ移動
bundle install  #3.gemをインストール

上記のbundle installを実行した際にrbenv: version ‘2.4.1’ is not installedと表示された場合は、ruby -vと実行してください。

さらに、version(例: 2.3.1)と出てきたら、vim .ruby-versionとし、ruby -vで出てきた値(例: 2.3.1)に書き換えてください。

続いてvim Gemfileとし、ruby 2.4.1と書いてある部分をruby -vで出てきた値(例: 2.3.1)に書き換えてください。

最後に以下を実行します。

1
rails db:create && rails db:migrate && rails db:seed #4.データベース作成と初期データ投入

上記を実行すると「環境構築が完了しました。」と表示されるので、アプリケーションが動作するかrails sコマンドで起動しましょう。

サーバーを起動して、ブラウザにlocalhost: 3000と入力し、下記のような画面が出てくれば環境構築完了です！

kaminariのgemを追加しよう

リンクをコピーしました

それではページネーションを簡単に実装できるgemのkaminariをインストールしましょう。
Gemfileの末尾に下記のコードを入力してください。

1
gem 'kaminari'

その後、ターミナルでbundle installを実行しましょう。

コントローラーにページネーションのコードを書いてみよう

リンクをコピーしました

これでkaminariが定義しているメソッドを使うことができるようになりました。
早速Mainコントローラーのtopアクションで使ってみましょう。
Mainコントローラーのtopアクションを下記のように編集してください。

1
2
3
4
    def top
        @title = "gemのkaminariを使ってページネーションを実装してみよう"
        @users = User.page(params[:page]).per(5)
    end

次にビューにページネーションが表示される記述をします。
top.html.erbを下記のように編集してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class='p-top'>
    <p class='p-top__title'>今回の記事の目標：<%= @title %>！</p>
    <table border="1" class='p-top__introduce'>
    <tr>
    <th>id</th>
    <th>名前</th>
    <th>年齢</th>
    <th>身長</th>
    <th>体重</th>
    </tr>
    <% @users.each do |user| %>
    <tr>
      <td><%= user.id %></td>
      <td><%= user.name%></td>
      <td><%= "#{user.age}歳" %></td>
      <td><%= "#{user.tall}cm" %></td>
      <td><%= "#{user.weight}kg" %></td>
      </tr>
    <% end %>
  </table>
  <%= paginate(@users) %>
</div>

21行目にコードを追加しました。

今回の記述ではTOPページに表示されるユーザーをperメソッドで5人と指定しました。
ですのでユーザーが5人以上登録されているとページネーションが表示されるはずです。
実際のビューで確認をしてみましょう。

その前に新しくgemをインストールしたのでサーバーの再起動をしましょう。
サーバーを立ち上げていたらcontrol+ cでサーバーを止めてrails sでサーバーを立ち上げてください。

このようにしっかりとページネーションが付いていますね！
表示されているユーザーも7人から指定した通り5人になっているのがわかります。
残りの2人は次のページに表示されているはずです。
「2」をクリックして確認してみましょう。

ちゃんと残りの2名が表示されていますね！

ただページネーションがかなり画面の左に寄ってしまっているので中央に寄せましょう。
ページネーションを表示させるコードに下記のスタイルを指定してください。

1
<div class='p-top__paginate'><%= paginate(@users) %></div>

新たなスタイルを追加したのでスタイルシートにも定義しましょう。
assets/stylesheets/top.scssのファイルを下記のように編集してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.p-top {
  min-width: 960px;
  &__title {
    text-align: center;
    font-size: 16px;
  }

  &__introduce {
    margin: 0 auto;
    th {
        padding: 0 15px;
    }
    td {
      padding: 0 15px;
    }
  }
  &__paginate {
    text-align: center;
    margin:0 auto;
  }
}

このように中央寄せになっているのが確認できます。

それでは1ページに表示されるレコード数を変えてみましょう。
現在は5人なので3人にしてみましょうか。
それにはどの部分を変えたらよかったでしょう。

そうですねperメソッドの引数の値を変えてあげれば良いですね。
下記のようにMainコントローラーのtopアクションを編集しましょう。

1
@users = User.page(params[:page]).per(3)

それではビューが変わっているか確認してみましょう。

このように表示される人数が3人になり、その分ページネーションのページ数が3になっているのが確認できました。他にもRailsについて体系的に学びたい方は、こちらの参考書もよく使われています。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ