お手軽に実装できるPaging kaminariを使う

～GemをインストールしてTwitterBootStrap連携～

自己紹介酒井文也（さかい ふみや）

今までの仕事履歴（本業）

石川県金沢市生まれ・東京（大塚）住まいの30歳本業は某口コミサイトのプログラマ ※Railsを使っています

26歳～30歳：PHP / Rubyプログラマ / iOS（Objective-C & Swift）

23歳～25歳：Webデザイナー兼ディレクター

Rails歴：独学を含めて1年程度

趣味：シルバーアクセサリー集め・スイーツ作り・開発

女子向けと食べ物系コンテンツのお仕事が多い…

→ 楽しすぎるので自分でサービスを作ってしまおうと思っています。

Paginateの処理は自力だと大変SQL

Controller

・様々なテーブルをJOINした様なデータで行う場合はこっちで行っている場合も

組み立てたSQLを元にデータを取得

まずは、SQLを組み立てて

・特にView周りやコントローラー等は単一テーブルの場合はなるたけシンプルに

View

何件ずつ表示させるか等も考慮してビューを作成

結論：自力の実装は想像以上にめんどうくさい

・検索条件は？ ・1ページあたりの表示数は？ ・どういう見た目にするの？ ・ページのパラメータがない場合 　の処理はどうしよう？ ・データが1件もない場合の条件 　分岐はどうしよう？ ・ページャー部分はGoogleみたい 　にできればしたい… ・できるだけコードは少なく

その他イロイロ…

そこでkaminariの登場！kaminariに関する情報

まずは準備

https://github.com/amatsuda/kaminari・英語ですがコード例もあるので参考になります

・bundle install (—without production) をターミナルから実行・Gemfileに gem “kaminari” と書く

・どのバージョンでも大抵はサポート！

kaminariのメリット

・特にViewまわりコードがシンプルになる！

http://qiita.com/nysalor/items/77b9d6bc5baa41ea01f3・もっと細かい部分まで押さえておきたい方は是非！

＜POINT!＞ ・導入はとってもハードルは低いはず！

＜POINT!＞ ・このあたりも本当に嬉しいポイント！

kaminariを使うとこんな感じにSQL

Controller

◎コンソール上で確認をしてみて下さいSELECT "articles".* FROM "ads" ORDER BY "articles"."id" DESC LIMIT 10 OFFSET 0

＜POINT!＞ ・このあたりはkaminariがやってくれる

@articles = Article.page(params[:page]).per(10).order(id: :desc)

View＜POINT !＞

・Viewのソースがとってもシンプルになる

<%= paginate(@articles) %>

・割とシンプルにまとめてしまうことができる ⇒でも本当に一番重たい部分はView周りのところ

・たったこれだけでOK!

＜POINT!＞ ・per(10)で ”表示数” , page(params[:page]) 　で“表示ページ番号”を意味する

①view配下に”kaminari”フォルダを作る partialを入れる用

手動で追加して下さい（下記のgithubからgit cloneでも可）

■ viewの中

②こちらのURLを参考に”kaminari” 　フォルダにファイルを入れる

そのままコピペでOK

https://github.com/gabetax/twitter-bootstrap-kaminari-views

③こんな感じになればOK！ Twitter Bootstrapのマークア ップに合わせるという話

Example) ※注意点 前に書いたソースでは、 デザインが崩れる。。

◎解決策 kaminari用のパーシャルを 作ってあげよう。

■ 完成イメージ◎ポイント (1) デフォルトでもきれい！ (2) 前・次のページ、最初・最後のページも標準で搭載！ !⇒定番ですけど良く使います

kaminari & TwitterBootStrap連携

質疑応答※なんでもOKです！（参考書籍や勉強方法等も含む）プライベートなことでも可能な限りお答えします。