ココログ活用ブログ

ココログの長いカテゴリーページを分割するために作ったJavaScriptプログラム。どのような仕組みでページ分割を実現しているのか、簡単に説明します。

その前にまず、paginate4cocolg.jsの機能概要。

・ paginate4cocolog.jsは、デフォルトで1ページに20エントリずつ表示し、あたかも長いページが複数のページに分割されているように動作します
・ ページの切り替えは非常に高速です。（すべてのデータはメモリ上で表示・非表示が切り替わるため）
・ ページごとにURLを持ちます。1ページ目のURLは最後に#1が、10ページ目のURLには最後に#10が付きます
・ URLに上記のページ番号を指定するURLにジャンプすると、ちゃんとそのページが表示されます
・ たぶん、TypePadやMovableTypeでも使えます

こんなところですかね。

それから1ページあたり表示するエントリ数を変更する場合には、paginate4cocolog.jsのソースコード中の下記の変数の初期値を書き換えてください。
var EntriesPerPage = 20;

さて、ここからページ分割の仕組みの話になります。基本的な仕組みは簡単で、そのページに含まれているすべてのエントリに対して、特定のエントリだけを表示し、残りを非表示にして、最後にページ移動用のナビゲーションを追加しているだけです。

例えば、エントリが50個含まれているページを想定します。1ページ目としての表示では、最初の20エントリだけを表示し、21エントリから50エントリまでは非表示にします。2ページ目としての表示では、最初の20エントリを非表示にし、21から30エントリまでを表示、31から50エントリまでを非表示します。こうして、擬似的に20エントリずつのページが複数あるように見せているのです。

なぜこんなことができるか、というと、ココログ／TypePad／MovableTypeでは、すべてのエントリは1つ1つが<entry></entry>に囲まれています。なので、これをまずいったん全部JavaScriptの配列に読み込み、あとはダイナミックHTMLの手法を使って、表示したい<entry></entry>だけを表示し、それ以外を非表示にしている、というわけです。ですから、エントリが<entry></entry>に囲まれている、ということが、このプログラムが動作する条件です。

このアイデアは割と簡単に思い浮かんだのですが、なにせJavaScriptでちゃんとプログラムを組むのは初めてのことだったので、IEとFirefoxのあいだでJavaScriptの動作に違うところがあったり、どんな命令やプロパティがあるのか調べたりと、プログラミングテクニックの部分でずいぶん手間がかかってしまいました。実際には週末の丸2日くらいの時間でできたと思います。

というわけで、動作はIE6とFirefox2で確認しています。

ソースコードには割りと丁寧にコメントをいれたつもりなので、もしさらに詳しい仕組みにご興味があるかたはそちらをぜひ。