【Rails】kaminariの使い方を徹底解説!2019年03月18日Railskaminariとはrailsのgemの一つでページネーションを簡単に実装するためのものです。そもそもページネーションってなに?リンクをコピーしましたページネーションというのは1つのページに掲載するコンテンツが多くなってしまった時、複数ページに分けて表示させるようにしたものです。・・・・と表示されているのをみたことがあるかと思います。ページネーションが必要なのかリンクをコピーしましたトップページはほとんどのサイトが情報の一覧を載せています。その情報が少なければいいですが、例えば投稿一覧がトップページに表示されるサイトの場合、全ての投稿がトップページに表示されると読み込むまでに時間がかかりますし、かなり読みにくくなってしまいますよね。そんなときにページネーションの機能を実装しておけば表示される項目が一定数を越えると自動的に次のページへ内容を移行してくれるのでものすごい便利になります。gemをインストールしようリンクをコピーしましたそれではrailsのアプリでページネーション機能を実装してみましょう。Gemfileの一番下にこのように記述してください。install」を行いましょう。これでkaminariで定義されたメソッドや機能を使うことができるようになります。ページネーションを定義してみようリンクをコピーしましたそれでは実際のコードを書き方を確認してみましょう。コントローラーでは下記の様に定義します。User.page(params[:page]).per(10)end「page」と「per」いうメソッドがkaminariで定義されたメソッドです。「per」メソッドの引数にどれだけのレコードが表示されたらページを増やすかを指定できます。ビューでページネーションが表示される場所は下記のように定義します。%>たったこれだけでページネーションが実装できます。ものすごい便利なgemですね!もちろんページネーションが表示されるには表示される数が定義した数より多い必要があります。ページネーションの見た目を変える方法リンクをコピーしましたkaminariで表示させるページネーションはビューの中でcssを当てる事は出来ません。見た目を変えたい場合はターミナルで下記のコマンドを実行します。defaultすると「app/views」フォルダに「kaminari」が追加されます。そのフォルダの中にページネーションの部分のhtmlが記述されているので、そちらで変更を行いましょう。cssのフレームワークのデザインを適用させるリンクをコピーしましたbootstrapなどのcssのフレームワークを使っている場合、表示やデザインが崩れる場合があります。その時は上のコマンドの「default」の部分をそれぞれのフレームワークの名前に指定します。bootstrap4を使っている場合は下記のコマンドになります。bootstrap4用意されているフレームワークは下記のものがあります。※指定するコマンドは「semantic_ui」このコマンドを実行し、ビューファイルを作成すると何も編集しなくてもそれぞれのフレームワークのスタイルに最適化されます。kaminariを日本語化する方法リンクをコピーしましたビューファイルではページネーション内の文字を変更することはできません。デフォルトだと英語なので日本語にしたい時は新たなファイルを作成します。config/localesフォルダにkaminari_ja.ymlというファイルを作成し、下記のようなコードを書けばOKです。"<strong>%{first}-%{last}</strong>/%{total}件中"これでページネーション内の文字を編集することができます。実際のアプリでページネーションを使ってみようリンクをコピーしましたそれでは実際にアプリの中でページネーションを実装してみましょう。下記のコマンドを順に実行してみましょう。2.3.1)に書き換えてください。2.3.1)に書き換えてください。db:seed環境構築が完了しました。sコマンドで起動しましょう。3000と入力して下記のような画面が出てくれば環境構築完了です!kaminariのgemを追加しようリンクをコピーしましたそれではページネーションを簡単に実装できるgemのkaminariをインストールしましょう。Gemfileの末尾に下記のコードを入力してください。install」を実行しましょう。コントローラーにページネーションのコードを書いてみようリンクをコピーしましたこれでkaminariが定義しているメソッドを使うことができるようになりました。Mainコントローラーのtopアクションで使ってみましょう。Mainコントローラーのtopアクションを下記のように編集してください。end次にビューにページネーションが表示される記述をします。top.html.erbを下記のように編集してください。%></div>21行目にコードを追加しました。今回の記述ではTOPページに表示されるユーザーをperメソッドで5人と指定しました。ユーザーが5人以上登録されているとページネーションが表示されるはずです。実際のビューで確認をしてみましょう。その前に新しくgemをインストールしたのでサーバーの再起動をしましょう。sでサーバーを立ち上げてください。このようにしっかりとページネーションが付いていますね!表示されているユーザーも7人から指定した通り5人になっているのがわかります。残りの2人は次のページに表示されているはずです。「2」をクリックして確認してみましょう。残りの2名が表示されていますね!ただページネーションがかなり画面の左に寄ってしまっているので中央に寄せましょう。ページネーションを表示させるコードに下記のスタイルを指定してください。%></div>新たなスタイルを追加したのでスタイルシートにも定義しましょう。assets/stylesheets/top.scssのファイルを下記のように編集してください。}}このように中央寄せになっているのが確認できます。それでは1ページに表示されるレコード数を変えてみましょう。現在は5人なので3人にしてみましょうか。それにはどの部分を変えたらよかったでしょう。「per」メソッドの引数の値を変えてあげれば良いですね。下記のようにMainコントローラーのtopアクションを編集しましょう。User.page(params[:page]).per(3)それではビューが変わっているか確認してみましょう。このように表示される人数が3人になり、その分ページネーションのページ数が3になっているのが確認できました。まとめkaminariはページネーションを簡単に実装できるgemです。