写真と書棚ページで使っていた、ユーザー操作による過去ログの一気表示を、月ごとに表示していくように変更した。ボタンを押すと前の月が、ボタンを押すとその前の月が、ボタンを押すとさらに前の月が、ボタンを押すともっと前の月が、ボタンを押すともっとその前の月が、と少しずつ進む。最後の月にはボタンはないので、そこまでになる。
スタイル・ガイドでも確認できるが、写真ページでもすでに確認できる。数学的なページングより、知覚的なページングの方が優れている(このウェブサイトでは関係ないが、キャッシュとしても安定度が高い)とも考えているので、そういう点でも改善できたと思う。
これまでは最新の24枚と残りすべてというざっくりとした分割だった。その残りすべてを月ごとに分割し、一度に表示される画像を多くても50枚くらいに抑える。少しだけ辿ってみたい、という場合を想定して、それに最適化した。
引き換えに写真や書影を一気に見れなくなった。画像のためページ内検索をするわけでもなく、それほど必要ないはずなので、今のところはこのまま。template要素に対応していない環境向けに一気に表示するページはあるので、必要そうだったらそれへのリンクを追加しようと思う。
実装としてはあまり変化はない。すべての過去ログが仕込まていたtemplate要素を月ごとに作るように変え、その中にサムネイルとボタンを仕込んでおく。ユーザーによりボタンが押されたら、最初のtemplate要素のみを引っ張り出し、そのtemplate要素を削除する。つまり最後まで行くと、すべてのtemplate要素がなくなる。
こうすることでtemplate要素に固有の識別子を振ったり、ボタンに読み込むべき識別子をdata-*属性で指定したり、などする手間を省いた。コードの簡略化とmustacheへの最適化の間をとって、こういう実装になった。