Pager Anti Pattern(Joke)
-
Upload
junichi-ishida -
Category
Documents
-
view
6.444 -
download
5
description
Transcript of Pager Anti Pattern(Joke)
![Page 1: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/1.jpg)
ページャーアンチパターン» これは見た目のお話です。
» アンチパターンといいつつ、ケチをつけるだけのていどひくい奴です
» 真に受けるな
» 当方主に管理画面などで年間多数のページャーを(略
![Page 2: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/2.jpg)
経緯
![Page 3: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/3.jpg)
経緯
![Page 4: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/4.jpg)
経緯
![Page 5: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/5.jpg)
自己紹介
» uzulla
» PHPerです
» 「YAPC PHP」でググって出るトークを応援下さい
![Page 6: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/6.jpg)
兎に角「次へ」を出すページャー» ❌次がないのに!!!
» ❌次のページがあるか見てない
» ❌突然の404
» ✅実装コストが低くてオトク
![Page 7: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/7.jpg)
「○件中」» ❌実装コストが高い
» ❌どうでもいい過去ログをしれっとパージできない
» ❌がんばった結果、「1000件ある」ってかいて4ページくらいしかないようなサイトもある(Googleとか)
» ✅絶対的な数字なので、検索結果とかなら指標になる
![Page 8: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/8.jpg)
「○件中『○件』表示しています」» ❌「だから?」という世界
» 秘伝のタレ感ある
![Page 9: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/9.jpg)
「31件~60件を表示」» ❌「だから?」という(略
» セットの件中がない場合、有用さがない
![Page 10: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/10.jpg)
ページャーの「数字」がよくわからない» みんな大好きFC2動画
» 900件とかあるのに数字が4まで
»
» 「こいつ…増えるぞ!?」
»
![Page 11: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/11.jpg)
ページャーの「数字」がよくわからない2» そしてページをすすむと…
»
» 1,2の特別さが謎い(理由知りたい)
![Page 12: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/12.jpg)
「前へ」がないページャー» はてブロの個別でない記事ページ(正式名称なんていうの?)
»
» (昔は違った気がするな???)
» (個別ページにはあります)
»
![Page 13: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/13.jpg)
「前へ」がないページャー2» (個別ページにはあります)
»
![Page 14: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/14.jpg)
1ページ目なのに、「一番最初に」や「前へ」があるページャー» ✅実装が楽
» ダサイだけで(個人的には)あってもよい
» (後述するが)座標がずれにくいのもよい
» ❌細かいお客様からはクレーム
![Page 15: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/15.jpg)
「次へ」ボタンがじわじわ座標がかわる ページャー» ❌「1 2 3 4 5 」が「10 11 12 13 14」
→「>」がずれる
» ❌気付かずに20pageくらい飛ばす
» ❌できるだけマウスを動かしたくない
![Page 16: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/16.jpg)
要素サイズが変わるページャー
»
![Page 17: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/17.jpg)
< 1 2 3 4 5 6 7 8 9 10 11 12> などと「全部の数字を出す」ページャー
» ❌爆発する
![Page 18: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/18.jpg)
< 1 2 3 4 5 6 7 8 9 10 11 12> などと「全部の数字を出す」ページャー2» とりあえずデザイナーさんが考えがち
» 金のない管理画面でありがち
» ✅「割り切れば」飛びやすいのも事実
![Page 19: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/19.jpg)
< ... 99 100 101 102 103 ... > などと前後を省略するページャー
»
» 意義が個人的には正直謎、3Pトバシづつ読むとか?
» 元が全部の数字を出すデザインで、爆発したときに誤魔化(ry という人も多いのではないでしょうか)
![Page 20: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/20.jpg)
「前へもどる」という表記» 丁寧に書いているのだろうが、微妙
» コンテキストによって「前」が変わる
» javascript:history.back()のことか???ってなる
» ただし、「アロー」がコモンセンスかわからん
![Page 21: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/21.jpg)
プルダウンページャー
»
» 現在のページ数を表示するUIを兼ねられる
» 案外ジャンプ性は高い
» ページ数がふえるとやっぱり死ぬ
» iPhoneでは(ry
![Page 22: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/22.jpg)
プルダウンページャー2» ✅現在のページ数を表示するUIを兼ねられる
» ✅案外ジャンプ性は高い
» ❌ページ数がふえるとやっぱり爆死
» iPhoneでは(ry
![Page 23: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/23.jpg)
入力欄式ページャー»
» ❌別途送信ボタンが必要でダサイ
» ❌マウスしか使えない人が死ぬ
» 実装がはてしなく楽
» ❌突然の404
» ❌全角を入れるお客様からクレーム
![Page 24: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/24.jpg)
(余談)プルダウンで何件調整するやつ» 便利な筈だが、恐ろしく使いづらい所にあったりする
» (最初のデザインになくて、雑につけたされたり)
» デフォルトが致命的にすくない件数つらい
» 変更をおぼえてくれない(Cookieとかで…)
» 10 50 100 件の秘伝のタレ感
» キャッシュ効率悪くて死ぬ
![Page 25: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/25.jpg)
おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)» 今風オシャレなのは大体これ
» 「ページャーなんていらなかったんや!!」
» 次を調べなくて良いので楽(失敗したらしれっと死ねばよい)
» サーバ側は多少無駄が増える
» 1Pが長すぎて死ぬ
» 「0件」と、「終わった」ことをユーザーにしめすUIは必要に
» 終わりがみえないので、絶望感が出る
» 深いページ数までいってブラウザがおちるとしにたい
![Page 26: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/26.jpg)
おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)2» サーバ側は多少無駄が増える
» 1Pが長すぎて死ぬ
» 「0件」と、「終わった」ことをユーザーにしめすUIは必要に
» 終わりがみえないので、絶望感が出る
» 深いページ数までいってブラウザがおちるとしにたい
![Page 27: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/27.jpg)
おーとぺーじゃじゃいず(インフィニットスクロール)(継ぎ足しロード)3» 終わりがみえないので、絶望感が出る
» 深いページ数までいってブラウザがおちるとしにたい
![Page 28: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/28.jpg)
手動インフィニットロード(継ぎ足しロード)
» geekdojoとか、Githubとか
» 押すまではうごかないので安全(?)
![Page 29: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/29.jpg)
手動インフィニットロード(継ぎ足しロード)» あとは変わらず(良い点も、悪い点も)
» 深いページからおちたときに、二度と戻れない絶望感は倍増
![Page 30: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/30.jpg)
(余談)手動ぺーじゃじゃいずが課金ボタン» Favstar
» うまいけどイラッとする
![Page 31: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/31.jpg)
(削除)ソーシャルボタン» ページャー関係ないけど
» おーとぺーじゃじゃいずと組み合わせると、破滅的にブラウザが重く
» Crowsnest
![Page 32: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/32.jpg)
期待されない位置にあるページャー
» コンテンツの上下以外にあり、目がおよぐ
![Page 33: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/33.jpg)
ショートカット» めっちゃ便利
» gmail, livedoor reader
» なんだけど、Vim系プラグインと衝突して死ぬ
![Page 34: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/34.jpg)
(モバイルの)フリック» 延々やっていると指がもげる
» フリックミスするたびにイライラする
» フリック失敗でもなんらか反応が必要(ずれるとか)
» 不安定な片手持ちだとタップのほうが良い
![Page 35: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/35.jpg)
(モバイルの)タップ» 「次へ」できる領域が見えないので、山勘で押すしかない。
» ハイコンテキスト
» おそろしくタップしづらい所にあるボタン
![Page 36: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/36.jpg)
Bootstrapページャー» (デザインの話です)
» 多すぎ!!!
» 過去にはFlickrページャー
» ^q^
![Page 37: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/37.jpg)
変則ページャー例 はてダ»
» 次へのボタンと継ぎ足しロードがセットに!!
» すごい高機能だぜ!!
» 特に文句ないんですけど、これなんでこうなった?
![Page 38: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/38.jpg)
変則ページャー(トゥ*ャッター)» 継ぎ足しロードとページャーが抱き合わせでオトク!!
»
» ???
» !?!?
» これは本当に分かりづらいし、誰得???
» なにかを防ぎたいの?
![Page 39: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/39.jpg)
変則ページャー(トゥ*ャッター)2» なにかを防ぎたいの?
![Page 40: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/40.jpg)
「TOP」がある» ページャーなのか?
» パンクズとの融合ともいえる
![Page 41: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/41.jpg)
ページャーに「記事名」をいれる»
» ページャーが変則二行になりやすい
» ぱっとみて、どっちが次で前か分かりづらい
![Page 42: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/42.jpg)
私が思う最悪のページャーをもつサービス» Twitpi○
![Page 43: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/43.jpg)
次へのリンクはどれ?
![Page 44: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/44.jpg)
正解
![Page 45: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/45.jpg)
この右上のUIだけでは全部の画像がみれない
»
» ロード時に最近の一定件数を読み込んでループさせてるっぽい
» (過去の画像から入って、ページャさせるともどれなくなる)
» 説明ができないほど謎な設計
![Page 46: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/46.jpg)
突然のまとめ» ページャーに銀の弾丸はない(とかかいておけばそれっぽいでしょ(ドヤァ))
![Page 47: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/47.jpg)
以後オマケ
![Page 48: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/48.jpg)
私が思うページャーグッドパーツ
![Page 49: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/49.jpg)
「次へ」の座標がずれないページャー»
» 左右もそうだが、上下も重要
» 次へと進むのにマウスをうごかさなくてすむ
» 会場ご提供のPixiv様!!
» (一部界隈のご意見)「ファーストビューしかみられないから悪!!!!」
![Page 50: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/50.jpg)
表示件数を画面におさまりきる範囲にしてくれる» 厳密にはページャの機能ではない?
» スクロールと次へを同時駆使しなくてよい
» デカイモニタをかえばよい
![Page 51: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/51.jpg)
最近のブラウザは30MbyteくらいのJSONなら余裕» 一部の特殊用途
» 事前に全件ロード
» 「次へ」ボタンの連打ビリティが上がり、UX(?)向上
» 投稿が発生しても、リロードするまで「ズレ」ない
![Page 52: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/52.jpg)
オフセットがEPOCHとかID
のやつ» 投稿がガンガンふえてもズレてこない
» URLコピペで(それなりに)正しいページを渡せる
![Page 53: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/53.jpg)
ページャーなんていらなかったんや» Ficia(というものがありました)
» よくできた無限スクロール
» 要素のサイズが計算できないと難しい
![Page 54: Pager Anti Pattern(Joke)](https://reader033.fdocuments.net/reader033/viewer/2022052323/558be1e2d8b42a1d608b46b5/html5/thumbnails/54.jpg)
< 1 ... 41 42 43 44 [45]