Pagingモジュール：ココログなどのTypePad系ブログでカテゴリーページを分割するテンプレート・モジュール

《2009/12/12追記》
【注意】　2009年10月1日から順次移行されているTypePadの新バージョンでは、このモジュールはまったく機能しません。
（ココログで11月16日に導入された「カテゴリ毎バックナンバーの表示変更」とは違います）
　もし、このモジュール導入後に新TypePadに移行した場合、カテゴリーページが表示されなくなりますので、変更したアーカイブ・テンプレート（entry-listモジュール）の、
「<$MTInclude module="paging-initialize"$><MTEntries><$MTInclude module="paging-entry-top"$>」
「<$MTInclude module="paging-entry-bottom"$></MTEntries><$MTInclude module="paging-navigation"$>」
に変更した箇所を、それぞれ、元の「<MTEntries>」「</MTEntries>」に戻してください。
　新TypePadでは、このモジュール無しでカテゴリーページが分割表示されます。

---

■まえがき

　現行のココログなどのTypePad系ブログでは不可能とされていた長くなったカテゴリーページを“サーバー側”で複数のページに分割するテンプレート・モジュールです。
　表題はカテゴリーページの分割としていますが、月別バックナンバーページなどでも同じように利用できます。

　これまでにもJavaScriptでの擬似的な分割表示は実現されていましたが、PC側での分割表示のためダウンロードサイズは変わらず、エントリー記事が数百件にもおよぶカテゴリーページだとブロードバンド環境でも読み込みに数十秒待たされることも珍しくありませんでした。
　このモジュール導入の最大のメリットは、その読み込み時間の大幅な削減にあります。
　サーバー側で分割するので基本的に閲覧環境に影響を受けません。もちろんJavaScriptがオフに設定してあるブラウザでもちゃんと分割されます。
　また些細なことですが、ブラウザのバックボタンで前の分割ページに戻ることもできます。（JavaScript方式では戻れなかったんです）
　基本仕様が単純なために、JavaScriptを駆使すれば完全に自由なカスタマイズができることも魅力です。

　能書きはこのくらいにして、さっそく導入の仕方をご紹介します。
　なお導入には、直接テンプレートのHTMLをいじる必要があるため、ココログ・プロ、TypePad プロ（Pro）プランなどの上級テンプレートを利用可能なコースである必要があります。
　TypePadとココログで動作確認済みです。

　あとお約束ですが、ご利用は自己責任でお願いします。

---

■導入方法

１．Pagingモジュールの新規作成

　まず、導入したい上級テンプレートに以下の5つのテンプレート・モジュールを新規作成します。
　※ココログを前提に説明しますが、TypePadやその他TypePad系ブログでもやり方はほぼ一緒のはずです。（注意点有り）

　テキストエリア内の内容を全選択して、完全にコピー＆ペーストしてください。
　単純なHTMLと違って改行位置なども影響しますので、余計な空白や改行を入れないよう、あるいは削除しないよう注意してください。
　すべてのモジュールで終端は改行無しです。

　新規モジュールを保存するたびにテンプレートの再構築をするようメッセージが出ますが、ここではまだ再構築する必要はありません。

　細かいカスタマイズ法は後述しますが、とりあえず気になるであろう「1ページあたりの表示エントリー数」ですが、デフォルトでは10エントリー毎に分割するようになっています。
　これをデフォルトレベルで変更するには、合計4箇所を修正する必要があります。
　仕様上、2～100エントリー毎の分割に対応しています。注意書きをよく読んで間違えのないように修正してください。
　なお、デフォルトを変更しなくてもJavaScriptで表示するナビゲーションリンク側を変更することはできます（後述）ので、まずはデフォルトのまま導入してみることをお薦めします。

●テンプレート名: paging-initialize

<!--#set var="JavaScriptNavigation" value="1" --> <!--#set var="defaultUnit" value="10" --> <!--#set var="visualTop" value="最新 >" --> <!--#set var="visualNext" value="これより後" --> <!--#set var="visualPrevious" value="これより前" --> <!--#set var="visualLast" value="< 最後" --> <!--#set var="visualUnit" value="件" --> <!--#set var="visualAll" value="全件" --> <!--#if expr="$QUERY_STRING = /s=([^&]+)/" --><!--#set var="start" value=$1 --><!--#else --><!--#set var="start" value="" --><!--#endif --><!--#if expr="$QUERY_STRING = /e=([^&]+)/" --><!--#set var="end" value=$1 --><!--#else --><!--#set var="end" value="" --><!--#endif --><!--#set var="flag" value="0" --><!--#set var="entry" value="#" --><!--#set var="next" value="#0" --><!--#set var="previous" value="" --> <div id="paging-navigation-top" class="content-nav entry-nav"></div> <script type="text/javascript"> <!-- <!--#if expr="$JavaScriptNavigation = '1'" -->var pagingEntries = new Array(); <!--#endif -->
　分割エントリー数を変更するには、
2行目「<!--#set var="defaultUnit" value="10" -->」
の、10を希望するエントリー数（2～100）に変更してください。

●テンプレート名: paging-entry-top

<!--#if expr="$start = '' || $start = '<$MTEntryID$>'" --><!--#set var="flag" value="1" --><!--#set var="start" value="<$MTEntryID$>" --><!--#elif expr="$flag = '0' && $next = /^((?:#[^#]+){1,10})/" --><!--#set var="next" value="#<$MTEntryID$>$1" --><!--#elif expr="$flag = '2' && $previous = /(?:#[^#]+){10}/" --><!--#set var="flag" value="3" --><!--#elif expr="$flag = '2'" --><!--#set var="previous" value="#<$MTEntryID$>$previous" --><!--#endif --><!--#if expr="$flag = '1'" -->// --> </script>
　分割エントリー数を変更するには、
「$next = /^((?:#[^#]+){1,10})/」
「$previous = /(?:#[^#]+){10}/」
の、2箇所の10を希望するエントリー数（2～100）に変更してください。

●テンプレート名: paging-entry-bottom

<script type="text/javascript"> <!-- <!--#endif --><!--#if expr="$flag = '1' && ($end = '<$MTEntryID$>' || $entry = /.{10}/)" --><!--#set var="flag" value="2" --><!--#elif expr="$flag = '1' && $end = ''" --><!--#set var="entry" value="#$entry" --><!--#endif --><!--#if expr="$JavaScriptNavigation = '1'" -->pagingEntries[pagingEntries.length] = '<$MTEntryID$>'; <!--#endif --><!--#set var="last" value="<$MTEntryID$>" -->
　分割エントリー数を変更するには、
「$entry = /.{10}/」
の、10を希望するエントリー数（2～100）に変更してください。

●テンプレート名: paging-navigation

// --> </script> <!--#if expr="$next = /^(.*)#[^#]+$/" --><!--#set var="next" value=$1 --><!--#endif --><!--#if expr="$next = /^#([^#]+)/" --><!--#set var="end" value=$1 --><!--#endif --><!--#if expr="$next = /^(?:#[^#]+){99}(#[^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="10" --><!--#elif expr="$next = /^(?:#[^#]+){89}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="9" --><!--#elif expr="$next = /^(?:#[^#]+){79}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="8" --><!--#elif expr="$next = /^(?:#[^#]+){69}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="7" --><!--#elif expr="$next = /^(?:#[^#]+){59}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="6" --><!--#elif expr="$next = /^(?:#[^#]+){49}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="5" --><!--#elif expr="$next = /^(?:#[^#]+){39}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="4" --><!--#elif expr="$next = /^(?:#[^#]+){29}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="3" --><!--#elif expr="$next = /^(?:#[^#]+){19}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="2" --><!--#elif expr="$next = /^(?:#[^#]+){9}((?:#[^#]+){1,10})$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="1" --><!--#elif expr="$next = /^(?:#[^#]+){1,9}$/" --><!--#set var="next" value="#0$next" --><!--#set var="nextCount" value="" --><!--#else --><!--#set var="next" value="" --><!--#set var="nextCount" value="" --><!--#endif --><!--#if expr="$next = /^(?:#[^#]+){9}#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}9" --><!--#elif expr="$next = /^(?:#[^#]+){8}#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}8" --><!--#elif expr="$next = /^(?:#[^#]+){7}#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}7" --><!--#elif expr="$next = /^(?:#[^#]+){6}#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}6" --><!--#elif expr="$next = /^(?:#[^#]+){5}#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}5" --><!--#elif expr="$next = /^(?:#[^#]+){4}#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}4" --><!--#elif expr="$next = /^(?:#[^#]+){3}#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}3" --><!--#elif expr="$next = /^(?:#[^#]+){2}#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}2" --><!--#elif expr="$next = /^#[^#]+#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}1" --><!--#elif expr="$next = /^#([^#]+)$/" --><!--#set var="next" value=$1 --><!--#set var="nextCount" value="${nextCount}0" --><!--#else --><!--#set var="nextCount" value="0" --><!--#endif --><!--#if expr="$previous = /^(?:#[^#]+){99}(#[^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="10" --><!--#elif expr="$previous = /^(?:#[^#]+){89}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="9" --><!--#elif expr="$previous = /^(?:#[^#]+){79}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="8" --><!--#elif expr="$previous = /^(?:#[^#]+){69}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="7" --><!--#elif expr="$previous = /^(?:#[^#]+){59}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="6" --><!--#elif expr="$previous = /^(?:#[^#]+){49}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="5" --><!--#elif expr="$previous = /^(?:#[^#]+){39}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="4" --><!--#elif expr="$previous = /^(?:#[^#]+){29}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="3" --><!--#elif expr="$previous = /^(?:#[^#]+){19}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="2" --><!--#elif expr="$previous = /^(?:#[^#]+){9}((?:#[^#]+){1,10})$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="1" --><!--#elif expr="$previous = /^(?:#[^#]+){1,9}$/" --><!--#set var="previous" value="#0$previous" --><!--#set var="previousCount" value="" --><!--#else --><!--#set var="previous" value="" --><!--#set var="previousCount" value="" --><!--#endif --><!--#if expr="$previous = /^(?:#[^#]+){9}#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}9" --><!--#elif expr="$previous = /^(?:#[^#]+){8}#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}8" --><!--#elif expr="$previous = /^(?:#[^#]+){7}#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}7" --><!--#elif expr="$previous = /^(?:#[^#]+){6}#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}6" --><!--#elif expr="$previous = /^(?:#[^#]+){5}#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}5" --><!--#elif expr="$previous = /^(?:#[^#]+){4}#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}4" --><!--#elif expr="$previous = /^(?:#[^#]+){3}#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}3" --><!--#elif expr="$previous = /^(?:#[^#]+){2}#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}2" --><!--#elif expr="$previous = /^#[^#]+#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}1" --><!--#elif expr="$previous = /^#([^#]+)$/" --><!--#set var="previous" value=$1 --><!--#set var="previousCount" value="${previousCount}0" --><!--#else --><!--#set var="previousCount" value="0" --><!--#endif --> <div id="paging-navigation-bottom" class="content-nav entry-nav"> <p><!--#if expr="$previousCount > '0'" --><a href="<!--#echo var="SCRIPT_URI" -->?s=<!--#echo var="last" -->"><!--#echo var="visualLast" --></a> <a href="<!--#echo var="SCRIPT_URI" -->?s=<!--#echo var="previous" -->">&laquo; <!--#echo var="visualPrevious" --><!--#echo var="previousCount" --><!--#echo var="visualUnit" --></a> |<!--#endif --> <!--#if expr="$visualAll != '' && ($nextCount > '0' || $previousCount > '0')" --><a href="<!--#echo var="SCRIPT_URI" -->?e=all"><!--#echo var="visualAll" --></a><!--#endif --> <!--#if expr="$nextCount = $defaultUnit" -->| <a href="<!--#echo var="SCRIPT_URI" -->?s=<!--#echo var="next" -->"><!--#echo var="visualNext" --><!--#echo var="nextCount" --><!--#echo var="visualUnit" --> &raquo;</a> <a href="<!--#echo var="SCRIPT_URI" -->"><!--#echo var="visualTop" --></a><!--#elif expr="$nextCount > '0'" -->| <a href="<!--#echo var="SCRIPT_URI" -->?s=<!--#echo var="next" -->&amp;e=<!--#echo var="end" -->"><!--#echo var="visualNext" --><!--#echo var="nextCount" --><!--#echo var="visualUnit" --> &raquo;</a> <a href="<!--#echo var="SCRIPT_URI" -->"><!--#echo var="visualTop" --></a><!--#endif --></p> </div> <!--#if expr="$JavaScriptNavigation = '1'" --><script type="text/javascript"> <!-- var pagingUrl = '<!--#echo var="SCRIPT_URI" -->'; var pagingDefaultUnit = <!--#echo var="defaultUnit" -->; var pagingStart = '<!--#echo var="start" -->'; var pagingNext = '<!--#echo var="next" -->'; var pagingNextCount = <!--#echo var="nextCount" -->; var pagingPrevious = '<!--#echo var="previous" -->'; var pagingPreviousCount = <!--#echo var="previousCount" -->; // --> </script> <$MTInclude module="paging-navigation-script"$> <!--#endif --><script type="text/javascript"> <!-- document.getElementById('paging-navigation-top').innerHTML = document.getElementById('paging-navigation-bottom').innerHTML; // --> </script>
　かなり長いです。漏れの無いようご注意ください。

●テンプレート名: paging-navigation-script

<script type="text/javascript"> <!-- /* *** 定義されている変数 *** pagingUrl: 表示中のページの起点となるURL ページURLの引数）s=表示を開始するエントリーのID 指定しなければ最初から。 存在しないIDを指定すると何も表示しない。 e=表示を終了するエントリーのID 指定すると初期設定した1ページあたりの表示エントリー数を無視する。 存在しないIDを指定すると表示開始エントリーから最後まで表示する。 「?e=all」で全件表示となる。 pagingEntries: 非表示も含めた全エントリーのIDが入った配列変数 pagingDefaultUnit: 初期設定されている1ページあたりの表示エントリー数 pagingStart: 最初に表示されたエントリーのID（or 表示するつもりだった引数sの値） pagingNext: （最初の方向に移動する）次のページの先頭エントリーID pagingNextCount: 次のページに表示されるエントリー数 （通常はpagingDefaultUnitと同数になるが、最新エントリー直前で端数になることがある） pagingPrevious: （最後の方向に移動する）前のページの先頭エントリーID pagingPreviousCount: 前のページの表示されるエントリー数 （通常はpagingDefaultUnitと同数になるが、最古エントリー直前で端数になることがある） ************************** */ var pagingNavigation = ''; if (pagingEntries.length > pagingDefaultUnit) { if (pagingNextCount > 0 || pagingPreviousCount > 0) { var pagingNumber = 0; var pagingPointer = 0; for (var i = 0; i < pagingEntries.length; i += pagingDefaultUnit) { pagingNumber++; if (pagingEntries[i] == pagingStart) { pagingNavigation += '| <span class="paging-number-pointer">' + pagingNumber + '<\/span>\n'; pagingPointer = pagingNumber; } else if (i == 0) { pagingNavigation += '| <span class="paging-number-link"><a href="' + pagingUrl + '">' + pagingNumber + '<\/a><\/span>\n'; } else { pagingNavigation += '| <span class="paging-number-link"><a href="' + pagingUrl + '?s=' + pagingEntries[i] + '">' + pagingNumber + '<\/a><\/span>\n'; } } if (pagingNumber > 10) { if (pagingPointer <= 6) { pagingNavigation = pagingNavigation.replace(/^((?:\|[^\|]+){10}\|)[\s\S]+$/, '$1...'); } else if (pagingPointer >= pagingNumber - 4) { pagingNavigation = pagingNavigation.replace(/^[\s\S]+((?:\|[^\|]+){10})$/, '|...$1'); } else { pagingNavigation = pagingNavigation.replace(/^[\s\S]+((?:\|[^\|]+){5}\| <span class="paging-number-pointer">[^\|]+(?:\|[^\|]+){4}\|)[\s\S]+$/, '|...$1...'); } } pagingNavigation = '| <span class="paging-number-link"><a href="' + pagingUrl + '?e=all">ALL<\/a><\/span>\n' + pagingNavigation; if (pagingNextCount > 0) { pagingNavigation = '<span class="paging-number-link"><a href="' + pagingUrl + '?s=' + pagingNext + '">&lt;&nbsp;<\/a><\/span>\n' + pagingNavigation; pagingNavigation = '<span class="paging-number-link"><a href="' + pagingUrl + '">&laquo;&nbsp;<\/a><\/span>\n' + pagingNavigation; } else { pagingNavigation = '<span class="paging-navigation-nolink">&lt;&nbsp;<\/span>\n' + pagingNavigation; pagingNavigation = '<span class="paging-navigation-nolink">&laquo;&nbsp;<\/span>\n' + pagingNavigation; } if (pagingPreviousCount > 0) { pagingNavigation += '| <span class="paging-navigation-link"><a href="' + pagingUrl + '?s=' + pagingPrevious + '">&nbsp;&gt;<\/a><\/span>\n'; pagingNavigation += '<span class="paging-navigation-link"><a href="' + pagingUrl + '?s=' + pagingEntries[Math.floor((pagingEntries.length - 1) / pagingDefaultUnit) * pagingDefaultUnit] + '">&nbsp;&raquo;<\/a><\/span>\n'; } else { pagingNavigation += '| <span class="paging-navigation-nolink">&nbsp;&gt;<\/span>\n'; pagingNavigation += '<span class="paging-navigation-nolink">&nbsp;&raquo;<\/span>\n'; } } else { pagingNavigation = '| <span class="paging-number-link"><a href="' + pagingUrl + '">Paging<\/a><\/span>\n|'; } } document.getElementById('paging-navigation-bottom').innerHTML = '<p>' + pagingNavigation + '<\/p>'; // --> </script>
　オプション的な位置づけで、完全にJavaScriptのみです。
　JavaScriptに精通している方ならすぐにでもカスタマイズすることが可能です。

２．バックナンバーテンプレート（アーカイブ・テンプレート）の修正

　次にCategory Archivesテンプレートに、今作ったモジュールを挿入します。（DateBased Archivesテンプレートでもやり方は同じ）
　書き換えるのは以下の2箇所です。

　※TypePadの場合はこれらのタグが隠されているので、後述する別の手順で書き換える必要があります。

「<MTEntries>」
　　　↓
「<$MTInclude module="paging-initialize"$><MTEntries><$MTInclude module="paging-entry-top"$>」

「</MTEntries>」
　　　↓
「<$MTInclude module="paging-entry-bottom"$></MTEntries><$MTInclude module="paging-navigation"$>」

　タグの間に改行などを入れないで、ぴったり隣接させてください。
　書き換える場所を間違えると取り返しのつかないことになりかねませんので、あらかじめバックアップを取っておきましょう。
　ブラウザの検索機能などを利用して探すのもいいかもしれません。

　テンプレートを独自に書き換えている場合、テンプレート内に2箇所以上MTEntriesタグがある場合があります。
　自分で書き換えているなら理解していると思いますが、書き換えるのはメインのコンテンツ部分です。

　2箇所を書き換えて保存したら、このテンプレートの再構築をおこなってください。
　再構築が終わったら晴れて導入完了です。
　カテゴリーページを開いてみてください。分割されているはずです。

番外．TypePadの場合
　TypePadでは上級テンプレートであっても様々なパーツが特殊モジュール化されてユーザーから隠されています。
　今回書き換えなくてはいけないMTEntriesタグもCategory Archives内に見あたりません。
　そのためにココログとは違う手順が必要となります。

　http://support.typepad.jp/cgi-bin/typepad_jp.cfg/php/enduser/std_adp.php?p_faqid=377#entry-list
　http://help.sixapart.com/tp/jp-tp1/post_101.html#entry-list（2009/11/29修正：TypePad側でサイト構成が変わっていました）
　まず１．のPagingモジュールと同じ要領で、公式サイトの↑このページからentry-listモジュールをコピー＆ペーストして、上級テンプレート内に作成します。

　このentry-listモジュールの最初と最後に「<MTEntries>」、「</MTEntries>」がありますから、今作成したモジュール内でこの2つのタグを２．で指示しているように書き換えて保存します。

　次にCategory Archivesテンプレートの中央付近にある
「<$MTWeblogIncludeModule module="entry-list"$>」を、
「<$MTInclude module="entry-list"$>」に書き換えて保存、再構築します。

　以上で作業は終わりです。
　カテゴリーページを開いてみてください。分割されているはずです。

---

■使い方の概要

１．ナビゲーションリンク
　問題なく導入できていれば、JavaScriptがオンのブラウザだと、コンテンツの上端と下端に、

«  <  | ALL | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |  >  »

　こういうナビゲーションリンクが表示されていると思います。

　ですが、これはpaging-navigation-scriptモジュールにあるJavaScriptで書き換えたもので、このモジュール本来のナビゲーションリンクは、

< 最後 « これより前10件 | 全件 | これより後10件 » 最新 >

　という、個別エントリーページやバックナンバーページにあるナビゲーションリンクにならったTypePad準拠といえるものになっています。
　paging-initializeの1行目「<!--#set var="JavaScriptNavigation" value="1" -->」の「1」を「0」に書き換えて再構築するとこちらが表示されるようになります。
　またJavaScriptの設定がオフのブラウザで見た場合は、これが下端にのみ表示されます。

　これはどういうことかと言いますと、Pagingモジュール本来の機能としては簡素なものしかありませんが、（各モジュールの仕組みがわからなくても）JavaScriptさえ使いこなせるならpaging-navigation-scriptモジュールを書き換えることで自由にカスタマイズ可能だということです。

　paging-navigation-scriptモジュール内に定義済み変数の説明が書いてありますから、あのスクリプトを解読できるくらいの知識があればすぐに使いこなせると思います。

２．URLの指定方法
　本来のカテゴリーページのURLを、
　http://www.example.com/blog/cat1234567/index.html
とすると、
　分割ページのURLは、
　http://www.example.com/blog/cat1234567/index.html?s=12345678
となります。

　「?s=12345678」の数字は、そのページの最初に表示するエントリーのエントリーIDです。
　エントリーIDとは、各エントリーに割り振られた個別の数字で、ブラウザでページのHTMLソースを見ると各エントリータイトル部分に「<div class="entry" id="entry-12345678">」とある数字がそれです。
　こうやって指定したエントリーから表示を始め、初期設定されている1ページあたりの表示エントリー数だけ表示するようになっています。

　また、URL末尾の指定を「?s=11111111&e=22222222」とすると、IDが11111111のエントリーから表示を始め、IDが22222222のエントリーまで表示する、という指示になります。
　この場合は初期設定された1ページあたりの表示エントリー数を無視します。

　「?e=12345678」とすると、最初からIDが12345678のエントリーまでの表示という指示になり、
　「?e=all」と指示すると、すべてのエントリーを表示します。

　Pagingモジュール本来の機能としてはこれだけしかありません。
　お気づきかと思いますが、モジュール側には「何ページ目」という概念はありません。あくまで最初と最後のIDを指定できるだけです。
　複雑な操作が必要な場合はpaging-navigation-scriptモジュールのJavaScriptでやることになります。

---

■使いこなし

１．初期設定
　paging-initializeモジュールでいくつかの初期設定値を変更できます。
　これまでに触れたことと、あとは見ての通りなんですが、冒頭のブロックを書き換えることで変更します。

<!--#set var="JavaScriptNavigation" value="1" -->
　ここの数字を「0」（オフ）にすると、paging-navigation-scriptモジュールのJavaScriptを使用せず、モジュール本来のTypePad準拠のナビゲーションリンクを表示するようになります。
　また、JavaScript用の全エントリーIDリストをダウンロードしなくなるので、サーバーからPCへの転送量をさらに縮小することができます。

<!--#set var="defaultUnit" value="10" -->
　導入の項で説明したように、1ページあたりの表示エントリー数を指定します。
　先に説明したようにここだけを変更してもダメです。他に3箇所の変更が必要となります。
　導入の項を確認してください。

<!--#set var="visualTop" value="最新 >" -->
<!--#set var="visualNext" value="これより後" -->
<!--#set var="visualPrevious" value="これより前" -->
<!--#set var="visualLast" value="< 最後" -->
<!--#set var="visualUnit" value="件" -->
<!--#set var="visualAll" value="全件" -->
　これらを変えるとTypePad準拠のナビゲーションリンクの表示を変えることができます。
　設定項目にHTMLは使えません。（自動で「<」→「<」などの変換がおこなわれます）

２．JavaScriptでフルカスタマイズ
　再三述べているように、Pagingモジュールはpaging-navigation-scriptモジュールのJavaScriptでインターフェイスを自由に変えることができます。
　Pagingモジュールの機能としてはオプション的な位置づけですが、使いこなしという意味ではこれがメインといっても過言ではありません。

　デフォルトのスクリプトが最後にやっているように、

document.getElementById('paging-navigation-bottom').innerHTML = 'リンク内容';

として、paging-navigation-bottom（TypePad準拠のナビゲーションリンクが入っているdivブロック）に挿入すると、自動で上部のナビゲーション位置にコピーします。
　逆にこれをやらないと、TypePad準拠のナビゲーションリンクが残ることになります。

　paging-navigation-scriptモジュールは中身を最下部に挿入しているだけなので、実はpaging-navigation-scriptモジュール内が空（カラ）でも問題ありません。（TypePad準拠のナビゲーションリンクが表示されるだけ）
　JavaScriptをここに書かず、外部ファイルから読み込んでもかまいません。

　なお、Pagingモジュールがこのpaging-navigation-scriptモジュール以外でJavaScriptでやっているのは、変数の定義と先のTypePad準拠のナビゲーションリンクの上部へのコピーだけです。
　初期設定のJavaScriptNavigationをオフにすると変数の定義すらやらなくなり、TypePad準拠のナビゲーションリンクのコピーだけとなります。（paging-navigation-scriptモジュールも読み込まなくなりますが、このモジュール自体は存在しないと、ページの再構築時にエラーとなります）

---

■仕様および既知の問題

・意外に読み込みの時間がかかる。
　サーバー側でページ分割しているので、サーバーのレスポンスが悪くなります。
　非表示分も含めた本来のエントリー数が100件程度までならほとんど気にならないでしょうが、300を超えると体感でわかるほど遅くなります。（それでも全件ダウンロードする転送時間に比べれば微々たるもんなんですが）
　ココログやTypePadで使ってみた感じでは、100件につき1、2秒といったところでしょうか。サーバからの転送が始まるまでに500件で5、6秒はかかるということです。（転送が始まってからは表示数やネットワーク環境に依存します）
　エントリーが1000件を超えるようだとどうなるのかは、試したことがないのでわかりません（汗;
　度を超すと負荷でサーバーが落ちるんじゃないかとちょっと心配なんですが（エッ！？
　…でも、逆に言うと現状のTypePadの仕様はそれほどの負担を閲覧者に強いてるんだけどなー。

・TypePad準拠のナビゲーションリンクで「最後」のページに移動すると最後のひとつのエントリーしか表示されない。
　仕様です。「最後のページ」ではなく、「最後のエントリー」です。
　「最新」に移動すると期待通りの最初のページが表示されるので変に思うかもしれませんが、Pagingモジュール自身にはページの概念がありません。
　ちなみにpaging-navigation-scriptモジュールのJavaScriptによるナビゲーションリンクでは「最後のページ」に飛ぶように作ってあります。

・ページによって、最初に表示されたエントリーの上部に日付が表示されないことがある。
　TypePad（ココログ）側の仕様です。
　Pagingモジュールは本来のカテゴリーページをぶった切って表示しているだけです。
　デフォルトのTypePad（ココログ）のエントリーリスト（カテゴリーページやトップページなど）は、同じ日に複数のエントリーがあると最初のエントリーにのみ日付が付くようになっています。
　たまたまこの同日エントリーの間がページの切れ目となると、最初のエントリーに日付がつかないことがあります。
　これを回避したい場合には、Category Archivesテンプレート内（TypePadならentry-listモジュール内）の、「<MTDateHeader><h2><$MTEntryDate format_weblog_date="1"$></h2></MTDateHeader>」などとなっている箇所の「<MTDateHeader>」と「</MTDateHeader>」を削除すれば表示されるようになります。
　ただしこの修正をすると、同一ページ内に同日エントリーが複数あってもすべてに日付が表示されます。

---

■最後に

・ここのブログがやってるような、トップページの分割はどうやるの？
　えーと、理論上PagingモジュールはMTEntriesタグを使っているページならどのページでも通用するはずです。これにはトップページも含まれます。
　ただ、トップページはカテゴリーページよりさらに複雑なため、MTタグに精通していないと思いもよらない結果になります。というか、なりました（冷汗;
　実は現在Pagingモジュールは5つのモジュールで構成されていますが、これを3つにまとめる方法を見つけました。
　が、しかし、カテゴリーページでは問題なかったものが、トップページではまるで予期しない結果（表示がガタ崩れ）となったので現在の形に戻した経緯があります。（原因はわからないまま）
　そんなわけで、カテゴリーページと同じようにMTEntriesタグをPagingモジュールで挟んでやればトップページも分割できるはず、というか、できていますが、当方としても「できるかもよ」としか言えないので、やってはみたものの、あまりお薦めはしません。

　今回はここまで。
　次回はこのPagingモジュールの仕組みについて説明します。

Pagingモジュールがページを分割する仕組み »

Comments

[投稿情報: さくらヒロシ]

素晴らしいテンプレート・モジュールですね！

早速、導入させていただきました。カテゴリーページの表示に時間が掛かっていたのが、一気に解消されそうです！

本当にありがとうございました。

[投稿情報: かみぃ]

＞ さくらヒロシさん
コメントありがとう。
お返事遅くなってすみません。
喜んでいただけてなによりです。

[投稿情報: ヨシザキ]

TypePadのOCN仕様である”ブログ人”でもうまくいくかどうか試してみましたが、TypePadの場合の手順通りやったらできました。
カテゴリーページに数百件のエントリーが並ぶ状況から解放されて幸せです。

ほんとうにありがとうございました。

[投稿情報: かみぃ@管理人]

＞ヨシザキさん
OCNブログ人での動作報告ありがとうございます。
いくつかのTypePad系ブログサービスを調べたら、ココログタイプよりTypePadタイプの方が標準だったようです。

ヨシザキさんのブログを拝見させて驚いたのは、ココログやTypePadだと、記事が多い場合には分割でサーバーの負荷がかかっているのが体感できる（読み込みに時間がかかる）のに、ブログ人だとそれがほぼ感じられなかったこと。
手前味噌ですが、これなら実用的ですね。

[投稿情報: りんご]

ステキなモジュールを作ってくださりありがとうございます！
typepad(上級テンプレート)で導入したく試みたのですが、
「■最後に」の部分にあるようにトップページでの設置が正常に動作しません。。涙

生成されるソースを見てみると、エントリー毎に「pagingEntries[pagingEntries.length] = '記事ID';」というのはでているのですが、こちらのサイトのソースを参照したところ、
全エントリーの「pagingEntries[pagingEntries.length] = '記事ID';」が最後の内に生成されているようなのですが、
うまく生成されず、空白のままなのです。。

そのため、
＜div id="paging-navigation-bottom" class="content-nav entry-nav"＞＜p＞＜/p＞＜/div＞
となっていて、ナビゲーションが表示されないままということに
なっています。
typepadなので、トップページはentry-list-stickyがデフォルトですが、当方ではenrty-listを当てています。
カテゴリーページを使わないので、どうしてもトップページで
ページ分割をしたく四苦八苦しております。。

お時間があるときで結構ですので、ご教示頂けますと幸いです。
何卒よろしくお願いいたします。

[投稿情報: かみぃ@管理人]

＞りんごさん
コメントありがとうございます。
早速ご質問の件ですが、
トップページに当てられている「enrty-list」の冒頭を、
＜$MTInclude module="paging-initialize"$＞＜MTEntries＞＜$MTInclude module="paging-entry-top"$＞
に書き換えいると思うのですが、この＜MTEntries＞の部分を、
＜MTEntries all="1"＞
に書き換えると、全記事が分割表示されるはずです。
ただ、記事数が数百、数千といった尋常でない数だと、サーバー側にあまりの負担が掛かって表示が遅くなってしまうので、
＜MTEntries lastn="分割表示する記事数"＞
にした方が無難です。
当ブログでは「lastn="100"」にして、分割元100件、一ページあたり10件の10ページに分割表示しています。

[投稿情報: りんご]

かみぃさん、迅速な回答をありがとうございます！！
表示される記事数を強制的に調節しなければいけなかったんですね。
納得です。勉強になりました！
まだ記事数は多くないのですが、サーバ負担を考えた対策まで
ご教示いただき感謝いたします。
改めまして、ステキなモジュールをありがとうございました。
ありがたく使わせていただきます。

[投稿情報: masa]

はじめまして。

ご存知のことと思いますが、最近ココログの仕様が一方的に変更され、カテゴリー毎の記事は１０件の表示のみとなってしまいました。レスポンス改善のためだとわかってはいますが、過去の記事が最低でも３０件程度は表示されないと困るなと思っています。

そこで、貴殿のモジュールを発見し、これを転用して、過去記事の表示数変更に使えないかと思って試させていただきました。しかしながら、再構築の途中でエラーメッセージが出てしまい、うまくいかない状況です。

今回のニフティの仕様変更でこのモジュールがうまく作動しなくなってしまった、ということもあるものでしょうか？
恐縮ですが、ご意見お聞かせいただければ幸いです。

[投稿情報: かみぃ@管理人]

◆masaさん
こんにちは。
ココログの仕様変更は一応目にしていました。
ただ、当方すでにTypePadに移行してしまったので、あまり気にとめていませんでした。すみません。

で、あらためてココログの仕様変更を確認すると、
http://info.cocolog-nifty.com/info/2009/11/post-c0e8.html
＞1.カテゴリ毎バックナンバーの表示変更
＞（中略）
＞※上級者向けテンプレートをご利用の場合には表示は変更されません。

となっているので、本来はまだこのPagingモジュールが使えると思われます。

ただ考えられるのは、masaさんがココログの仕様変更を機にこのモジュールを使おうとされたとのことなので、
misaさんが導入しようとしているテンプレートは、仕様変更後のテンプレートから上級テンプレートに変換されたんじゃないでしょうか？
もしそうであれば、この記事で指示している箇所以外にも修正が必要になると考えられます。
ご要望であればもう少し詳しく調べてみます。
（ちょっと時間は掛かるかも）

現時点の情報から想像している再構築時のエラーの原因が当たっているとすれば、このPagingモジュールとは関係なく、テンプレートの書き換えだけで、旧来の表示に戻すことも可能なはずです。

[投稿情報: masa]

かみぃさま

超迅速なご回答、ありがとうございます。
痛み入ります。

ご指摘の通り、ココログ側の仕様変更後に上級テンプレートへ移行しました（というより、こんな仕様変更さえなければ上級に移行する必要も無かったわけで、料金も上がって二重に腹が立つというわけでございます。あ、かみぃさまに愚痴を言うのは筋違いですね。失礼しました！）

最初にかみぃさまのモジュールを適用した際には、エラーメッセージは出ませんでした。ただし、カテゴリーをクリックすると、画面が真っ白になって何も表示されませんでした。そこでもう一度モジュールをインストールしなおしたところ、今度は
「問題が発生しました。
　※画像をアップロード時にこのページが出る方は、画像の容　量をご確認ください。ココログでは１アップロードあたり
　1MBを超える容量のファイルをアップロードすることはでき
　ません」
というメッセージが出てしまいました。

私としましては、かみぃさまのモジュールを適用して使用するか、または仕様変更以前のモジュールに戻すか、とにかく簡単にできる方法を模索しております。

時間がかかっても勿論結構でございます。
何かアドバイスをいただけましたら幸いでございます。
お手数お掛けして恐縮ですが、どうぞよろしくお願いします。