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';
}
次回はこの分析を基に実際のカスタマイズ方法を解説したいと思います。
