2017年2月18日土曜日

ページナビゲーションの検討① ~Blogger テンプレートを作るよ! (42)~

こんにちはー!

前回はブログにページ番号をつけたいという話をしました。
(前回:『ページ番号を表示したい! ~Blogger テンプレートを作るよ! (41)~』)

どうやら、ページ番号をつけたりするパーツのことをページナビゲーションというらしいので、こちらもそれに倣ってページナビゲーションと呼ぶことにします。

それをより具体的に考えるために、ページナビゲーションに必要なものをリストアップしてみました!


ページナビゲーションの材料

さて、ページナビゲーションを実装するためには、少なくとも現在表示している内容がどの位置にあるのかを把握することですね。それに加え、ページ数やページ番号を指定してのジャンプも必要です。

必要な材料

ページナビゲーションを実装するために必要そうな情報をとりあえずリストアップしておきましょう。
  • 現在のページ番号
    • 1ページあたり何件表示するか
    • 先頭から数えて何番目か
  • 全体のページ数
    • 1ページあたり何件表示するか
    • 全部で何件か
  • 前のページ、次のページ
    • 前のページのURL
    • 次のページのURL
  • 指定ページへのジャンプ
    • 指定したページ番号のURL
※このうち、「1ページあたり何件表示するか」は事前に設定すればいいことなので、飛ばします。

それでは、それぞれのページに対してそれらの情報をどう取得するかを考えてみましょう。

全検索ページ

全検索ページ
全ての投稿のリストである旨の説明はない
ブログのURLに 「/search」 とあり、ラベル検索でもキーワード検索でも無いものが全検索ページです。ラベルやキーワードでフィルタリングせずに、今までに投稿された記事の一覧を表示します。ページ切り替えの処理は、一つ前の記事の更新日時をキーに絞り込みををすることで表示しています。

全検索:先頭から数えて何番目か

実は、Blogger で取得できるフィード情報の中には、対象となるデータの「総数」が含まれています。更新日時を使って「○月○日までの投稿」のフィードを取得すると、フィードの「総数」が「○月○日までの投稿」の総数になります。これで、「この投稿より前に何件の投稿があるか」という情報を把握することができるのです。

全検索:全部で何件か

この情報も、実はフィードで取得することが可能です。ラベルや日時の絞り込みを行わずに取得件数0件でフィード情報を取得し、この数値を確認することで全体のページ番号を把握することができます。

ちなみに、ブログアーカイブガジェットがあるならそこからアーカイブの件数を合算すればフィードを使わずに全件数を取得することができます。

全検索:指定したページ番号のURL

これもフィードを使用することになります。フィードで「先頭から○件目の投稿」を取得し、その更新日時から検索ページのURLを作るという作業が必要になります。

ただし、この実装ではボタンを押してからフィードが返されるまでの間はページ移動が行われないため、ユーザーを待たせてしまいます。ボタンを押された後に何らかの表示で作業中であることを示しておかないと、ユーザーが混乱してしまう可能性があるので注意が必要です。

全検索:前のページ

特に何をしなくても、同等の機能を持つボタンが存在していますので、そこからリンクを拾うだけです。

全検索:次のページ

前のページと同様、最初からボタンが存在しますので、そこからリンクを拾うだけです。あえて言えば、トップページを指しているリンクは全検索の最新のページを表示するように変えておきたいところです。

ラベル検索ページ

ラベル検索ページ。
表示しているラベル名が表示される
ブログのURL に 「/search/label/〇〇」 と付いているものがラベル検索です。基本的な機能は全検索ページと同様で、ページ切り替えの処理は更新日時による絞り込みで行われています。

ラベル検索:先頭から数えて何番目か

全検索ページと同様、フィードで取得することが可能です。ラベルの絞り込みと日時の絞り込みは同時に使用できるので、これによって全検索ページと同じ方法で先頭から数えて何番目かを取得することは可能となります。

ラベル検索:全部で何件か

フィードにラベル名を指定して「総数」を取得すれば全部で何件あるのかを取得することができます。

ちなみに、一つラベルガジェットを用意する必要がありますが、フィードを使わなくて済む方法もあります。ラベルガジェットにはラベルごとの投稿数を表示する機能がありますので、ラベルの設定が「すべてのラベル」になっていればどのラベルでも件数を取得できるようになります。

ラベル検索:指定したページ番号のURL

これもフィードのラベルによる絞り込みを用いることで、全検索ページと同じ方法で取得することができます。

ラベル検索:前のページ

特に何をしなくても、同等の機能を持つボタンが存在していますので、そこからリンクを拾うだけです。

ラベル検索:次のページ

前のページと同様、最初からボタンが存在しますので、そこからリンクを拾うだけです。

ラベル検索:不具合

ラベル検索の URL にキーワード検索の q=△△ というパラメータを追加すると、「ラベル ○○ の投稿を表示しています。」という部分が「検索キーワード「△△」に一致する投稿を関連性の高い順に表示しています。」という表示に変わります。

でも、実際に表示されているのはラベル検索結果であって、キーワード検索は行われていません。非常に紛らわしいです。これも、テンプレート側で直せるなら直しておきたいところです。

キーワード検索ページ

キーワード検索ページ。
検索されたキーワードが表示される
ブログのURLに 「/search」 とあり、ラベル検索ではなく、URL のパラメータに q=〇〇 とあるものがキーワード検索です。他の検索と違い、ページ切り替えに更新日時を利用していません。先頭から何番目かで指定することができます。

キーワード検索:先頭から数えて何番目か

これはもう URL にそのものズバリの答えが載っています。いま表示している URL から start というパラメータの数値を取ってきて、1ページあたりの件数で割ればすぐに答えが出ます。

キーワード検索:全部で何件か

キーワード検索の場合、もっとも難しいのは全部で何件あるかを取得する方法です。他の検索ではフィードを利用することで対応可能でしたが、フィードにはキーワード検索と同等の絞り込みの機能が含まれていません。

考えられる方法としては、Javascript で先の検索ページを内部的に閲覧する処理をキーワード検索結果の終端まで続け、最終的に何件あったかを調べる方法です。回数を減らす工夫自体は可能ですが、検索結果の量に比例してアクセス回数が増えていってしまうという点が大きなデメリットです。

これは、Blogger のサーバーに必要以上の負荷をかけ、同時にユーザーの通信量を圧迫してしまう結果になります。ほんの僅かな便利さと引き換えにサーバーとユーザーに害を与える方法です。より良い方法が見つかるまではこの情報の取得は控えたいです。

キーワード検索:指定したページ番号のURL

これも、 start パラメータに何件目からを表示したいかを指定するだけで URL を作り出すことが可能ですので、何も迷うことはありません。

キーワード検索:前のページ

特に何をしなくても、同等の機能を持つボタンが存在していますので、そこからリンクを拾うだけです。

キーワード検索:次のページ

前のページと同様、最初からボタンが存在しますので、そこからリンクを拾うだけです。

アーカイブページ

アーカイブページ。
何月何日のアーカイブだという旨の説明は無い

ブログのURLに 「/○○○○_△△_□□_archive.html」 とあるものがアーカイブページです。記号にはそれぞれ、西暦、月、日が入ります。アーカイブとは一ヶ月、一週間、一日のいずれかに設定した期間ごとに、その期間内に更新された投稿をまとめたページのことです。

アーカイブ内の投稿はページ分割されずに一括で表示されますので、ページナビゲーションの内容も検索ページとは少し異なります。

アーカイブ:先頭から数えて何番目か

ブログアーカイブガジェットがブログに導入されていることを前提になりますが、いま表示しているアーカイブより以前のアーカイブがいくつあるかは、ブログアーカイブガジェットのリンクと更新日時を見れば把握することができます。

また、個々のアーカイブに投稿が何件あるかも取得することもできるので、合算すればこのアーカイブより前の投稿の件数についても取得することができます。

アーカイブ:全部で何件か

ブログアーカイブガジェットの内容を見れば、すべてのアーカイブ数を数えることができます。また、アーカイブ内の投稿の件数を合算することで投稿の総数を取得することもできます。

アーカイブ:指定したページ番号のURL

何個目のアーカイブがどれかはブログアーカイブガジェットの内容から取得することができるので、指定したページ番号(=アーカイブの○番目)に飛ぶ、というリンクを取得することもできます。

アーカイブ:前のページ

アーカイブの「前の投稿」のリンクは全検索ページへのリンクになっているので、アーカイブのURLに差し替えたほうが良いと思います。

アーカイブ:次のページ

アーカイブの「新しい投稿」のリンクも全検索ページのリンクになっているので、こちらもアーカイブのURLに差し替えたほうがいいと思います。

その他 アイテムページ

個々の投稿を表示しているページのことを、ここではアイテムページと呼ぶことにします。このページでは、もともと時系列的に前後の記事のリンクが付いていますので、通常であればこれで十分です。

あえて改造するなら、ラベル内の投稿を並べて読めると嬉しいですね。

例えば、「第○回、△△」みたいな連載モノの投稿の場合、ラベルに連載のシリーズ名を入れておくと前後の回へのリンクが付くとか、そういう機能も使い方によってはありがたいです。

その他 静的ページ

Blogger では、ブログの「ページ」で投稿されたものを「ページ」、あるいは「静的ページ」と呼んでいます。こちらは通常の投稿とは目的が違い、「時系列」という概念が存在しません。そのため、同様に前後のページへのリンクもありません。

まどうぐ工房式のテンプレートの場合、メニューに階層表示したページリストを使ったページナビゲーションが考えられます。前のページは上方向、次のページは下方向、それと自分より上位と下位の階層に進むリンクもつければ、使い勝手は良くなるかもしれません。

まとめ

全検索、ラベル検索ではフィードを使えばすべての情報が取得できるので、ページナビゲーションは実装することができそうです。

キーワード検索ページでは、件数の取得は実装を見送りたいので、現在のページ番号とページジャンプのみを実装することができそうです。

アーカイブは専用のブログアーカイブガジェットを一つ実装しておき、それを改造する形で対応したいです。

アイテムページと静的ページについては、それらを実装し終えた後で考えることにしましょう。

フィードを使わずに実装する方法は……?

フィードを使ったページナビゲーションは、フィードを公開していないブログでは使えません。非公開の日記ブログとか、限定公開の身内専用のブログでは使えません。

そこをどう解決しているのかと思って調べてみると、フィードを公開していないブログでは使用できないことが多いようです。

でも、それだと非公開のテスト用ブログでもテストしにくいし……どうにかできないものかなぁ。

0 件のコメント :

コメントを投稿