JavaScriptでMovable Typeを軽量化にトライ

そもそも、「blog移転顛末記」で記したように、サーバーの移転（というか分割？）を決意したのはMovable Typeの再構築の動作が非常に重いからでした。しかし、夫情報やWebの情報を総合するに「PHP化」という軽量化がある模様です。ちなみに、私は誤解して、PHP化はMovable Typeの3.0以降ではないとダメかと思っていたのですが、そんなことはありません。JavaScriptでの軽量化も同様だと思われます。
でも、移転してせっかくリンクから何から書き換えたこのブログを、また今からPHP化したら拡張子が変更されちゃうからURLが変更になってリンクも変更しなくてはいけなくて面倒でイヤです。そもそも、「.html」であることがカッコいいんじゃない！とよくわからない美学をもつ私はPHP化に憧れながらも躊躇していました。そしたら、Fenrir’s Blogに「テンプレート共通化とJavaScriptによる軽量化」というエントリを発見しました。
なんと、拡張子はhtmlのままで、JavaScriptを使って軽量化、テンプレート化が実現できるようなのです。私はあまりクライアントに負荷をかける作業が好きではなく、サーバーサイドのものがラブです。だから、JavaScriptはウザイ、PHPは素晴らしい、という認識だったのですが、JavaScriptでそんなことができるなら認識を改めなくちゃ！
さっそく、テンプレート化にトライすることにしました。まずは実験で、Movable Typeとは連動しないけど全部のページに貼付けてある「なんとなく紹介」をJavaScriptでテンプレート化することにしました。
1.「テンプレート」→「テンプレートを新規作成」で、インデックステンプレートを新規作成します。
2.テンプレート名、出力ファイル名を適当に入力し、再構築オプションをはずします。私はテンプレート名「JSなんとなく紹介」、出力ファイル名は「osusume.js」としました。再構築オプションをはずしたのは、自分でお勧めする本を変更するときにだけ手動で更新すればいいからです。
3.テンプレートの内容を入力します。基本的に赤字のところを自分好みにカスタマイズすればOKのはずです。行が足りないときは、html += “”を追加してください。私の場合は、テンプレートをスッキリ見せるために「テンプレート共通化とJavaScriptによる軽量化」とは違って、document.writeもJavaScriptの外部ファイルにいれてしまうことにしました。

function getOsusume(){
var html = “<h2>★なんとなく紹介</h2>“;
html += “<A HREF=’http://www.amazon.co.jp/exec/obidos/ASIN/4785704004/mmspg-22′>“;
html += “<img alt=’keypoint.jpg’ src=’http://www.uemura.info/michiko/mtdb/keypoint.jpg’ width=’99′ height=’139′ border=’0′ /></A>“;
html += “<UL><LI>英文契約をするなら必読!</LI>“;
html += “<LI>私も人から勧められました</LI>“;
html += “<LI>基礎から辞書的要素までてんこもり</LI>“;
html += “</UL>“;
html += “<A HREF=’http://www.amazon.co.jp/exec/obidos/ASIN/4101294313/mmspg-22′>“;
html += “<IMG SRC=’http://images-jp.amazon.com/images/P/4101294313.09.MZZZZZZZ.jpg’ BORDER=’0′></A>“;
html += “<UL><LI>男性の心理を知るのに。</LI>“;
html += “<LI>女性の心理を知るのに。</LI>“;
html += “<LI>結婚後に読んだけど参考になりました</LI></UL>“;
return html;
}
document.write(getOsusume());

4.メインページのテンプレート、アーカイブテンプレートの「なんとなく紹介」を表示したい場所にJavaScriptを外部ファイルから読み込むタグを書きます。赤字を自分で作った名前やファイル名にしてください。テンプレートをみたときに分かりやすくするために「★なんとなく紹介」とコメントも追加しました。

<!–★なんとなく紹介–>
<script language=”javascript” type=”text/javascript” src=”<$MTBlogURL$>osusume.js“></script>

最後にこのテンプレートとインデックスやアーカイブなどの該当するすべてのファイルを再構築すればできあがりです。
と、書くと一見素直に苦労することなく出来たように見えますが、そんなことはありません。とてつもなく試行錯誤を繰り返しました。
そもそも「JavaScriptってなんとなくウザそうだよねー。外部ファイル取り込み？聞いたことないよ」という程度の知識しかない私が、ちょっとした解説だけでいろいろ作って改造してみるのには無理がありました。見よう見まねでやってみたのですが、まったくうまく動きません。
原因を探ろうにも何をいじって探ればいいやらちんぷんかんぷん。そんなわけで、JavaScript External File – JS FileのHP改造前の基礎知識で、JavaScriptの外部ファイルのことを学びました。なんとなく分かりました。ここで得た知識で、document.writeをjsファイルの中に書いちゃうことにも決めました。
どうやら自分の書き方に間違いはないような気がします。何がダメなんだー！！と見本と見比べて気づきました。見本では html += “”の中ではダブルクォテーションを使ってないことに。どうやらこの中でダブルクォテーションを使えないことはJavaScriptの常識だったようです…。見本と同じで、シングルクォテーションを使えるようにエディタでダブルクォテーションをシングルクォテーションに変換しました。これでやっとうまくいきました。
次は、Movable Typeタグを使ったものにトライです。「月別アーカイブをリスト選択式にしてみる」で作った月別アーカイブを例にすることにします。
1.「テンプレート」→「テンプレートを新規作成」で、インデックステンプレートを新規作成します。
2.テンプレート名、出力ファイル名を適当に入力し、再構築オプションをつけます。私はテンプレート名「JS月別」、出力ファイル名は「monthly.js」としました。再構築オプションをつけたのは、インデックスファイルを再構築する（＝新規エントリをする）たびに月別エントリの数が増えるかもしれなくて、そのときは自動でこのファイルも再構築して欲しいからです。
3.テンプレートの内容を入力します。赤字のような繰り返しのためのMovable Typeのタグをhtml +=”"の外に書くことが、Movable Typeタグを使う場合のポイントになります。見比べていただけると分かりますが、後は基本的に「月別アーカイブをリスト選択式にしてみる」をhtml += “”　の中に格納しているだけになります。ただ、青字のようなHTMLに書いていたJumpMonthもjsファイルに格納してみました。

<!–★カテゴリ別–>
<script language=”javascript” type=”text/javascript” src=”<$MTBlogURL$>cat.js”></script>
function getMonthly(){
var html = “<h2>★アーカイブ</h2>”;
html += “<ul>”;
html += “<FORM name=’MonthlyList’>”;
html += “<SELECT size=’1′ name=’lstMonth’>”;
<MTArchiveList archive_type=’Monthly’>
html += “<OPTION value=’<$MTArchiveLink$>’><$MTArchiveTitle$></OPTION>”;
</MTArchiveList>
html += “</SELECT>”;
html += “<INPUT type=’button’ name=’btnAdd’ value=’ジャンプ’ onClick=’JumpMonth()’></FORM>”;
html += “</ul>”;
return html;
}
//script by ＠うさ
function JumpMonth()
{
location.href=document.MonthlyList.lstMonth.value;
}
document.write(getMonthly());

4.メインページのテンプレート、アーカイブテンプレートの月別アーカイブを表示したい場所にJavaScriptを外部ファイルから読み込むタグを書きます。

<!–★月別->
<script language=”javascript” type=”text/javascript” src=”<$MTBlogURL$>montly.js“></script>

これで、同じくこのテンプレートと、インデックスやアーカイブなどのファイルをすべて再構築をして出来上がりです！
同じ要領でカテゴリ別や検索窓などもJavaScriptでテンプレート化してみました。
さて、どれくらい再構築が速くなったかなー、と思って「すべてを再構築」をやってみると感動しました。
ものすごく速いよー！！！
勝手な私の体感時計では、今まで10分くらいかかっていたのが2,3分で済む速さです。感動してばっかりですが、ものすごく感動しました。テンプレート化万歳！JavaScript万歳！
というわけで、ぜひ、このブログをみる際にはJavaScriptをONにしてください。お願いします。