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

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

Posted at September 3,2008 12:55 AM
Tag:[4.2, MovableType, Template]

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)を利用し、コメント入力フォームのテンプレートについては、以下に示す変更を行うと良いでしょう。

1.コメントプレビュー用データ

表示されているページがコメントプレビューであることを示すための情報を設定します。
コメントプレビューテンプレートに下記の青色のスクリプトを、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 フィールドがデフォルトで表示されないといった不具合が発生します。

2.メッセージ表示用エリアのマークアップ

「サインインできます」などのメッセージを表示するエリアのサブテンプレートは、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>

3.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)">

4.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="" />

5.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>" />

6.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>

7.返信表示用チェックボックス

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

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>

8.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>

9.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>

10.確認用フォームボタン

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';" />

11.投稿後、フォームボタンを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>

12.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>
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Movable Type 4.2 にバージョンアップ from La Petite Note
Movable Type 4.2 がリリースされていることはわかっていたのだけど... [続きを読む]

Tracked on April 10, 2009 9:27 PM
コメント

はじめましてMangoと申します。
以前より参考にさせていただいておりました。
いつも役に立つ情報をありがとうございます。

いきなりで恐縮ですが、MT4.2にアップグレード後のコメント周りの挙動がどうにも思うようにならないので、質問させていただきます。

初めはMT4.1で「MovableType WEBデザインの新しいルール」に付属していたテンプレートを使いブログを作りました。
その後MT4.2へのアップグレードにあわせ、やはりこちらのテンプレート「template_4_2_utf8_1_5_style」からコメント周りの差分を4.1のテンプレートに入れ込む形で手を加え、特にコメント入力フォームは「template_4_2_utf8_1_5_style」のテンプレートとほぼ同じ内容になっています。
基本的に「コメントプレビュー」と「コメント入力フォーム」モジュールのみの修正になっていると思います。
認証・登録は行わず、「認証なし」コメントのみで、これにCAPTCHAをあわせて利用していますが、ここまで修正を加えたところ、以下のような現象が起こり困っています。

1、CAPTCHAが初めから表示されてしまう。
  「認証なし」コメントのみの場合は正しい動作なのでしょうか?フォームに
  フォーカスが移った時、初めて表示されるものと思っていたのですが。

2、コメントプレビュー画面に遷移すると「名前」「メール」「URL」の入力欄およびCAPTHAが表示されない。
  これも「認証なし」コメントのみの場合は正しい動作なのかな?とも思いましたが
  唯一表示されているテキストエリアをクリックしてもなぜかCAPTHAが表示され
  ません。

3、記事の画面でCAPTCHAを入力後、コメントプレビュー画面に遷移、その後コメントを投稿すると「セッションの有効期限が切れています。再度サインインしてください」というエラーが表示される。
  コメントプレビュー画面では上記2の通りCAPTHAが表示されないため
  新たに入力することもできません。
  コメントプレビュー画面に遷移してしまうと必ず投稿に失敗するという状態に
  なってしまいました。

これらの現象を回避する方法、あるいは原因などご指摘いただけないでしょうか。

長々と書いてしまい申し訳ありませんが、4.2になってからコメント周りが複雑になり混乱してしまいました。
お時間のあるときにでも、ご回答頂ければ幸いです。

[1] Posted by Mango logo : October 1, 2008 8:42 AM

>Mangoさん
はじめまして。
ご利用ありがとうございます。
ご質問の件ですが、この記事の冒頭に書いてますとおり、インデックステンプレートのJavaScript(mt.js)は 4.2 のものをお使いでしょうか。4.2 のコメントフォームから起動する JavaScript がすべて刷新されているので期待通りの動作になっていないように思われます。
「template_4_2_utf8_1_5_style」に含まれている JavaScript を使ってみてください。
入れ替えの手順がお分かりにならないようであれば再度ご連絡ください。
それではよろしくお願い致します。

[2] Posted by yujiro logo : October 1, 2008 10:02 AM

ご回答、ありがとうございます。
JavaScript(mt.js)は 4.2のものを使用しております。
質問の際、書き忘れていました。申し訳ありません。
「template_4_2_utf8_1_5_style」でブログをひとつ作成し、そこからコピーペーストしました。
ちなみに4.1のmt.jsの時はプレビュー画面で「名前」「メール」「URL」が消えてしまうことはありませんでした、またCAPTCHAも表示されていたと記憶しております。
以上、よろしくお願いいたします。

[3] Posted by Mango logo : October 1, 2008 12:01 PM

>Mangoさん
こんにちは。
mt.js の件、了解いたしました。
すいませんがサイトのURLをご連絡頂けますでしょうか。
非公開であればメールでお知らせください。
それではよろしくお願い致します。

[4] Posted by yujiro logo : October 1, 2008 1:11 PM

わざわざご親切にありがとうございます。
ブログのURLは

http://blog.esterchan.com/

です。

お手数おかけして申し訳ありません。
よろしくお願い致します。

[5] Posted by Mango logo : October 1, 2008 2:41 PM

>Mangoさん
こんにちは。
ご連絡ありがとうございました。
以下、回答です。なお、コメントフォームにサインインの表示がなかったため、「認証なし」のコメントのみを選択しているという認識での回答です。

1.「認証なしコメント」だけを選択している場合、初めからCAPTCHAが表示されるのは正しい動作です。ただし他の認証方式と組み合わせていれば、いずれかのフィールドをクリックするまでCAPTCHAは表示されません(フィールドをクリックしたことで「認証なしコメント」と判断するロジックになっているようです)

2.サインインしていない場合は、コメントプレビューでも各フィールドやCAPTCHAは表示されます。なお、こちらから確認したところ、コメントプレビュー画面でCAPTCHAは表示されましたので、下の3に記している問題かもしれません。

3.ブログ管理画面にログイン中に(同じブラウザで)コメント投稿やプレビューをすると、コメントフォームの動作が期待通りにならない場合があります。ブログ管理画面をログアウトした後、コメントフォームのサインイン・サインアウトを行ってから動作を確認するか、ブログ管理画面とコメント投稿をそれぞれ異なるブラウザで作業してみてください。

それではよろしくお願い致します。

[6] Posted by yujiro logo : October 1, 2008 4:12 PM

ご回答ありがとうございます。

3のご指摘がまさにピッタリでした。管理画面をサインアウトした後同一のブラウザでプレビュー画面を表示したところ、「名前」「メール」「URL」、CAPTCHAすべてが表示されていました。(他のブラウザでも同じように表示されると思います)

Javascriptの知識はまったくないのですが、以前FireBugでmt.jsの中を追いかけていたところ、どこかの関数のどこかの分岐条件(笑)でauthenticatedがtrueになったので、あれっ?と思っていたのですが、今回教えてくださったことがその原因だったように思います。

1ヶ月以上悩んでいたので、とてもすっきりした気分です。
本当にありがとうございました。

[7] Posted by Mango logo : October 1, 2008 5:02 PM

>Mangoさん
こんにちは。
ご連絡ありがとうございました。
原因が判明したようで良かったです。

3の件は機会があればエントリーでも取り上げたいと思います。
ではでは!

[8] Posted by yujiro logo : October 1, 2008 5:14 PM

初めまして九代目と言います。この回のブログに書いてある

>3.ブログ管理画面にログイン中に(同じブラウザで)コメント投稿やプレビューをすると、コメントフォームの動作が期待通りにならない場合があります

こちらがものすごく助かりました。結局何もしなかったのですが(笑)今日丸1日悩んでいたので、今とても心が晴れやかです。ありがとうございました。

追記
Movable Type 4.2 パーフェクトガイド 購入しました。いつか自分の思いのままのカスタマイズができることを夢見て勉強中です。


[9] Posted by 九代目 : January 27, 2009 10:25 PM

>九代目さん
はじめまして。
ご利用&コメントありがとうございます。
また、拙著お買い上げくださりありがとうございます。
本書は誤記が多いため、申し訳ありませんがサポートサイトの「訂正情報」をご確認ください。
それでは今後ともよろしくお願い致します。

[10] Posted by yujiro logo : February 4, 2009 12:50 PM

はじめましてtukaと申します。
いつも拝見しています。
ひとつお伺いしたいのですが、コメントをブログ記事にインクルードし、
FireFoxでは完璧に動く事ができました。
しかし、Safari/IE6,7,8では
プレビュー画面で、投稿ボタン等のボタン類と、再書き込み出来るテキストボックスが表示されないので、送信することが出来ない状況です。

FireFoxでだけ挙動するというのが気になる部分ではありますが、
これはどこに問題があるのでしょうか?

ちなみにMt4.25を使用しております。4.1からの移行ではありません。。。

[11] Posted by tuka : December 11, 2009 1:42 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)