狠狠撸

ページャーアンチパター
ン
? これは見た目のお話です。
? アンチパターンといいつつ、ケチをつけるだけのてい
どひくい奴です
? 真に受けるな
? 当方主に管理画面などで年間多数のページャーを（略

自己紹介
? uzulla
? PHPerです
? 「YAPC PHP」でググって出るトークを応援下さい

に角「次へ」を出すペ
ージャー
? ?次がないのに！！！
? ?次のページがあるか見てない
? ?突然の404
? ?実装コストが低くてオトク

「○件中」
? ?実装コストが高い
? ?どうでもいい過去ログをしれっとパージできない
? ?がんばった結果、「1000件ある」ってかいて４ペー
ジくらいしかないようなサイトもある（Googleと
か）
? ?絶対的な数字なので、検索結果とかなら指標になる

「○件中『○件』表示し
ています」
? ?「だから？」という世界
? 秘伝のタレ感ある

「31件～60件を表示」
? ?「だから？」という（略
? セットの件中がない場合、有用さがない

ページャーの「数字」が
よくわからない
? みんな大好きFC2動画
? 900件とかあるのに数字が４まで
?
? 「こいつ…増えるぞ！？」
?

ページャーの「数字」が
よくわからない2
? そしてページをすすむと…
?
? 1,2の特別さがい（理由知りたい）

「前へ」がないページャ
ー
? はてブロの個別でない記事ページ（正式名称なんてい
うの？）
?
? （昔は違った気がするな？？？）
? （个别ページにはあります）

「前へ」がないページャ
ー2
? （个别ページにはあります）
?

１ページ目なのに、「一
番最初に」や「前へ」が
あるページャー
? ?実装が楽
? ダサイだけで（個人的には）あってもよい
? （後述するが）座標がずれにくいのもよい
? ?細かいお客様からはクレーム

「次へ」ボタンがじわじ
わ座標がかわるページャ
ー
? ?「1 2 3 4 5 」が「10 11 12 13 14」
→「＞」がずれる
? ?気付かずに20pageくらい飛ばす
? ?できるだけマウスを動かしたくない

要素サイズが変わるペー
ジャー
?

< 1 2 3 4 5 6 7 8 9 10 11 12> な
どと「全部の数字を出
す」ページャー
? ?爆発する

< 1 2 3 4 5 6 7 8 9 10 11 12> な
どと「全部の数字を出
す」ページャー2
? とりあえずデザイナーさんが考えがち
? 金のない管理画面でありがち
? ?「割り切れば」飛びやすいのも事実

< ... 99 100 101 102 103 ... > な
どと前後を省略するペー
ジャー
?
? 意義が個人的には正直、３Pトバシづつ読むとか？
? 元が全部の数字を出すデザインで、爆発したときに誤
魔化（ry という人も多いのではないでしょうか）

「前へもどる」という表
記
? 丁寧に書いているのだろうが、微妙
? コンテキストによって「前」が変わる
? javascript:history.back()のことか？？？って
なる
? ただし、「アロー」がコモンセンスかわからん

プルダウンページャー

プルダウンページャー2
? ?現在のページ数を表示するUIを兼ねられる
? ?案外ジャンプ性は高い
? ?ページ数がふえるとやっぱり爆死
? iPhoneでは（ry

入力欄式ページャー
?
? ?別途送信ボタンが必要でダサイ
? ?マウスしか使えない人が死ぬ
? 実装がはてしなく楽
? ?突然の404
? ?全角を入れるお客様からクレーム

（余談）プルダウンで何
件調整するやつ
? 便利な筈だが、恐ろしく使いづらい所にあったりする
? （最初のデザインになくて、雑につけたされたり）
? デフォルトが致命的にすくない件数つらい
? 変更をおぼえてくれない（Cookieとかで…）
? 10 50 100 件の秘伝のタレ感
? キャッシュ効率悪くて死ぬ

おーとぺーじゃじゃいず
（インフィニットスクロ
ール）（継ぎ足しロー
ド）
? 今風オシャレなのは大体これ
? 「ページャーなんていらなかったんや！！」
? 次を調べなくて良いので楽(失敗したらしれっと死ね
ばよい）

ド）２
? サーバ側は多少無駄が増える
? １Pが長すぎて死ぬ
? 「0件」と、「終わった」ことをユーザーにしめすUI
は必要に

ド）３
? 終わりがみえないので、絶望感が出る
? 深いページ数までいってブラウザがおちるとしにたい

手動インフィニットロー
ド(継ぎ足しロード)
? geekdojoとか、Githubとか
? 押すまではうごかないので安全(？)

手動インフィニットロー
ド(継ぎ足しロード)
? あとは変わらず（良い点も、悪い点も）
? 深いページからおちたときに、二度と戻れない絶望感
は倍増

（余談）手動ぺーじゃじ
ゃいずが課金ボタン
? Favstar
? うまいけどイラッとする

（削除）ソーシャルボタ
ン
? ページャー関係ないけど
? おーとぺーじゃじゃいずと組み合わせると、破滅的に
ブラウザが重く
? Crowsnest

期待されない位置にある
ページャー
? コンテンツの上下以外にあり、目がおよぐ

ショートカット
? めっちゃ便利
? gmail, livedoor reader
? なんだけど、Vim系プラグインと衝突して死ぬ

（モバイルの）フリック
? 延々やっていると指がもげる
? フリックミスするたびにイライラする
? フリック失敗でもなんらか反応が必要（ずれるとか）
? 不安定な片手持ちだとタップのほうが良い

（モバイルの）タップ
? 「次へ」できる領域が見えないので、山勘で押すしか
ない。
? ハイコンテキスト
? おそろしくタップしづらい所にあるボタン

Bootstrapページャー
? (デザインの話です）
? 多すぎ！！！
? 過去にはFlickrページャー
? ^q^

変則ページャー例はてダ
?
? 次へのボタンと継ぎ足しロードがセットに！！
? すごい高機能だぜ！！
? 特に文句ないんですけど、これなんでこうなった？

変則ページャー（トゥ＊
ャッター）
? 継ぎ足しロードとページャーが抱き合わせでオト
ク！！
?
? ???
? !?!?
? これは本当に分かりづらいし、誰得？？？

変則ページャー（トゥ＊
ャッター）2
? なにかを防ぎたいの？

「TOP」がある
? ページャーなのか？
? パンクズとの融合ともいえる

ページャーに「記事名」
をいれる
?
? ページャーが変則二行になりやすい
? ぱっとみて、どっちが次で前か分かりづらい

私が思う最悪のページャ
ーをもつサービス
? Twitpi○

次へのリンクはどれ？

この右上のUIだけでは全
部の画像がみれない
?
? ロード時に最近の一定件数を読み込んでループさせて
るっぽい
? （過去の画像から入って、ページャさせるともどれな
くなる）
? 説明ができないほどな設計

突然のまとめ
? ページャーに銀の弾丸はない
（とかかいておけばそれっぽいでしょ（ドヤァ））

私が思うページ
ャーグッドパー
ツ

「次へ」の座標がずれな
いページャー
?
? 左右もそうだが、上下も重要
? 次へと進むのにマウスをうごかさなくてすむ
? 会場ご提供のPixiv様！！
? （一部界隈のご意見）「ファーストビューしかみられ
ないから悪！！！！」

表示件数を画面におさま
りきる範囲にしてくれる
? 厳密にはページャの機能ではない？
? スクロールと次へを同時駆使しなくてよい
? デカイモニタをかえばよい

最近のブラウザは
30MbyteくらいのJSONなら
余裕
? 一部の特殊用途
? 事前に全件ロード
? 「次へ」ボタンの連打ビリティが上がり、UX(？)向
上
? 投稿が発生しても、リロードするまで「ズレ」ない

オフセットがEPOCHとかID
のやつ
? 投稿がガンガンふえてもズレてこない
? URLコピペで（それなりに）正しいページを渡せる

ページャーなんていらな
かったんや
? Ficia（というものがありました）
? よくできた無限スクロール
? 要素のサイズが计算できないと难しい

狠狠撸

Pager Anti Pattern（Joke）

More Related Content

Viewers also liked (20)

More from Junichi Ishida (7)

Pager Anti Pattern（Joke）