ポップアップ画面を用いたコメント投稿(その4:コメントフォームのカスタマイズ)

ポップアップ画面を用いたコメント投稿(その4:コメントフォームのカスタマイズ)

Posted at January 13,2005 11:58 PM
Tag:[]

3回で終わらせるつもりでしたが追加内容がありましたので。
コメント・リスト/コメント・プレビュー/コメント・エラーのテンプレートに MTCommentFields を用いない、つまり個別エントリーアーカイブのフォーム部分を利用する場合の修正方法です。

具体的な作業としては、コメント・リストテンプレートの

<MTCommentFields static="1">

およびコメント・プレビュー/コメント・エラーテンプレートの

<MTCommentFields preview="1">

の部分を下記のソースにそれぞれ入れ替えます。ソースは個別アーカイブテンプレートから該当部分を切り出したもので、赤色および青色部分の修正を行います。赤色は本来の修正箇所、青色はフォーム情報を前ページから引き継ぐための修正です(Ogawa::memorandaさんからのアドバイスによるものです)。
繰り返しになりますが投稿されたコメントがポップアップ画面からのものか、非ポップアップ画面からのものかを次の画面に知らせる必要があります。それを引継ぐ情報としてstatic属性が使われています。赤色の

<$MTRemoteSignOutLink static="n"$>

または

<input type="hidden" name="static" value="n" />

の部分を適宜修正してください。n の意味は下記の通りです。必要な値を適宜設定してください。

0:サイン・イン/サイン・アウト/コメント投稿後、ポップアップ画面へ誘導
1:サイン・イン/サイン・アウト/コメント投稿後、非ポップアップ画面へ誘導
<$MTCommentPreviewIsStatic$>:前画面のstatic値を引き継ぐ

ただし、コメント・プレビュー/コメント・エラーで

<$MTRemoteSignOutLink static="<$MTCommentPreviewIsStatic$>"$>

という記述はサポートされていないようです。→ 2005.01.27追記その5に対処方法を記しました。

コメント・リストテンプレート

<h2>コメントしてください</h2>
 
<MTIfRegistrationRequired>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<div id="thanks">
<p>サイン・インを確認しました、
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script><script>document.write(commenter_name);</script>
さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)</p>
 
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<p><label for="url">URL:</label><br />
<input tabindex="1" type="text" name="url" id="url" />
情報を登録する?
<input type="radio" id="remember" name="bakecookie" onclick="rememberMe(this.form)" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
 
</p>
 
<p><label for="text">コメント:</label><br />
<textarea tabindex="2" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" tabindex="3" name="preview" value=" 確認 " />
<input style="font-weight: bold;" tabindex="4" type="submit" name="post" value=" 投稿 " />
</div>
</form>
 
</div>
 
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.getElementById('thanks').style.display = 'block';
} else {
document.write('サイン・インしていません。このサイトにコメントをする前に登録してください。 <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a>');
document.getElementById('thanks').style.display = 'none';
}
// -->
</script>
 
<MTElse>
コメント登録機能が設定されていますが、TypeKey トークンが設定されていません。
</MTElse>
</MTIfNonEmpty>
 
<MTElse>
<MTIfNonEmpty tag="MTTypeKeyToken">
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.write('サイン・インを確認しました、', commenter_name, '. さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a> してください。');
}
// -->
</script>
</MTIfNonEmpty>
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<div id="name_email">
<p><label for="author">名前:</label><br />
<input tabindex="1" id="author" name="author" /></p>
 
<p><label for="email">メールアドレス:</label><br />
<input tabindex="2" id="email" name="email" /></p>
</div>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.getElementById('name_email').style.display = 'none';
}
// -->
</script>
</MTIfNonEmpty>
 
<p><label for="url">URL:</label><br />
<input tabindex="3" type="text" name="url" id="url" />
保存しますか?
<input type="radio" id="remember" onClick="rememberMe(this.form)" name="bakecookie" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
</p>
 
<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br/>
<textarea tabindex="4" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" name="preview" tabindex="5" 
value=" 確認 " />
<input style="font-weight: bold;" type="submit" name="post" 
tabindex="6" value=" 投稿 " />
</div>
</form>
 
</MTElse>
</MTIfRegistrationRequired>

コメント・プレビュー/コメント・エラーテンプレート

<h2>コメントしてください</h2>
 
<MTIfRegistrationRequired>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<div id="thanks">
<p>サイン・インを確認しました、
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script><script>document.write(commenter_name);</script>
さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)</p>
 
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="<$MTCommentPreviewIsStatic$>" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<p><label for="url">URL:</label><br />
<input tabindex="1" type="text" name="url" id="url" />
情報を登録する?
<input type="radio" id="remember" name="bakecookie" onclick="rememberMe(this.form)" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
 
</p>
 
<p><label for="text">コメント:</label><br />
<textarea tabindex="2" id="text" name="text" rows="10" cols="50"></textarea></p>
 
<div align="center">
<input type="submit" tabindex="3" name="preview" value=" 確認 " />
<input style="font-weight: bold;" tabindex="4" type="submit" name="post" value=" 投稿 " />
</div>
</form>
 
</div>
 
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.getElementById('thanks').style.display = 'block';
} else {
document.write('サイン・インしていません。このサイトにコメントをする前に登録してください。 <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a>');
document.getElementById('thanks').style.display = 'none';
}
// -->
</script>
 
<MTElse>
コメント登録機能が設定されていますが、TypeKey トークンが設定されていません。
</MTElse>
</MTIfNonEmpty>
 
<MTElse>
<MTIfNonEmpty tag="MTTypeKeyToken">
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.write('サイン・インを確認しました、', commenter_name, '. さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a> してください。');
}
// -->
</script>
</MTIfNonEmpty>
 
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="static" value="<$MTCommentPreviewIsStatic$>" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
 
<div id="name_email">
<p><label for="author">名前:</label><br />
<input tabindex="1" id="author" name="author" value="<$MTCommentPreviewAuthor encode_html="1"$>" /></p>
 
<p><label for="email">メールアドレス:</label><br />
<input tabindex="2" id="email" name="email" value="<$MTCommentPreviewEmail encode_html="1"$>" /></p>
</div>
 
<MTIfNonEmpty tag="MTTypeKeyToken">
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.getElementById('name_email').style.display = 'none';
}
// -->
</script>
</MTIfNonEmpty>
 
<p><label for="url">URL:</label><br />
<input tabindex="3" type="text" name="url" id="url" value="<$MTCommentPreviewURL encode_html="1"$>" />
保存しますか?
<input type="radio" id="remember" onClick="rememberMe(this.form)" name="bakecookie" /><label for="remember">はい</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">いいえ</label><br style="clear: both;" />
</p>
 
<p><label for="text">コメント:</label> <MTIfAllowCommentHTML>
(書式を変更するような一部のHTMLタグを使うことができます)</MTIfAllowCommentHTML><br/>
<textarea tabindex="4" id="text" name="text" rows="10" cols="50"><$MTCommentPreviewBody convert_breaks="0" encode_html="1"$></textarea></p>
 
<div align="center">
<input type="submit" name="preview" tabindex="5" 
value=" 確認 " />
<input style="font-weight: bold;" type="submit" name="post" 
tabindex="6" value=" 投稿 " />
</div>
</form>
 
</MTElse>
</MTIfRegistrationRequired>
その1:基本動作
その2:カスタマイズ
その3:公開テンプレート修正方法
その4:コメントフォームのカスタマイズ
その5:その4の補足
関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

悪戦苦闘の末・・・ from ぴぃかぶぅ
ここ数日、あれこれでホント 悪戦苦闘してました。 その様子は、小粋空間 さまの記... [続きを読む]

Tracked on January 14, 2005 9:08 AM
コメント

暮れに書いた記事からトラックバックさせていただきました。
まさに、こちらの内容を 暮れに頑張ってやってました。(^^*) ホホホホ
コメント投稿後や、TypeKeyからサインアウト後に 狭いポップアップ画面の中に
2カラムの個別アーカイブページが開くのがイヤで、
「0:サイン・イン/サイン・アウト/コメント投稿後、ポップアップ画面へ誘導」 の設定にしました。

[1] Posted by さえら : January 14, 2005 9:15 AM

早速導入させていただきました。
“さえら”さんと同様に、ワタシもサインアウト後のポップアップ画面にギュ?っとページが表示されるのがどうも・・・(こういうことか・・・とその時になって気づいたワタシがアホなのですが(笑))・・だったので、“ポップアップ画面へ誘導”に切り換えました。
今回もまた有り難うございました。

[2] Posted by toycozy : January 14, 2005 2:57 PM

>さえらさん
こんばんは。
トラックバックありがとうございます。
あの頃が懐かしいですね(笑)。
うまくできた時は本当に嬉しかったです。

>toycozyさん
こんばんは。
ご利用ありがとうございます!
ポップアップは記事を見ながら書けるという利点がいいですね。

私も始めた頃ポップアップ画面に3カラムが表示されるのが不満でやめてしまったのですが、これなら充分使えますね。

[3] Posted by yujiro : January 15, 2005 12:52 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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