前回のエントリーの続きとして、今回はMTデフォルトテンプレートの分析を行いたいと思います。
1.機能の概要
MTアカウント等でシステムにサインイン時に、コメント入力欄のプロフィール（名前・電子メール）の入力をスキップし、入力欄を非表示にする。
2.コメント機能の処理の記述場所
概要を把握したところで、一旦プログラムについて見てみましょう。
コメント機能に関するクライアント側の処理は、ブログ作成時にルート直下に作成される mt.js というJavascriptファイルにまとめて記述されています。MTデフォルトテンプレートにおいて、このファイルはインデックステンプレート（JavaScript）として自動的に生成されるようになっています。
3.コメント投稿フォームのHTML
さて、次にコメント投稿フォームのHTMLを見てみましょう。
<form contenteditable="false" method="post" action="http://**********/*****/mt-comments.cgi" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<input name="static" value="1" type="hidden" />
<input name="entry_id" value="35" type="hidden" />
<input name="__lang" value="ja" type="hidden" />
<div id="comments-open-data">
<div id="comment-form-name">
<label for="comment-author">名前</label>
<input id="comment-author" name="author" size="30" value="" />
</div>
<div id="comment-form-email">
<label for="comment-email">電子メール</label>
<input id="comment-email" name="email" size="30" value="" />
</div>
<div id="comment-form-url">
<label for="comment-url">URL</label>
<input id="comment-url" name="url" size="30" value="" />
</div>
<div id="comment-form-remember-me">
<label for="comment-bake-cookie"><input id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" type="checkbox" />
ログイン情報を記憶</label>
</div>
</div>
<div id="comments-open-text">
<label for="comment-text">コメント (スタイル用のHTMLタグを使うことができます)</label>
<textarea id="comment-text" name="text" rows="15" cols="50"></textarea>
</div>
<div id="comments-open-footer">
<input accesskey="v" name="preview" id="comment-preview" value="確認" type="submit" />
<input accesskey="s" name="post" id="comment-submit" value="投稿" type="submit" />
</div>
</form>
上記のソースを分解して見てみると、次のような箇所があることが分かります。
▼名前入力欄
<div id="comment-form-name">
<label for="comment-author">名前</label>
<input id="comment-author" name="author" size="30" value="" />
</div>
▼電子メール入力欄
<div id="comment-form-email">
<label for="comment-email">電子メール</label>
<input id="comment-email" name="email" size="30" value="" />
</div>
ログインの状態に応じて、この部分の表示・非表示を切り替えることによって機能を実現しています。
4.具体的な処理
では、具体的な処理を見てみましょう。
前述の要素の表示・非表示を切り替えは、2．で解説したmt.jsの中の以下の部分で処理しています。
function hideDocumentElement(id) {
var el = document.getElementById(id);
if (el) el.style.display = 'none';
}
function showDocumentElement(id) {
var el = document.getElementById(id);
if (el) el.style.display = 'block';
}
つまり単純にid名から要素を取得し、取得した要素のstyle属性のdisplay値をnone⇔blockで切り替える、といういたってシンプルな処理になっています。
（この手法は現在のWeb2.0の潮流から見ると前時代的なものであり、このあたりの手抜き（？）加減がMTのJavascript関連の記述の古さが指摘される原因でもあります。）
という訳で話が逸れてしまいましたが、次回はこの分析を基に実際のカスタマイズ方法を解説したいと思います。
