かみぃの丘

新TypePadの上級者テンプレート、旧バージョンからの変更点

　新TypePadに移行して、運営ブログの表示がガタガタに崩れてから丸五日。なんとか『未完の映画評』の修復は終わった。（と思う。そう願いたい。）
　思いのほか内部の仕様が変わっていて、前とまったく同じとはいかなかったのだが、いろいろ妥協しつつ折り合いを付けて、とにもかくにも緊急突貫工事を終わらせた。

　それにしても、シックスアパートが移行の遅れの言い訳に「できるだけ移行後にユーザーにやっていただくことを減らすため」と言っていたのはなんだったのか、ってぐらい手間が掛かったぞ、プンプン。
　それというのも、管理画面の変更とかはあれこれ「こんなに便利になりました」とアピールするのに（実際は便利になってないと思う、かえって使いにくくなった）、内部仕様の変更をまるで明文化してくれていないため、修正がいちいち手探りだったから。

　ということで、現時点で気付いたことを箇条書きにしてみる。
　なお、一部はバグのような気もするので、その内こっそり修正されるかも。
　また、詳細に検証したわけでもないので、本当の原因は別のところにあるのを勘違いしている可能性もあります。
　そんなわけで、ここに書いたことを信じるかどうかは閲覧者の自己判断でお願いします。

appendChild()ってmoveChild()だったんだ

　最近JavaScript熱が再燃しているかみぃ。
　一年ぐらい前に初めてinnerHTMLを知って、document.writeしたものを後から操作できるということに感動してまだ間もないというのに、世間的にはこれからはDOM操作が主流で、もはやinnerHTMLで要素をいじくり回すのは、よろしくないという風潮らしい。
　プログラム言語も時代と共に成長する生き物だから、そういった時流に逆らうことなく、かみぃも少しずつDOM操作主体に切り替え中。

　で、そのお勉強の最中、エレメントにオブジェクトを追加する「appendChild()」、ノードを削除する「removeChild()」、ノードを置換する「replaceChild()」といったメソッドはあるのに、なんでエレメントのノードを別のエレメントに移動させる「moveChild()」的なメソッドてのが無いんだろうと、ずっと不思議に思っていたわけ。

　仕方ないから、これまで、

var obj = org.cloneNode(true); //元のノードを複製
element.appendChild(obj); //複製した要素を移動先に追加
org.parentNode.removeChild(org); //元のノードを削除

っていう、手間の掛かることをやっていた。

　が、ある時気付いちゃいました。
　表題のappendChild()であります。
　「指定したエレメントにオブジェクトを追加する」と説明されるこのメソッド、実はこれこそがノードを移動するmoveChild()（と呼ぶべきもの）だったのです。（断言していいのか？）

　先の例だと、

element.appendChild(org);

だけで移動できちゃう。

　これに気付いたときには、あまりに目から鱗で、「これでいいのか！」って思わず声に出して叫んじゃった。

　漠然と、createElement()やcloneNode()で新しく作った要素って、まだ実際には誕生前の要素で、appendChild()（insertBefore()やreplaceChild()でもいいけど）して初めて形あるものとして誕生するんだと思っていたけど、createElement()やcloneNode()した時点で確かに誕生してて、appendChild()するとは、それを目に見える場所に出してやる＝移動してやるってことだったのね。
　ふむふむ、また少しDOMって概念がわかってきたような気がするぞ。

　ということで、以下はサンプルスクリプト。

TypePad系ブログのカテゴリーリストを任意の並び順に並び替えるJavaScript

　カテゴリーネタついでに、カテゴリー一覧を並び替えるスクリプトを作ってみた。
　ココログやブログ人などTypePad系ブログではカテゴリーを自由に作れるんだけど、その並び方は強制的に文字コード順に並ぶ。
　これを回避して自分の好きなように並ばせるにはリンク集的に別のリンクリストを作ったり、カテゴリー名の前に数字や記号を付けたり、半角スペースの数で並び順を調整したりといろいろ方法はあるんだけど、すでにあるカテゴリーの名前を変えるのもなんなんで、JavaScriptにやらせてみました。

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

■TypePadのアーカイブページ生成の仕組み
　前回公開したPaginモジュールの仕組みを理解するには、まずTypePad自体がどういう手順でアーカイブページ（カテゴリーページ）を生成しているかを理解する必要があります。

　TypePadを独自テンプレートで利用されている方ならご存じのように、デザインを決定するテンプレートには通常のHTML以外にMTタグと呼ばれるMovable Type互換のテンプレート用タグが含まれています。
　記事を作成したときやブログの再構築をしたときに、このMTタグが通常のHTMLタグに展開されて、サーバー上に静的なHTMLファイルを生成するのです。

　そしてカテゴリーページなどのアーカイブページではテンプレート内のMTタグの内、<MTEntries>と</MTEntries>に挟まれた部分を該当するエントリーの数だけくり返すようにして展開されます。
　ものすごくシンプルにイメージすると、

［エントリー群より前の部分の表示を指定したテンプレート］
<MTEntries>
［個々のエントリーの表示を指定したテンプレート］
</MTEntries>
［エントリー群より後の部分の表示を指定したテンプレート］

　が、↓こんな感じ

［エントリー群より前］
［エントリー１］
［エントリー２］
［エントリー３］
［エントリー４］
［エントリー５］
［エントリー群より後］

に展開され、サーバー上にHTMLファイルとして生成されます。

　記事が作成されたり再構築されてサーバー上にファイルが生成された時点でエントリー群は展開されているのですから、後からページング（ページ分割）は不可能と思えますし、現に今まで実現していなかったのです。
　しかしここで自分が着目したのは、PC側に送られてくるのはサーバー上のHTMLファイルそのものではなく、もう一段階展開されたものであることです。
　そこで登場するのがSSIと呼ばれる技術です。

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とココログで動作確認済みです。

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