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