July 29, 2004
テンプレート共通化とJavaScriptによる軽量化
様々なサイトをみていますと、テンプレートの共通化とPHPによるインクルードを使用してMovableTypeの軽量化を実現されている方が多いようですね。このサイトでも色々と工夫をしてMovableTypeの軽量化を図っていますが、PHPは利用していません。
当サイトでは、JavaScriptとテンプレートの共通化を行って軽量化を図っています。JavaScriptを選んだ理由は、クライアントサイドのCPUパワーを使用するので、PHPのようにサーバ側のCPUパワーをスポイルされることなく、真の軽量化ができるからです。また、PHPがインストールされていない環境でも実現可能であるなど、クライアントのブラウザにおいてJavaScriptが有効になっていない場合にページが正しく表示されなくなる可能性があるにしても、この方法には利点があるかと思います。
各ページのソースを見ていただければわかるように、このサイトでは非常に多くの部分がJavaScriptによって構築されています。例えば、ページの右側のサイドバーはほとんどすべてがJavaScriptで吐き出されています。上のバナーもJavaScriptで吐き出しています。
ということで、方法を公開します。
※このエントリー、CROSS BREEDのAyuさんに紹介していただきました。PHP化にも興味がある方はこちらの記事をどうぞ。
方針としては、以下のようにしてあります。
①共通の部分は新たにテンプレートを作り、JavaScriptの外部ファイル(いわゆる拡張子がjsのファイル)として吐き出すようにする。このファイルの中にはJavaScriptの関数が記載されている。
②記事のテンプレート(Main IndexやIndividual Archiveなど)では、①で作成された外部JavaScriptファイルを読み込み、その中に書いてあるJavaScript関数を実行するだけにする。
共通の部分が別のテンプレートに書いてあれば、共通部分が何度も再構築されることがなく、構築の効率化が図れるということになります。またJavaScriptはクライアントサイドで読み込み・実行されるので、PHPのようにサーバ側のCPUパワーを必要としません。
では具体的方法の説明に入りたいと思います。例として、サイドバーに表示されている『最近のそれ(最近のコメント一覧)』の作り方を解説してみます。
まず、方針①の作業をします。
MovableTypeの編集画面で、『Templateの編集』において『新しいインデックス・テンプレートをつくる』を選んでください。すると新しいインデックスプレートの作成画面になりますので、テンプレートの名前、出力ファイル名を適当に指定してください。ここではそれぞれ、『Common Side Bar』と『sidebar.js』としましょう。『インデックス・テンプレートを再構築するときにこのテンプレートを自動的に再構築する』は、構築によって変化する要素があるときはチェックをいれてください。例えば今回の最近のコメント一覧のような場合は、チェックをいれてください。
次にテンプレートの中身ですが、以下のように入力してください。
var html = "<div class='sidetitle'>最近のそれ</div>";
html += "<div class='side'>";
<MTComments lastn="10" sort_order="descend">
<MTCommentEntry>
html += "<a href='<$MTEntryPermalink$>#<$MTCommentID$>'>";
// コメントの本文を20文字だけ表示
html += "<$MTCommentBody convert_breaks='0' encode_js='1'$>".substr(0, 20);
html += "</a>";
html += "by <$MTCommentAuthor$> @ <$MTEntryTitle$>";
</MTCommentEntry>
</MTComments>
html += "</div>";
return html;
}
あとは保存をクリックしてください。
次に、方針②の作業をします。
例えば、メインページに最近のコメント一覧を追加してみましょう。メインページはテンプレート『Main Index』と連動していますので、テンプレート編集画面で『Main Index』テンプレートのお好みの部分に次のコードを追加してください。なお、①で作成したテンプレートの構築結果はsidebar.jsというファイルに書き出されていることに注意してたくざい。
<script language="javascript" type="text/javascript">
<!--
document.write(getRecentComment());
//-->
</script>
これで完了です。保存・再構築すればメインページに最近のコメント一覧が表示されるはずです。この操作を他の記事テンプレート(Individual ArchiveやDate-Based Archiveなど)で繰り返せば、そちらにもそれが反映されます。
最近のコメント一覧以外にも共通化できる部分はたくさんあると思いますので、アイデア次第でMovable Typeがどんどん軽くなると思います。また軽くなる他に、レイアウトを変更する場合に、①側のテンプレートの中身を書き換えればすべてに反映されますし、表示位置の調整は②で挿入位置を変えるだけで反映されるようになるなど、メンテナンス性も向上します。
ということで、MovableTypeが重いなと思われたら是非試してみてください。
sidebar.jsを使わせていただいております。
ところで、
<MTComments lastn="10" sort_order="descend">
でlastnが"21"まではOKですが"22"とすると動作しません。
この数字は何処で制限されるのでしょうか？
また、広げることは可能っでしょうか。
fenrirです。
よろしければどのようなエラーが発生したか教えていただけないでしょうか。対策を考えてみます。> Nakaさん
fenrirさん
早速のレスポンスありがとうございます。
エラーというより、lastnが21までは正しく表示されるのですが、lastnを22とした途端に何も表示されなくなってしまったのです。22以上でも同じです。
<MTEntries recently_commented_on="7">と</MTentries>で挟むのは間違いかどうか知らないのですがこの場合は7が最大で8にすると表示がなくなりました。
Posted by: Naka : February 15, 2005 01:50 AMfenrirさん
よく調べたら、lastnに大きな数を入れても、sidebar.jsは出来上がっていて、html += " ";がきれいに並んでいます。
そうすると、変数に文字列を追加する回数が、ある一定を超えるとダメなのか、一つの変数に入れられる文字列長に制限があるのかと思いたくなります。
ともかく、IEでsidebar.jsを見ようとすると行3、文字1、エラー文字列が正しくありません。コード800A03F6 コンパイルエラーとなります。
Nakaさん、原因はおそらくJavaScriptの中に、予期されない文字(例えば文字列か終了していないにも関わらず"(ダブルクォーテーション)があったりなど)が考えられます。
encode_js="1"を付け加えてみてはいかがでしょうか。
fenrirさん
ずばりです。
エントリーのタイトルにダブルクォーテーションが含まれているのが一つ見つかりました。
別の記号に置き換えてsidebar.jsを再構築したらバッチリです。
ありがとうございました。
はじめまして。
この内容を参考にさせていただきました。
HTMLを初めて３ヶ月の初心者で、これで初めてJavascriptを使いましたよ。
ただ、以前にJavascriptをたくさん使うとページが重たくなるとかいう話を聞いたのですが、この方法もたくさん使いすぎるとページを表示させるのに重たくなったりするのですか？
ももぱぱさん、こんにちは。fenrirです。
JavaScriptはクライアントで実行されるので、クライアントの処理能力にもよると思いますが、ここにあげている方法はリアルタイムに動作するもの(例えば、画面を下にさげると追ってくるホバーメニューのようなもの)ではないので、それほど重くならないと思います。古いマシンがあるようでしたら、ここのページを表示させてみて重いかどうか判断していただけると幸いです。
fenrirさん、親切なご返答ありがとうございます。
家にあるあまり使っていないノートパソコン(Pen3 600MHz)で試してみたところ、ここのサイトは、初めに開くときに画面が切り替わるまでに少し時間がかかりましたが、その後はまったく重さを感じませんでした。
ありがとうございました。
興味深く記事を読ませて頂きました。
JavaScriptによるページの効率化にもトライしたいと感じましたが、
他の点で一つ気になることがあります。
機種依存文字である数字の囲み文字ですが、
このページに書かれたものは、MacでもWinでも正しく表示されるということです。
どのような方法で実現されているのでしょうか？
fenrirです。
①のような丸数字のことでしょうか?このページの文字コードをUTF-8で記述しているからだと思われます。