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

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

効率のいいWEBサイトを追求する、下駄です。
 

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

本日のIT謎掛け

「データボリューム」と、かけまして、
 

「漁獲されたサメ」と、ときます。
 

そのココロは・・・
 

大きくなると、フカ(サーバー不可と、サメのフカの値段)が高くなります。

ページネーションの役割

Googleで検索した時に、検索結果の下に必ず付いているページングと呼ばれるアレが、ページネーションですが、
 


 

この機能によって、検索結果がどのくらいのボリュームがあるかを体感することができます。
 

もちろん、ページ上部に、検索結果数が「約○○件」と書かれているんですが、上位から何件目を表示しているかも体感することができ、ページング効果は無意識であってもアリアリですね。
 

そして、システムを作っていると、何かしらのデータをリスト表示するケースは少なからずあります。
 

さらに、ページネーション機能を使うと、1回で読み込む件数を一定以下に制限できるため、そのリストを出力するサーバーの処理負荷も、軽減できるというメリットもあります。
 

同時に利用者もリスト表示される時間が長いと、イライラしがちですが、こうした体感値も、向上させることができます。
 

無限読み込み機能

WEBマーケティングでは、ページネーションと並ぶ機能として「無限読み込み」という機能があります。
 

この無限読み込み機能というのは、TwitterやFacebookなどのSNSでのタイムライン表示するページで、スクロールを下にしていって、どんどん次の画像が読み込まれて、SNSの中毒性は、この無限読み込み(スクロール)機能の為であるとも考えられます。
 

実はこの無限読み込み機能も、1度の読み込み件数を一定にすることができる為、サーバー負荷はページネーション機能と同じレベルになる上、ユーザーの待ち時間軽減も、同レベルだと容易に考えられます。
 

そう考えると、無限読み込み機能は、ページを1度読み込むと、あとは次々と読み込まれるため、あまりストレスを感じにくいんですが、
 

ページネーションは、リンクして次のページを読み込む事になるため、ページ読み込みを体感してしまう事を考えると、無限読み込み機能は、メリットがあるとも考えられますね。

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

いろいろなページで探してみたところ、デザインも含めて以下のようなページネーションを見つけることができました。
 


 

ページ番号のリンク以外に「前」「次」のリンク機能がありますが、中には、ページリストの「先頭」「末尾」のリンクも設けているものもありますね。
 

そして、次の4パターンが考えられます。
 

 

1番は、ページ番号のリンクのみで、5件以上を「..」としています。
 

2番は、1番に「前」「次」のリンクが追加されています。
 

3番は、さらに「先頭」と「末尾」のリンクが追加されていますが、
 

4番は、「先頭」「末尾」リンクをページ番号を表示することで不要にすることができます。
 

こうしてみると、4番が一番スッキリしてすべての機能を網羅させているので、この方式が良いことがわかります。

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

[webページライブラリ]
Pagenationhttps://wordpress.ideacompo.com/?p=16348
 

ライブラリを作ってみて、難しかった点は、
 

1. ページリンクで、現在表示されているページのactiveの前後数件リンクを表示する箇所で、リスト先頭と、リスト末尾が、中間値ではなく、最小値と最大値に寄せていくところの計算は、まあまあややこしい感じでした。
 

わかりやすく図解にすると、
 

通常は、
.. 2 3 [4] 5 6 …
となりますが、
 

先頭は、
[1] 2 3 4 5 ..
となり、
 

前後に2件ずつ表示させますが、2ページ目までは、
1 [2] 3 4 5 ..
という風に、前後数が変動します。
 

結果的に、最小値と最大値を条件で持たせた5つの配列としてページを算出する方式にしたんですが、5つの件数を任意にしているところも含めてとても苦労した点です。
 

また、めんどくさかった点として、1ページ目の場合は、「前」リンクが無いとか、
1 .. 2 3 [4] 5 6 .. 10
という風に「..」をつけるタイミングなどについても、意外とスマートな書き方ではなかったので、もっと簡潔な書き方ができないか、今でも考えてしまいます。
 

ともかく、便利なシステム構築の為にページネーションは不可欠であるとも考えられますね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です