Home > Internet > Movabletype > AjaxCommentの改良？版

AjaxCommentの改良？版

Posted by: oscar
2006-08-02 (水) 16:16
MovableType
Ajax, Comment, Movable Type
delicious count
hatebu user
AjaxCommentの改良？版

前回の失敗に懲りずに、改良(改悪？)版行きます。

プレビューボタンを押しても投稿されてしまう件に関しては、「Javascriptでシリアライズというのをした時の問題らしい」との情報らしきものは見つかったのですが、対応するのは私には手に負えませんので、後ろ向きに解決します。＜をい！

[追記:2006年8月29日 10:57:07]MovableType備忘録: MovableTypeのコメントをAjaxで投稿するにて、bzbell さんが問題を解決されたようです。導入方法の説明もありますので、そちらをご覧下さい。

前回からの変更点は、
・プレビューボタンを廃止する。（笑）
・コメントを投稿された時に、常に公開保留状態にする事で、エントリーアーカイブの再構築を抑止する。
・前回、ajaxcomment.js中で使わなかった関数を正しく使う。
大きく分けて以上3点です。

前回のエントリーでは「ブログの文字コードをUTF-8に設定していて、なおかつ、サーバーが高速で普段でもコメントの時サクサク動くよという方は、導入してみてはどうでしょうか？」と書きましたが、即時にコメントを公開しないようにする事で、動作スピードについては大分改善されると思います。

それではくどいようですが、もう一度全体を説明します。

1)prototype.jsとscriptaculous.jsをダウンロードする。MT AJAX Commentsの2ページ目

2)ajaxcomments.jsをダウンロードする。MT AJAX Commentsの3ページ目
ajaxcomments.js内のmt-comments.cgiの場所が実際と違っているようなら変更しておいて下さい。

3)ダウンロードしたJavascriptをサーバーにアップロードする。

4)Javascriptの読み込みをエントリー・アーカイブのヘッダ部分(</head>の前あたり)に記述する。(下はJavascriptをブログ公開のルートに配置した時の例です。）

<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script><script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script><script type="text/javascript" src="<$MTBlogURL$>scriptaculous.js"'></script><script type="text/javascript" src="<$MTBlogURL$>ajaxcomments.js"></script></head>

5)エントリー・アーカイブのコメントフォーム部分を修正します。1か所目、<MTEntryIfCommentsOpen>を元に挿入個所を見つけて下さい。（以下はMT3.3の場合です。)

<MTEntryIfCommentsOpen> <form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)"><input type="hidden" name="static" value="1" /><input type="hidden" name="entry_id" value="<$MTEntryID$>" />

を以下のように変更します。

<div id="comment_posted" style="display: none;"></div><div id="comment_form_block"><MTEntryIfCommentsOpen> <form id="comments_form" method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)"><input type="hidden" name="entry_id" value="<$MTEntryID$>" />

6)エントリー・アーカイブのコメントフォーム部分を修正します。2か所目、</MTEntryIfCommentsOpen>を元に</div>を挿入して下さい。

</form></MTEntryIfCommentsOpen></div>

7)エントリー・アーカイブの投稿ボタン廻りを修正します。以下の青色部分を追加します。
今回はAjaxでのプレビューをオミットするよう、確認ボタンを削除します。
このサイトではその代わりに、Javascriptによるリアルタイムプレビューを設置する方針です．

<input type="submit" accesskey="v" name="preview" id="comment-preview" value="確認" /><input type="submit" accesskey="s" name="post" id="comment-post" value="投稿" onclick="return ajax_post();" /><img id="progress" style="display:none;" align="absmiddle" src="/images/ajaxcomments/progress.gif" border="0" alt="Loading...">

ソースを見てお気づきのように、じっぷろぐさんのページで触れられている通り、ローディング中の画像が必要になります。もしなかったら、こちらからどうぞ。サーバーにアップロードしておいて下さい。(上だと/images/ajaxcommentsの中に配置してます。)

8)コメントの一覧テンプレート、コメント・保留テンプレート、コメント・エラーのテンプレートを編集します。なぜか、コメント一覧のテンプレートはデフォルトでは空です。以下の内容を丸々挿入してください。お好みにより編集してかまいません。
この部分がコメント投稿時に「挿入される部分」になります。コメントプレビューテンプレートは使われません。

<h3 class="comments-header">あなたのコメント</h3><MTComments sort_order="ascend" lastn="1"><div class="comment" id="comment-new">以下のコメントを受け付けました。コメントありがとうございます。<br /><div class="comment-content"><$MTCommentBody$></div><p class="comment-footer">投稿者:<$MTCommentAuthorLink default_name="匿名"$> <$MTCommentAuthorIdentity$> |<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a></p></div></MTComments>

コメント・保留のテンプレートは、コメントを管理者の承認を待って公開されるようにしている時に使われるテンプレートです。こちらもコメント画面に挿入されます。

<h3 class="comments-header">コメントを受け付けました。</h3><MTComments sort_order="ascend" lastn="1"><div class="comment" id="comment-new">以下のコメントはオーナーの承認を待って公開されます。<br /><div class="comment-content"><$MTCommentPreviewBody$></div><p class="comment-footer">投稿者:<$MTCommentPreviewAuthorLink default_name="匿名"$> <$MTCommentPreviewAuthorIdentity$> |<a href="#comment-<$MTCommentID$>"><$MTCommentPreviewDate$></a></p></div></MTComments>

コメント一覧のテンプレートとよく似ていますが、よくよく見るとコメント関連のタグにPreviewとい語がついています。これが保留コメントのテンプレートで大事な部分です。Preview抜きのタグを使った場合、表示される内容は最後に公開されたコメントの内容になります。Previewがついたタグはコメントプレビューテンプレート用のタグで、最後に投稿されたコメントが表示されるようになります。

コメント・エラーのテンプレートは必要に応じてで構いません。デフォルトのままでもさほど違和感はありませんので、気になる方のみ修正して下さい。私は変更しませんでした。

9)前回使わなかった関数を組み込むことで、名前、URL、コメント内容をフォーム送信後も表示するようにする事が可能になります。（必要ないと思ったら、飛ばしてもかまいません）

<div id="comments-open-data">  <div id="name-email">    <p><label for="author">名前:<input id="author" onKeyUp="ReloadNameDiv();" name="author" size="30" /></label></p>    <p><label for="comment-email">メールアドレス:<input id="comment-email" name="email" size="30" /></label></p>  </div>  <p><label for="website">URL:<input id="website" onkeyup="ReloadWebDiv();" name="url" size="30" /></label></p>  <p><label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />この情報を登録しますか?</label></p></div><p id="comments-open-text"><label for="DynamicText">コメント: <MTIfAllowCommentHTML>(スタイル用のHTMLタグが使えます)</MTIfAllowCommentHTML></label><textarea id="DynamicText" onKeyUp="ReloadTextDiv();" name="text" rows="15" cols="50"></textarea></p>

入力するする項目の「label for=」の部分と「input id=」の部分を設定するのは、投稿後に内容を保持するために必要な作業です。ajaxcomment.js中のReloadXXDiv() 関数に書かれたidと同一になるようにしています。逆に関数を書き換えるのでも良いはずです。

以上で組み込み方法の説明終了です。

なに？なんでお前の所で使ってないのかって？
では試しに実際に設置したブログで動きを確認してください。（テスト用なので好きにコメントしてください）どうですか？

お分かりの通り私のサーバーでは文字コードの問題があります。
Ajaxは内部処理をUTF-8で行っているとの事で、このスクリプトは出力側の文字コードへの配慮は含まれてないようです。その為私のブログ(EUCを使ってます)では、コメントの文字化けが発生します。
その為、実際には使用しない事にしました。しかし、通常MovableTypeはデフォルトでUTF-8になるようになっていますので、大半の方はこのままお使いいただけると思います。

また、動く事を確認していますが、根本的な部分で考え違いをしているかも知れないので、その時はコメントいただけると、ありがたいです。