Home > Internet > Movabletype > コメント投稿をAjax・・・ライクに

コメント投稿をAjax・・・ライクに

Posted by: oscar
2006-07-26 (水) 15:29
MovableType
Ajax, Movable Type
delicious count
hatebu user
コメント投稿をAjax・・・ライクに

ずうっと、挑戦してて失敗していたこと。何度も試してるんですが、うまくいかなかったんですが、とりあえず動作にまではこぎつけました。
それは・・・

MT AJAX Comments AJAXでコメント投稿をできるようにする方法です。実装はJavascriptの組み込みで行われます。このサイトは解説がページ単位に分かれていて、順を追って組み込むようになっています。しかし残念ながら、何度トライしても思うように動きませんでした。

あきらめてしばらくしてから、ネット経由で以下のエントリーを見つけました。
じっぷろぐ: MovableTypeのコメント投稿をAjax形式にする
そうこちらで書かれていた、ローディング画像が表示されないというのは、私のところでも体験した失敗です。

という事でもう一度挑戦し、無事動くようになったので組み込み作業まとめます。
[追記：07/28] bzbellさんから指摘があったように、ここで説明している方法では投稿のみ実装されます。Ajaxでのプレビュー機能については、残念ながら組み込まれません。The World According To Buchs: Ajax-ified Weblogの記事に、「このままでは formの seriarize について問題がある」と書かれているようなので現在内容を調査中です。

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

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" >                           <input type="hidden" name="entry_id" value="<$MTEntryID$>" />

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

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

7)エントリー・アーカイブの投稿ボタン廻りを修正する。以下の青色部分を追加します。

<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"><div class="comment-content"><$MTCommentBody$></div><p class="comment-footer">投稿者:<$MTCommentAuthorLink default_name="匿名"$> <$MTCommentAuthorIdentity$> |<a href="#comment-<$MTCommentID$>"><$MTCommentDate$></a></p></div></MTComments>

これで、作業自体は完了です。

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

実は２つの点で使用に問題があります。まずは文字コードの問題。
Ajaxは内部処理をUTF-8で行っているとの事で、このスクリプトは出力側の文字コードへの配慮は含まれてないようです。その為私のブログ(EUCを使ってます)では、コメントの文字化けが発生します。
もう一つは、レスポンスの問題です。Ajaxといいながらも、このスクリプトは裏では実際にmt-comment.cgiを呼び出し、エントリーアーカイブのビルドを行ってます。その為画面遷移こそ起こりませんが、それなりの時間を表示するまで待たなくてはなりません。非力な私のサーバーではあまり導入の意味はありません。以上の２点から導入をやめました。

ブログの文字コードをUTF-8に設定していて、なおかつ、サーバーが高速で普段でもコメントの時サクサク動くよという方は、導入してみてはどうでしょうか？

Newer >: Transformerプラグイン増殖中
< Older: links for 2006-07-25

わりと新しめの関連してるかもしれないエントリー達（10件）

ping a Trackback

TrackBack URL for this entry.(1)

Comments:(4)

bzbell said July 27, 2006 7:21 PM | ReplyThis!

こんにちわ^^

以前、わたしも MT Ajax Comments を試したこと合ったのですが、プレビューがなぜか投稿になってしまったので、断念したんです。
oscarさんのプレビュー抑止もそのせいでしょうか。

oscar replied for bzbell's comment July 27, 2006 11:13 PM | ReplyThis!

こんにちは、bzbellさん。
いえいえ、プレビュー（確認画面）は反応が遅いからやめてるだけです。下のプレビューはリアルタイムにおおよその雰囲気が出るように改造してる途中だったりします。

プレビューは、元のソース見ると<input id="comment-preview" accesskey="v" value="Preview" onclick="return ajax_preview();" type="submit">となってますね。
別な関数使うみたいです。テストして確認できたら、追記しときます。

気づかなかった、ありがとうございました。

bzbell said July 29, 2006 1:42 AM | ReplyThis!

こんにちわ^^

bzbellです。
MT Ajax Comment もう1度トライしてみたのですが、やっぱりプレビューダメでした。
投稿だけなら問題なしなのですが…。

とりあえず、わたしのブログでは投稿のみで使ってみることにしました。でも、わたしのブログでは prototype.js が他のAjaxとかぶっているようで、背景の色がフェードアウトしないみたいです（つω-`｡）とほほ

あと、まったく関係ない話ですが、oscarさんのコメント入力欄の下の
バーって何ですか？
何するものなのか分からず、たまに他ブログでも見かけていたので、oscarさんを真似て登録してみました。

oscar replied for bzbell's comment August 4, 2006 12:16 AM | ReplyThis!

あっ、コメント見落としてた。
ソース拝見させていただきました。背景色の部分は私と一緒ですね。
それ以外で気になるところ見つけちゃいました。
フォーム入力の名前とURLのidは、「author」と「website」じゃなきゃまずくないですか？ajaxcomment.jsでそのid指定しているみたいですけど。
あと、</MTConvertIconMacro>って閉じタグがhtmlに出ちゃってますけど、タグの位置ずれてませんか？
もっとも何のタグだか理解してませんが。

>コメント入力欄の下のバーって何ですか？
coCommentっていうコメント入力を管理するためのものです。後でエントリーにも書くつもりですが、clmemo@akaさんが解説して下さってます。いきなりトンデモない所にコメント付けること良くあるのですが、どこに付けたのか解んなくなってしまう時があるんで、意外と重宝しています。

スクリプトの読み込みが完了していません。