小粋空間  -  a cheap joke and a play on words site

Movable Type 4.1 と 4.2 の差分（コメント入力フォーム）

Movable Type 4.1 と 4.2 のコメント入力フォームの差分を掲載します。

Movable Type 4.2 では、インデックステンプレートの JavaScript（mt.js）の実装がほぼすべて新しくなり、それに伴い、コメント入力フォームのマークアップもかなり変更されています。

4.1 から 4.2 にアップグレードした場合、JavaScript（mt.js）やコメント入力フォームはそのままでも問題ないと思いますが、4.2 のコメント関連機能を活用するには、インデックステンプレートの JavaScript（mt.js）を初期化、つまり 4.2 の JavaScript（mt.js）を利用し、コメント入力フォームのテンプレートについては、以下に示す変更を行うと良いでしょう。

１．コメントプレビュー用データ

表示されているページがコメントプレビューであることを示すための情報を設定します。
コメントプレビューテンプレートに下記の青色のスクリプトを、mt.js が読み込まれる前に実行されるよう、挿入してください。

4.1

...前略...
<MTSetVarBlock name="html_head">
<script type="text/javascript" src="<$MTLink template="javascript"$>"></script>
</MTSetVarBlock>
...後略...

4.2

...前略...
<MTSetVarBlock name="html_head">
<script type="text/javascript">
/* <![CDATA[ */
var user = <mt:userSessionState />;
var is_preview = true;
/* ]]> */
</script>
<script type="text/javascript" src="<$MTLink template="javascript"$>"></script>
</MTSetVarBlock>
...後略...

この設定がもれていると、サインインしていないコメントでプレビューした場合、CAPTCHA フィールドがデフォルトで表示されないといった不具合が発生します。

２．メッセージ表示用エリアのマークアップ

「サインインできます」などのメッセージを表示するエリアのサブテンプレートは、4.1 で使われていた MTIfRegistrationAllowed タグがなくなり、(X)HTML の div 要素に変わりました。div 要素の id 属性値は comment-greeting としてください。

4.1

<MTIfRegistrationAllowed>
        <div id="comment-form-external-auth">
            <script type="text/javascript">
            <!--
            <MTIf name="comment_preview_template">is_preview = true;</MTIf>
            writeCommenterGreeting(commenter_name, <$MTEntryID$>, <$MTEntryBlogID$>, commenter_id, commenter_url);
            //-->
            </script>
        </div>
</MTIfRegistrationAllowed>

4.2

<div id="comment-greeting"></div>

３．form要素

onsubmit 属性値が変わりました。この変更を行わないと、コメント投稿時に「不正なエラーです」というエラーになります。

4.1

<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">

4.2

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

４．hidden属性のinput要素

4つの input 要素が追加されています。parent_id は親コメントへの返信コメントのときの親コメントIDです。armor（よろい）はスパムコメント対策用のデータです。

4.1

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />

4.2

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
<input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
<input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id" />
<input type="hidden" name="armor" value="1" />
<input type="hidden" name="preview" value="" />
<input type="hidden" name="sid" value="" />

4.2（コメントプレビュー）

<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
<input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
<mt:IfCommentParent>
    <input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id">
</mt:IfCommentParent>
<input type="hidden" name="armor" value="1" />
<input type="hidden" name="preview" value="" />

５．input要素（名前・メール・URL）

名前・メール・URLの input 要素に、CAPTCHAを表示するための onfocus 属性が追加されています。onfocus 属性値はブログ記事／ウェブページまたはコメントプレビュー画面で起動する関数が異なります。ブログ記事／ウェブページでは入力フィールドをクリックするとCAPTCHAを表示し、コメントプレビューではデフォルトで表示します。

4.1

<input id="comment-author" name="author" size="30" value="<MTIf name="comment_preview_template"><$MTCommentAuthor encode_html="1"$></MTIf>" />
...中略...
<input id="comment-email" name="email" size="30" value="<MTIf name="comment_preview_template"><$MTCommentEmail encode_html="1"$></MTIf>" />
...中略...
<input id="comment-url" name="url" size="30" value="<MTIf name="comment_preview_template"><$MTCommentURL encode_html="1"$></MTIf>" />

4.2

<input id="comment-author" name="author" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentAuthor encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
...中略...
<input id="comment-email" name="email" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentEmail encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
...中略...
<input id="comment-url" name="url" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentURL encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />

６．input要素（情報を保存）

onclick 属性値が変わりました。またコメントプレビューでは非表示になるため、全体をMTUnlessタグで括ります。

4.1

<div id="comment-form-remember-me">
    <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
        <__trans phrase="Remember personal info?"></label>
</div>

4.2（コメントプレビューでは表示させない制御を追加）

<mt:Unless name="comment_preview_template">
    <div id="comment-form-remember-me">
        <input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" value="1" accesskey="r" />
        <label for="comment-bake-cookie"><__trans phrase="Remember personal info?"></label>
    </div>
</mt:Unless>

７．返信表示用チェックボックス

コメント返信機能が標準装備されたので、返信用のチェックボックスが追加になりました。

4.1

なし

4.2

<div id="comments-open-data">
...中略...
</div>
<div id="comment-form-reply" style="display:none">
    <input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
    <label for="comment-reply" id="comment-reply-label"></label>
</div>

８．textarea要素

CAPTCHA表示用の onfocus 属性が追加されています。onfocus 属性値はブログ記事／ウェブページまたはコメントプレビュー画面によって内容が異なります。

4.1

<textarea id="comment-text" name="text" rows="15" cols="50"><MTIf name="comment_preview_template"><$MTCommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></MTIf></textarea>

4.2

<textarea id="comment-text" name="text" rows="15" cols="50" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>"><mt:If name="comment_preview_template"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></mt:If></textarea>

９．CAPTCHA用フィールド

4.1 で使われていた テンプレートタグがなくなり、div 要素だけになりました。

4.1

<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha">
</div>
</MTIfNonEmpty>

4.2

<div id="comments-open-captcha"></div>

１０．確認用フォームボタン

name 属性値が変更になり、onclick 属性が追加されました。

4.1

<input type="submit" accesskey="v" name="preview" id="comment-preview" value="<__trans phrase="Preview">" />

4.2

<input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="<__trans phrase="Preview">" onclick="this.form.preview.value='1';" />

１１．投稿後、フォームボタンをdisableにするJavaScript（二重送信の防止）

コメントフォームの最後に script 要素が追加されました。

4.1

なし

4.2

<div class="comments-open" id="comments-open">
...中略...
</div>
<script type="text/javascript">
<!--
mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
//-->
</script>

１２．4.1のテンプレート構成で4.2にバージョンアップする場合のコメント入力フォームサンプル

4.2 の「既定のブログ」テンプレートセットでは、「コメント入力フォーム」テンプレートモジュールがなくなり、ブログ記事・ウェブページ用のコメント入力フォーム（「コメント」テンプレートモジュール）とコメントプレビューのコメント入力フォーム（コメントプレビューテンプレートに直接記述）が独立してしまったので、4.1 の「既定のブログ」テンプレートセットの構成に対応できるよう、

• ブログ記事
• ウェブページ
• コメントプレビュー

のテンプレートで使える「コメント入力フォーム」テンプレートモジュールを作ってみましたので、よければお使いください。
また、不具合がありましたらご連絡ください。

<mt:IfCommentsAccepted>
<div class="comments-open" id="comments-open">
    <h2 class="comments-open-header"><__trans phrase="Leave a comment"></h2>
    <div class="comments-open-content">
        <div id="comment-greeting"></div>
        <form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">
            <input type="hidden" name="static" value="1" />
            <input type="hidden" name="entry_id" value="<$mt:EntryID$>" />
            <input type="hidden" name="__lang" value="<$mt:BlogLanguage$>" />
            <mt:IfCommentParent>
                <input type="hidden" name="parent_id" value="<$mt:CommentParentID$>" id="comment-parent-id">
            </mt:IfCommentParent>
            <input type="hidden" name="armor" value="1" />
            <input type="hidden" name="preview" value="" />
            <div id="comments-open-data">
                <div id="comment-form-name">
                    <label for="comment-author"><__trans phrase="Name"></label>
                    <input id="comment-author" name="author" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentAuthor encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <div id="comment-form-email">
                    <label for="comment-email"><__trans phrase="Email Address"></label>
                    <input id="comment-email" name="email" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentEmail encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <div id="comment-form-url">
                    <label for="comment-url"><__trans phrase="URL"></label>
                    <input id="comment-url" name="url" size="30" value="<mt:If name="comment_preview_template"><$mt:CommentURL encode_html="1"$></mt:If>" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>" />
                </div>
                <mt:Unless name="comment_preview_template">
                    <div id="comment-form-remember-me">
                        <input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="mtRememberMeOnClick(this)" value="1" accesskey="r" />
                        <label for="comment-bake-cookie"><__trans phrase="Remember personal info?"></label>
                    </div>
                </mt:Unless>
            </div>
            <div id="comment-form-reply" style="display:none">
                <input type="checkbox" id="comment-reply" name="comment_reply" value="" onclick="mtSetCommentParentID()" />
                <label for="comment-reply" id="comment-reply-label"></label>
            </div>
            <div id="comments-open-text">
                <label for="comment-text"><__trans phrase="Comments">
                <mt:IfAllowCommentHTML><__trans phrase="(You may use HTML tags for style)"></mt:IfAllowCommentHTML></label>
                <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="<mt:If name="comment_preview_template">mtShowCaptcha()<mt:Else>mtCommentFormOnFocus()</mt:If>"><mt:If name="comment_preview_template"><$mt:CommentBody autolink="0" sanitize="0" convert_breaks="0" encode_html="1"$></mt:If></textarea>
            </div>
            <div id="comments-open-captcha"></div>
            <div id="comments-open-footer">
                <input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="<__trans phrase="Preview">" onclick="this.form.preview.value='1';" />
                <input type="submit" accesskey="s" name="post" id="comment-submit" value="<__trans phrase="Submit">" />
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
<!--
mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);
//-->
</script>
</mt:IfCommentsAccepted>