前項までに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)で１ページに表示する件数を指定しています。
ブラウザで確認してみましょう。
上の図のように表示されていれば実装成功です。
エラーや、うまく表示できていない場合は記述を間違えている場合があるので再度確認して下さい。
ページネーションの機能を、gem無しで実装しようとすると、それなりの時間と知識が必要なのですが、kaminariというgemを利用することでたった数行記述するだけでページネーションの実装ができてしまいました。
Try*Try**ページネーションの実装*１ページに表示する件数を操作して好きな値に変更しましょう。
