更新日: 2017年2月27日
公開日: 2016年2月16日

作って学ぶRuby on Rails Vol.23 ページネーションをgemで実装しよう！

ページネーション
ページネーションgem‘kaminari’

ページネーション

前項までにModelを利用したCRUDで、ユーザー管理システムのような仕組みを作成しました。

本項以降では、gem*gem**を利用して更に高度なWebアプリケーションを作成していきます。*

本項では、gem「kaminari」を利用してページネーションを実現するための実装を行います。

ページネーションとは上の図のように、一覧を表示する画面等の下部に各ページや最後のページへのリンクを表示することを意味します。主にユーザー情報を表示するページやプログなど、データ量の多い場合に用いられます。

それでは、Gemfileを開いてください。


source 'https://rubygems.org'


 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '4.2.5'
 # Use sqlite3 as the database for Active Record
 gem 'sqlite3'
 # Use SCSS for stylesheets
 gem 'sass-rails', '~> 5.0'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .coffee assets and views
 gem 'coffee-rails', '~> 4.1.0'
 # See https://github.com/rails/execjs#readme for more supported runtimes
 # gem 'therubyracer', platforms: :ruby

 # Use jquery as the JavaScript library
 gem 'jquery-rails'
 # Turbolinks makes following links in your web application faster. Read more: <a href="https://github.com/rails/turbolinks">https://github.com/rails/turbolinks</a>
 gem 'turbolinks'
 # Build JSON APIs with ease. Read more: <a href="https://github.com/rails/jbuilder">https://github.com/rails/jbuilder</a>
 gem 'jbuilder', '~> 2.0'
 # bundle exec rake doc:rails generates the API under doc/api.
 gem 'sdoc', '~> 0.4.0', group: :doc

 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'

 # Use Unicorn as the app server
 # gem 'unicorn'

 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development

 group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
 end

 group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: <a href="https://github.com/rails/spring">https://github.com/rails/spring</a>
  gem 'spring'
 end

上記コードは初期状態になります。group◯◯◯doという記述がありますが、◯◯◯には環境名が入ります。例えば、developmentと記述されている場合は開発環境、つまり今利用しているCloud9の環境にinstallされる形になります。

productionと記述すれば、本番環境(RubyonRailsコースの最後に学習するHerokuという環境)のみinstallされます。

RubyonRailsにおける環境

ここに下記のコードを追記して下さい。

#ページネーションgem‘kaminari’


source 'https://rubygems.org'


 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
 gem 'rails', '4.2.5'
 # Use sqlite3 as the database for Active Record
 gem 'sqlite3'
 # Use SCSS for stylesheets
 gem 'sass-rails', '~> 5.0'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .coffee assets and views
 gem 'coffee-rails', '~> 4.1.0'
 # See https://github.com/rails/execjs#readme for more supported runtimes
 # gem 'therubyracer', platforms: :ruby

 # Use jquery as the JavaScript library
 gem 'jquery-rails'
 # Turbolinks makes following links in your web application faster. Read more: <a href="https://github.com/rails/turbolinks">https://github.com/rails/turbolinks</a>
 gem 'turbolinks'
 # Build JSON APIs with ease. Read more: <a href="https://github.com/rails/jbuilder">https://github.com/rails/jbuilder</a>
 gem 'jbuilder', '~> 2.0'
 # bundle exec rake doc:rails generates the API under doc/api.
 gem 'sdoc', '~> 0.4.0', group: :doc

 # Use ActiveModel has_secure_password
 # gem 'bcrypt', '~> 3.1.7'

 # Use Unicorn as the app server
 # gem 'unicorn'

 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development

 # ページネーション
 gem 'kaminari'

 group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
 end

 group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: <a href="https://github.com/rails/spring">https://github.com/rails/spring</a>
  gem 'spring'
 end

記述する箇所は特に問いませんが、ハイライトの部分に今回は追記します。

追記後、下記のコマンドを実行して下さい。

Bundlecomplete!13Gemfiledependencies,55gemsnowinstalled.

Usebundleshow[gemname]toseewhereabundledgemisinstalled.bundle show [gemname]

上記文字列が表示されれば、installは正常に行われたことになります。

このように、RubyonRailsではGemfileにgem名を記述し、installすることで、gemの機能を利用することができるようになります。

Gemfileとbundleinstallコマンドは以後よく利用するので、必ず覚えておいて下さい。

gemを利用することで、Webアプリ開発を効率化できるので、どんどん利用していきましょう。今後自らWebアプリを開発していく際はぜひ、「こんなgem誰かが作ってないかな」と考えるようにし、車輪の再開発を無くしていきましょう。gemファイルを探す際は、下記のサービスを利用しましょう。https://github.com/https://rubygems.org/特に、githubでは各gemの利用方法を記載しているのでとても便利です。

それでは、今回installした「kaminari」を実際に利用していきましょう。

ページネーション対象のページはユーザー一覧ページです。

kaminariによるページネーションを実装する際は、下記のコードをViewに追記します。

追記した箇所に、下の図のようなリンクが自動で作成されます。



<h1>ユーザー一覧</h1>

 <div class="search_forms">
  <%= form_tag(users_path, method: "get") do %>
  <%= label_tag :name, "名前" %>
  <%= text_field_tag :name, params[:name], class: "form_text" %>
  <%= label_tag :name, "性別" %>
  <%= select_tag :gender, options_for_select(User.genders), include_blank: true, class: "form_select" %>
  <%= submit_tag "検索", class: "form_button" %>
  <% end %>
 </div>
 <div>
  <%= link_to "ユーザーの新規登録", new_user_path %>
 </div>
 <div class="profile_list">
  <table>
  <theader>
  <tr>
  <th>名前</th><th>性別</th><th>生年月日</th><th>出身</th><th>編集</th><th>削除</th></th>
  </tr>
  </theader>
  <tbody>
  <% @users.each do |user| %>
  <tr>
  <td>
  <%= link_to user.name, user_path(user) %>
  </td>
  <td>
  <%= user.gender %>
  </td>
  <td>
  <%= user.birthday %>
  </td>
  <td>
  <%= user.hometown %>
  </td>
  <td>
  <%= link_to "編集", edit_user_path(user) %>
  </td>
  <td>
  <%= link_to "削除", user_path(user), :method => :delete %>
  </td>
  </tr>
  <% end %>
  </tbody>
  </table>
  <%= paginate @users %>
</div>

続いて、indexというActionを編集していきます。

処理の流れは変更しませんが、変数の扱い方を少し変更します。


 # 初期表示
  def index
  users = User.all
  # パラメータとして名前か性別を受け取っている場合は絞って検索する
  if params[:name].present?
  users = users.get_by_name params[:name]
  end
  if params[:gender].present?
  users = users.get_by_gender params[:gender]
  end

  @users = users.page(params[:page]).per(5)
 end

@usersというインスタンス変数の使い方を少し変更したのと、Actionの最後の行に下記を追記しています。

page(params[:page])で、現在のページを取得し、per(5)で１ページに表示する件数を指定しています。

ブラウザで確認してみましょう。