ポップアップ画面を用いたコメント投稿（その4：コメントフォームのカスタマイズ）
Posted at January 13,2005 11:58 PM
Tag：[]
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の補足 |
Posted by yujiro このページの先頭に戻る
- 画像のポップアップウィンドウをカスタマイズする
- ポップアップウィンドウ追加
- ポップアップ画面を用いたコメント投稿（その5：その4の補足）
- ポップアップ画面を用いたコメント投稿（その3：公開テンプレート修正方法）
- ポップアップ画面を用いたコメント投稿（その2：カスタマイズ）
- ポップアップ画面を用いたコメント投稿（その1：基本動作）
トラックバックURL
トラックバック
コメント
暮れに書いた記事からトラックバックさせていただきました。
まさに、こちらの内容を 暮れに頑張ってやってました。(^^*) ホホホホ
コメント投稿後や、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
