改めてページネーションについて考える

効率のいいWEBサイトを追求する、ユゲタです。 簡単そうで、自分で１から実装しようとすると意外と難しい「ページネーション」について、データ量の多いWEBサイトでは必至機能なのに、開発現場であまり重要視されにくいので、その機能について、ちゃんと考えてみることにした。

本日のIT謎掛け

「データボリューム」と、かけまして・・・ 「漁獲されたサメ」と、ときます。 そのココロは・・・ 大きくなると、フカ（サーバー不可と、サメのフカの値段）が高くなります。

ページネーションの役割

Googleで検索した時に、検索結果の下に必ず付いているページングと呼ばれるアレが、ページネーションですが、 この機能によって、検索結果がどのくらいのボリュームがあるかを体感することができます。 もちろん、ページ上部に、検索結果数が「約○○件」と書かれているんですが、上位から何件目を表示しているかも体感することができ、ページング効果は無意識であってもアリアリですね。 そして、システムを作っていると、何かしらのデータをリスト表示するケースは少なからずあります。 さらに、ページネーション機能を使うと、1回で読み込む件数を一定以下に制限できるため、そのリストを出力するサーバーの処理負荷も、軽減できるというメリットもあります。 同時に利用者もリスト表示される時間が長いと、イライラしがちですが、こうした体感値も、向上させることができます。

無限読み込み機能

WEBマーケティングでは、ページネーションと並ぶ機能として「無限読み込み」という機能があります。 この無限読み込み機能というのは、TwitterやFacebookなどのSNSでのタイムライン表示するページで、スクロールを下にしていって、どんどん次の画像が読み込まれて、SNSの中毒性は、この無限読み込み（スクロール）機能の為であるとも考えられます。 実はこの無限読み込み機能も、1度の読み込み件数を一定にすることができる為、サーバー負荷はページネーション機能と同じレベルになる上、ユーザーの待ち時間軽減も、同レベルだと容易に考えられます。 そう考えると、無限読み込み機能は、ページを1度読み込むと、あとは次々と読み込まれるため、あまりストレスを感じにくいんですが、 ページネーションは、リンクして次のページを読み込む事になるため、ページ読み込みを体感してしまう事を考えると、無限読み込み機能は、メリットがあるとも考えられますね。

ページネーションのパターン

いろいろなページで探してみたところ、デザインも含めて以下のようなページネーションを見つけることができました。 ページ番号のリンク以外に「前」「次」のリンク機能がありますが、中には、ページリストの「先頭」「末尾」のリンクも設けているものもありますね。 そして、次の4パターンが考えられます。 1. page-lists (max-count) [1] 2 3 4 5 .. - max-count : maxximam number is arbitary. 2. page-lists + prev&next < 1 [2] 3 4 5 .. > - prev , next : 1 page fiber. 3. page-lists + prev&next + first&last << < 1 2 [3] 4 5 .. > >> - first , last : page-1st , page-last link. 4. prev&next , page-lists(between,max-count) < 1 .. 5 [6] 7 .. 10 > - between : Show start and end with maximum number. 1番は、ページ番号のリンクのみで、5件以上を「..」としています。 2番は、1番に「前」「次」のリンクが追加されています。 3番は、さらに「先頭」と「末尾」のリンクが追加されていますが、 4番は、「先頭」「末尾」リンクをページ番号を表示することで不要にすることができます。 こうしてみると、4番が一番スッキリしてすべての機能を網羅させているので、この方式が良いことがわかります。

エンジニアとしてのページネーション構築

[webページライブラリ] Pagenation ライブラリを作ってみて、難しかった点は、 1. ページリンクで、現在表示されているページのactiveの前後数件リンクを表示する箇所で、リスト先頭と、リスト末尾が、中間値ではなく、最小値と最大値に寄せていくところの計算は、まあまあややこしい感じでした。 わかりやすく図解にすると、 通常は、

.. 2 3 [4] 5 6 ...

となりますが、 先頭は、

[1] 2 3 4 5 ..

となり、 前後に2件ずつ表示させますが、2ページ目までは、

1 [2] 3 4 5 ..

という風に、前後数が変動します。 結果的に、最小値と最大値を条件で持たせた５つの配列としてページを算出する方式にしたんですが、5つの件数を任意にしているところも含めてとても苦労した点です。 また、めんどくさかった点として、1ページ目の場合は、「前」リンクが無いとか、

1 .. 2 3 [4] 5 6 .. 10

という風に「..」をつけるタイミングなどについても、意外とスマートな書き方ではなかったので、もっと簡潔な書き方ができないか、今でも考えてしまいます。 ともかく、便利なシステム構築の為にページネーションは不可欠であるとも考えられますね。