Movable Type 備忘録
MovableTypeのコメントをAjaxで投稿する
- Next Page: FeedBurner移行の失敗談
- Prev Page: CustomFieldsプラグイン活用術 - エントリ画面１
以前から気になっていた、Ajaxを使ったコメント投稿。
最初トライしたときは、投稿はできたのですがプレビューしても投稿されてしまっていたので設置を見送りました。
でも、やっぱり気になってしょうがないので、JSのコードを解析したり、MovableType(ムーバブルタイプ)のコメント投稿時の処理を追いかけたりなどして、やっと原因が分かって設置できることになりました(＞∀＜ )ムフフ
ということで、今回はMovableType(ムーバブルタイプ)のコメント投稿をAjax形式にするカスタマイズを紹介します。
配布元のMT AJAX Comments(http://www.brettdewoody.com/projects/movable_type/mt_ajax_comments/index.php?page=1)さんが、サイトを閉じたようです。
MovableType(ムーバブルタイプ)のコメント投稿をAjax形式にするには、こちらのMT AJAX Comments(http://www.brettdewoody.com/projects/movable_type/mt_ajax_comments/index.php?page=1)から必要なJavaScriptをダウンロードわたしのサイトからお持ち帰りください。
そして、各自の個別エントリ・アーカイブ、コメント・プレビュー、エラー、ペンディングの各テンプレートをカスタマイズすることになります。
また、カスタマイズ手順も紹介されてるので併せて読み進めてください。
▼prototype.jsの入手はこちらから▼
http://www.prototypejs.org/
▼scriptaculous.jsの入手はこちらから▼
http://script.aculo.us/
▼ajaxcomments.jsの入手はこちらから▼
http://www.brettdewoody.com/projects/movable_type/mt_ajax_comments/index.php?page=3
http://bizcaz.com/archives/shoco/ajax/ajaxcomments.js
- 2007.05.19 追記 -
訪問者さんのご指摘により、ajaxcomments.jsをチョビッと変更しました。
43行目に以下のコメントを追加しました。/* - 2007.05.19 - * 上記エフェクト(Effect.Appear)を使用する場合、セクションを表示してしまうと、 * チラッと一瞬見えてしまうので、意図的にコメントにしています。 * document.getElementById(outputDivId).style.display = ''; */okayamaさん、ありがとうですの♪
カスタマイズ
まず、各JavaScriptをサーバにアップロードします。
上記URLから3つのJavaScriptを入手して、サーバにアップロードします。アップロード先はどこでも問題ありません。 各自の環境に合わせてアップロードをしてください。
次に、個別エントリ・アーカイブを変更します。
アップロードしたJavaScriptの定義を以下のように<head>～</head>の間に挿入します。JavaScript読込み
<script type='text/javascript' src='<$MTBlogURL$>ajax/prototype.js'></script><script type='text/javascript' src='<$MTBlogURL$>ajax/scriptaculous.js?load=effects'></script><script type='text/javascript' src='<$MTBlogURL$>ajax/ajaxcomments.js'></script>
- 2007.06.27 追記 -
scriptaculous.js はバージョンアップ(ver 1.7.0)されてますので、ダウンロードした圧縮ファイルを以下のようにアップロードします。
http://●●●.com/ | +--js/ | +-- scriptaculous/ | +-- lib/ | | +-- prototype.js | | | +-- src/ | | +-- builder.js | | +-- controls.js | | +-- dragdrop.js | | +-- effects.js | | +-- scriptaculous.js | | +-- slider.js | | +-- unittest.js | |そして、HTML ヘッダ(<head>～</head>)内を以下のように定義します。
$out .= '<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/lib/prototype.js"></script>'; $out .= '<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/src/scriptaculous.js"></script>'; $out .= '<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/src/effect.js"></script>';prototype.js も同梱のもの(ver1.5.0)を使用するようにしてください。
以上で最新(ver1.7.0)の scriptaculous.js で同様のエフェクトを付けることができます。青い字の部分を各自の環境に合わせて修正します。
次にコメント・フォームを変更します。
以下のおおまなかコードは、コメント・フォーム辺りのコードになります。コメント・フォームのカスタマイズ
<div id="comment_posted"></div><div id="comment_form_block"><MTEntryIfCommentsOpen><form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments_form"name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)"><p><MTIgnore><input type="hidden" name="static" value="1" /></MTIgnore><input type="hidden" name="entry_id" value="<$MTEntryID$>" /></p><div class="comments-open" id="comments-open"><h3 class="comments-open-header">POST A COMMENT</h3><div class="comments-open-content">：：：<p id="comments-open-footer" class="comments-open-footer"><MTIgnore><input type="submit" id="comment-preview" accesskey="v" name="preview" value="Preview" /><input type="submit" id="comment-post" accesskey="s" name="post" value="Post" /></MTIgnore><input type="submit" id="comment-preview" accesskey="v" value="Preview" onclick="return ajax_comment_preview('comment_posted', 'progress');" /><input type="submit" id="comment-post" accesskey="s" value="Post" onclick="return ajax_comment_post('comment_posted', 'progress');" /><img id="progress" style="display:none;" src="<$MTBlogURL$>image/ajax-loader.gif" alt="Loading..." /></p></div><!-- comments-open-content --></div><!-- comments-open --></form></MTEntryIfCommentsOpen></div><!-- comment_form_block -->
青い字の部分を<MTEntryIfCommentsOpen>の上辺りに追加します。
Ajaxの出力結果はココに表示されます。そして<MTEntryIfCommentsOpen>～</MTEntryIfCommentsOpen>を緑の字の部分で囲むように追加します。
次に赤い字の部分を削除します。
行自体を削除しても構いませんが、<MTIgnore>～</MTIgnore>で挟むと、MovableType(ムーバブルタイプ)は対象外としてくれるので便利ですよ。今度はカーキ色の部分をそのままコピペしてください。
見比べれば分かると思いますが、name=""属性が削除され、onclick=""属性がそれぞれ追加されています。ここでは、まずajaxcomments.js内のajax_comment_postまたは、ajax_comment_previewを実行してから、本来のMovableType(ムーバブルタイプ)のコメント処理を実行するようにしています。
最後にピンクの字の部分ですが、コメント投稿時の処理中イメージを表示させています。
こちらのAjaxload - Ajax loading gif generatorからお好みのイメージを作成して、サーバにアップロードします。
そして、各自の環境に合わせてURLを変更してください。一通り変更したら保存して再構築します。
次にコメント・プレビュー、コメント・エラーそして、コメント・ペンディング(保留)の各テンプレートを変更します。
これらは、それぞれのメッセージ表示するためだけに必要なので、適当なメッセージを表示するよう変更します。以下にわたしが使用しているコードを記します。
コメント・プレビュー用メッセージ
<MTIfCommentsActive><div id="comments" class="comments"><div class="comments-header">YOUR COMMENT</div><!-- ▼コメント確認▼ --><div id="preview"><div class="comments-content"><!-- ▼コメント本文▼ --><dl class="comments-content"><dt>» <$MTCommentPreviewAuthorLink default_name="Anonymous" spam_protect="1"$> さん</dt><dd><$MTCommentPreviewBody$></dd><dd class="comment-footer"><$MTCommentPreviewDate language="en" format="%B %e, %Y"$></dd></dl><!-- ▲コメント本文▲ --></div></div><!-- preview --><!-- ▲コメント確認▲ --></div><!-- comments --></MTIfCommentsActive>
コメント・エラー用メッセージ
<div class="comments"><div class="comments-header">COMMENT SUBMISSION ERROR</div><div class="comment-content"><p>YOUR COMMENT SUBMISSION FAILED FOR THE FOLLOWING REASONS:</p><fieldset><p><$MTErrorMessage$></p></fieldset></div><!-- /comment-content --></div><!-- comments -->
コメント・保留用ペッセージ
<div class="comments"><div class="comments-header">THANK YOU FOR COMMENTING</div><div class="comment-content"><p>YOUR COMMENT HAS BEEN RECEIVED AND HELD FOR APPROVAL BY THE BLOG OWNER.</p></div><!-- comment-content --></div><!-- comments -->
各テンプレートの内容をそれぞれのメッセージで書き換えて保存します。
もちろん、書き換える前にバックアップとってくださいね (￣∇￣)b一通り書き換えたら完了です。
では、動作確認してみてください。
画面切り替えせずにプレビュー、投稿エラー、投稿正常ができればOKです。
以上で、MovableType(ムーバブルタイプ)のコメント投稿をAjax形式にすることができました。
コメント投稿時に画面切り替えがないので、とっても気に入ってます(●＞∀＜●)
SEE YOU♪
Trackback Pings(5)
- from
オラオラ
実は、まだ懲りてなくて未だにテスト続けてます。 AjaxComment テスト用のサイトです。 その後プレビュー問題は、bzbellさんの活躍「Mova...
- from
ふかふか館
今までは、コメントを投稿する場合、画面遷移が発生していたのですが、Ajax形式...
- from
3xStars
以前に読者の方からいただいたコメントが重複してたので、コメント投稿の流れがあまり...
- from
Music Maniacs
ずっと導入してみたかった Ajax なコメント投稿をようやく実装することに成功しました。 具体的にどんな動きをするのかは、口で説明するより実際にこのエント...
- from
Moritake Blog
こんな問題があったらしい。 http://www.sixapart.jp/cgi...
Comments(81)
- #3: Posted by bzbell [RES]
>>2 GUTS さん
こんにちわ^^
ぜひ、GUTSさんとこでも設置してください♪
Ajaxっておもしろいですね。
最近ちょと凝ってるんです♪> 解析するのって結構楽しいですよね
元々わたしはプログラマさんじゃない(ごく普通のOL)ので最初辛かったです。
見るものすべてが何だこりゃ？！ってかんじで(＞∀＜ )
今でもアヤフヤなのが"関数"です。
読むことはできますが、人には説明できません（つω-`｡）とほほGUTSさん"Blog for SMDL"以外にもブログ持ってるんですね。
勝手ながらリンクさせていただきましたぁ♪
- #4: Posted by oscar [RES]
こんにちは、bzbellさん。
ついに完成ですね。
私も最後までプレビューにならずに投稿されちゃうので悩んでました。
これ、やってみるまで気がつかないけど、エラーや保留のテンプレートもまんま同じ場所に表示されちゃうんですよね。
結構そうなる事忘れやすい。あと、最近思うんですけど、保留のテンプレートって自分の投稿した内容が表示されないじゃないですか。あれって出してあげた方がいいかもって思いませんか？
- #5: Posted by ssgg [RES]
ajax勉強している最中でこのサイトと投稿を見ました。
とても便利ですね。ユーザビリティもよくなるので自分も試してみたいです。
これからも色々見て勉強させてもらいます！！
- #6: Posted by bzbell [RES]
>>5 ssgg さん
はじめまして^^
> ajax勉強している最中でこのサイトと投稿を見ました。
同じくわたしも勉強中です(￣∇￣)/
> とても便利ですね。ユーザビリティもよくなるので自分も試してみたいです。
同感♪ ユーザビリティ重要ですよね。
わたしのブログの性質上、メモなので訪問者さんが目的の記事を探しやすいような、ユーザビリティを模索中なんです。
カンタンにユーザビリティといっても、なかなか奥が深いです（つω-`｡）> これからも色々見て勉強させてもらいます！！
はい♪ こちらこそよろしくお願い致します。
- #7: Posted by ぴー [RES]
スゴいっす。早速テス。
- #9: Posted by ajax [RES]
すごいですね。
参考にさせてもらもらってます。
- #10: Posted by bzbell [RES]
>>9 ajax さん
こんにちわ^^
どうぞ、どうぞ♪
他にも恩恵がありまして、わたしはテンプレートをコロコロ変えます。その際、このカスタマイズを行っておくとコメント・プレビュー、保留、エラーの各テンプレートはそのまま使えちゃいます(￣∇￣)b
- #11: Posted by fag [RES]
こんばんは！
Ajax風なメールフォームを設置するから調子に乗って，
MovableTypeのコメントをAjaxで投稿するにもチャレンジしてみましたが
プレビューや投稿すると，投稿したものが表示される部分の場所に404エラーが出てしまいました(￣(エ)￣)ゞ 。
何かパスが間違ってるのでしょうか???ちなみに，スパム対策でscodeプラグインを入れています。
サブドメインの設定でブログ自体の公開サイトURLはmtフォルダのドメインと違っています。
あとプレビューのときにはajax-loader.gifが表示されません。。。。
良いアドバイスがあれば宜しくお願いいたします！
- #12: Posted by bzbell [RES]
>>11 fag さん
こんにちわ^^
> ちなみに，スパム対策でscodeプラグインを入れています。
あっ!! Scodeプラグインとは相性悪いかも、です。
わたしも以前Scodeプラグイン設置してましたが、とりはずしました。
わたしの場合は別の要因で取り外したのですが、今回の件も起因してるかも、です。なので、わたしはCAPTCHAによるスパム対策はやめて、別なスパム対策を施しています。
> あとプレビューのときにはajax-loader.gifが表示されません。。。。
そうですね。
デフォルトではプレビュー時はイメージローダーは表示されないです（￣∇￣）
わたしのカスタマイズを記します。変更前 function ajax_preview() { var url = '/mt/mt-comments.cgi'; var pars = Form.serialize('comments_form')+'&preview=Preview'; var myAjax = new Ajax.Updater( 'comment_posted', url, { method: 'post', parameters: pars, onComplete: highlight_preview }); return false; } 変更後 function ajax_preview() { document.getElementById('progress').style.display = ''; var url = '/mt/mt-comments.cgi'; var pars = Form.serialize('comments_form')+'&preview=preview'; var myAjax = new Ajax.Updater( 'comment_posted', url, { method: 'post', parameters: pars, onComplete: highlight_preview }); return false; }
- #13: Posted by fag [RES]
イメージローダー表示されました!
ありがとうございます。ただ，投稿したものは404エラーになったままです。^( ToT)^
scode外してみたんですが変化なしだったみたいです。
気長に考えてみます。う～～む
- #14: Posted by bzbell [RES]
>>13 fag さん
度々です(ｏ￣∀￣)ノ
> ただ，投稿したものは404エラーになったままです。^( ToT)^
>>12で記したコード内にmt-comments.cgiのURLを指定していますが、そちらのパスはどうでしょう。
考えられるのってそこくらいですよねぇ。
- #15: Posted by 起動戦車ガンタンク [RES]
忘さんのオススメもあり挑戦してみましたが、3.33環境下
ではコピペのみでは見事に撃沈されました。コピペだけで
利用できるカスタマイズが少なすぎるのが新規でＭＴを利
用した私の悩みの種ですorz
- #16: Posted by bzbell [RES]
>>15 起動戦車ガンタンク さん
こんにちわ^^
わたしJSの方のそのパスについて、ぜんぜん説明してませんでしたね（;￣∇￣A
ごめんなさい。
- #17: Posted by fag [RES]
＞>>12で記したコード内にmt-comments.cgiのURLを指定していますが、そちらのパスはどうでしょう。
考えられるのってそこくらいですよねぇ。
その
var url = '/mt/mt-comments.cgi'; は
本来どこからのパスになるんですか？？
- #18: Posted by bzbell [RES]
>>17 fag さん
こんにちわ^^
> 本来どこからのパスになるんですか？？
おぉΣ(￣Д￣；)!!
失礼しました。Ajaxのスクリプト( ajaxcomments.js )がある場所からのパスだと思います。
なので、わたしは絶対パスで、ルートからのパスを指定しています。
- #19: Posted by fag [RES]
こんにちはー(^-^*)/
も一度聞いていいですか?
わたしの環境は，具体的に以下になりますが，var url = '/mt/mt-comments.cgi';のとこのパスは何が考えられますでしょうか?低レベルでかなり申し訳ないですが，確認ってコトでアドバイスをください！http://●●●.com/cgi/mt/mt-comments.cgi と
http://●●●.com/js/ajaxcomments.js と
http://○○○.●●●.com/category/sub-category/entry.php (サブドメイン)
- #20: Posted by bzbell [RES]
>>19 fag さん
こんにちわ^^
上記環境ですと、以下のようなパスにしたらどうでしょう(￣∇￣)b
"/cgi/mt/mt-comments.cgi"ルートからの絶対パスとなります。
これによりajaxcomments.jsがどこにあっても、ルーからのパスで実行されます。
- #21: Posted by fag [RES]
どうもーー。何度もすみませんm(。・ε・。)m
＞"/cgi/mt/mt-comments.cgi"
やっぱりそうですよね～～。404になるんですよぉ。
- #22: Posted by bzbell [RES]
>>21 fag さん
う～ん（つω-`｡）
考えられることは、- mt-comments.cgiがない or パーミッション違い
- mt-comments.cgiに渡すパラメータが違う
があると思うのですが、たとえば、Postしたときローダーイメージは表示されるわけですよね。
ということは、ajaxcomments.jsは実行されてることになりますが、そうするとやっぱりそこのパスか、もしくはパラメータ指定に不備がある…となりますよね。記事にもあるように、Post、Previewの各inputタグの属性にデフォルトでは、nameを指定していますが、そちらは削除されてますか。
これが残ったままだと、コメント一覧のテンプレートが使用されていました。
試しに、コメント一覧をバックアップして、区別しやすいように適当な文字を入れて再構築した場合、どんなメッセージが表示されますか。あと、404エラーが表示された場所って、<div id="comment_posted"></div>の場所に表示されるのですよね!?
たぶん、わたしが想像するにそこら辺に何かあるように思います。
パスはfagさんもご承知のパスで問題ないと思うんですよねぇ。
- #23: Posted by m00a0370ggtt [RES]
スゴイですね！
友人にも紹介させて貰いました。
- #24: Posted by m00a0370ggtt [RES]
Ajaxではそのjsがあるドメインの外部のファイルは触れないと思うので、fagさんのようにhttp://○○○.●●●.com/とhttp://●●●.com/でMovable Typeスクリプト本体とそのブログ公開URLが異なるサブドメインに置かれている場合はajaxcomments.jsでのコメント投稿は不可能なんじゃないでしょうか？
- #25: Posted by bzbell [RES]
>>24 m00a0370ggtt さん
はじめまして^^
えっΣ(￣Д￣；)!!
m00a0370ggtt さんが言われていることって、たとえば、
そうなんですかっ!!① http://domain.com/ のサイトパスは /home/www/ ② http://sub.domain.com/ のサイトパスは /home/www/sub/
の場合、ルート('/')はそれぞれ、① /home/www/ の位置になる ② /home/www/sub/ の位置になる
ということでしょうか。 ＃間違ってたらすいません。わたしってきり、ルート('/')はどれも /home/www/ の位置なのかと思ってました（￣□￣；）
どうしよ（つω-`｡）
ということはfagさんの環境下だと、HOMEからmt-comment.cgiがある場所の絶対パスを指定すればOK!!…ということですか。
- #26: Posted by m00a0370ggtt [RES]
参考までに、このブログ主さんはmt.cgiなどMT本体をインストールしているのはbizcaz.comのサブディレクトリ内でしょうか？fagさんの場合はMT本体はホストを●●●.comに置いて、ブログを公開するホストは○○○.●●●.comになっているということですよね？
Javascriptでは異なるホストのファイルにアクセスできないのだとしたら、MT本体があるホスト内で公開しているブログ以外ではこのAjaxによるコメント投稿スクリプトが使えないのではないでしょうか？Ajaxスクリプトがmt-comment.cgiにアクセスしようとしても、mt-comment.cgiが別のホストにあるためにアクセスできない、そういう可能性はありませんか？
ここでいうホストというのは、URLのうち「http://」以降で「ディレクトリを表す最初のスラッシュ」以前の部分、すなわちドメインとサブドメインまでの部分のことです。
私もAjaxに関してはかなり初心者なので、間違っていたら指摘してください。
- #27: Posted by bzbell [RES]
>>26 m00a0370ggtt さん
こんにちわ^^
> Javascriptでは異なるホストのファイルにアクセスできないのだとしたら、MT本体があるホスト内で公開しているブログ以外ではこのAjaxによるコメント投稿スクリプトが使えないのではないでしょうか？
たぶん、それはないのではないでしょうか。
実際、他の人のホスト上のJSをテンプレ内に記述して使ったことありますので…。
つか、Google Analytics とか Google AdSense ってJSですよね。
他にもフリーのアクセス解析などにもJSが使われてたりします。
これらはすべてわたしからすれば外部ホストになりますよね。それに、MT内でもデフォルトでJSが使われていますよね。
もし使えなかった場合、Ajax以前にMTの一部機能が使えない…制限付きってことになります。または、通常ではNGだけどホスト側で何らかの設定すればOKなのかもしれませんね(￣∇￣)b
意識したことないので断言はできませんが、そのようなトラブルの記事って見たことないです。
わたし的には、サブドメインといっても、サイトパス的にはドメインの環境下なので、仮にURLによる参照がダメでもサイトパスなら問題ないのでは?…と思ってましたが、どうでしょ。
的外れなお返事でしょうか。
スキル不足ではっきりしたことお答えできなくてすいません（つω-`｡）
- #28: Posted by enjoy [RES]
とても素敵です~~~~
- #29: Posted by moory [RES]
テストさせてもらいます(^▽^;)
- #30: Posted by bzbell [RES]
>>29 moory さん
はじめまして^^
> テストさせてもらいます(^▽^;)
どうぞ、どうぞ♪
エントリごとにコメントの認証あり／なしとか設定できればいいのにねぇ。ちなみに、今はこちらのAjaxによるCAPTCHA認証をやってみるに変更しています。
なので、多少見た目に違いがありますし、コードも異なりますけど、わたし的にはオススメの一品ですの(￣∇￣)b
- #31: Posted by tera5896 [RES]
はじめまして。
やってみたいけどやり方がわからなかったのですが、ココを発見して出来ました！
いや～感謝感謝です。
自分の環境ではmt-comments.cgiをリネームしていたので、そのまま設置したら管理画面が出てあせりました（笑プレビューではフォームが残るんですがエラー画面だとフォームが残りませんね・・・。
これはどうやって解決すれば良いのでしょう？
- #32: Posted by bzbell [RES]
>>31 tera5896 さん
はじめまして^^
> プレビューではフォームが残るんですがエラー画面だとフォームが残りませんね・・・。
はい。
えとですね(;￣∇￣A、結論から言いますとできません。
というのは、Ajaxからすると、非同期通信が正常／異常によるエラー処理というのはできるようなのですが、コメント投稿に対するエラーについては関知してないからなんです。なので、一応わたしが考えている対策としては、
- コメント・保留テンプレート内に'OK'、コメント・エラーテンプレート内に'NG'という文字列を入れる
- Ajaxの受信処理でその文字を判断することで、正常に投稿された場合には正常用メッセージを表示し、フォームを隠す、エラー時はエラーメッセージ表示してフォームを残す
などの条件判定ができると思います。
ただし、ご存知のようにコメント・エラー時にはMTによる動的メッセージが生成されますので、そういった機能が使えなくなります。
言い換えると、正常時と同様にエラー時も、固定メッセージ表示で問題なければ上記方法で対応可能かと思います。こういった理由で、わたしのサイトでは、正常／異常問わずフォームを表示しっぱなしにしています。
でも、これだとエラーしたと勘違いする!? ようで、2重投稿される人もいるので、一応わたしが考えているのは上記方法になります。受信文字列による条件判断については、AjaxによるCAPTCHA認証をやってみるでやってますので、参考にしてください。
- #33: Posted by tera5896 [RES]
>>32 bzbell さん
お返事ありがとうございます。
なるほど～、出来ないんですね。
素人考えで出来るのではないかと色々といじってましたが、出来ないとわかってスッキリしました（笑フォームを表示しっぱなしというのは、どうすれば良いんでしょうか？
質問ばかりで申し訳ありません。
お手の空いているときにでも、押し背手頂ければ幸いです。
- #34: Posted by bzbell [RES]
>>33 tera5896 さん
> フォームを表示しっぱなしというのは、どうすれば良いんでしょうか？
はい。
ajaxcomments.js内の以下の太字の1行を削除または、コメントすればフォームは残ったままになります。function highlight_comment() { new Effect.Fade('comment_form_block', { duration: 0.2, queue:'end' }); new Effect.Appear('comment_posted', { duration: 0.5, queue:'end' } ); new Effect.Highlight('comment_posted',{ startcolor: '#FF9933', duration: 2.0 }); }
- #35: Posted by tera5896 [RES]
ありがとうございます！
おかげさまで自分のしたい事ができました。
短時間の間に的確に答えていただき、まことにありがとうございました。
- #36: Posted by nuts [RES]
はじめまして。
こちらを参考にさせて頂き、カスタムに挑戦中です。
何とか出来たと思いテストをしてみた所、プレビューボタンを押してもポストボタンを押しても
真っ白の画面になってしまいます。
URLを確認すると直接mt-comments.cgiに飛んでいました。長くなってしまいますが、私の書いたソースを以下記述します。
<div id="comment_posted"></div> <div id="comment_form_block"> <MTEntryIfCommentsOpen> <img id="progress" style="display:none;" src="<$MTBlogURL$>image/ajax-loader.gif" alt="Loading..." /> <form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments_form" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)"> <input type="hidden" name="entry_id" value="<$MTEntryID$>" /> <!-- コメント投稿フォームタイトル --> <div class="comments-open" id="comments-open"> <h2 class="comments-open-header">POST A COMMENT</h2> <div class="comments-open-content"> <script type="text/javascript"> writeTypeKeyGreeting(commenter_name, <$MTEntryID$>); </script> <!-- コメント投稿フォーム開始 --> <div id="comments-open-data"> <div id="name-email"> <label for="comment-author">NAME:</label><br /> <input id="comment-author" name="author" size="30" /> <br /> <label for="comment-email">E-MAIL:</label><br /> <input id="comment-email" name="email" size="30" /> </div> <label for="comment-url">URL:</label><br /> <input id="comment-url" name="url" size="30" /> <br /> <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" /> Save your information?</label> </div> <div id="comments-open-text"> <label for="comment-text">COMMENT: <MTIfAllowCommentHTML>(You can use HTML tags)</MTIfAllowCommentHTML></label> <textarea id="comment-text" name="text" rows="8" cols="50"></textarea> </div> <p id="comments-open-footer" class="comments-open-footer"> <input type="submit" id="comment-preview" accesskey="v" value="Preview" onclick="return ajax_preview();" /> <input type="submit" id="comment-post" accesskey="s" value="Post" onclick="return ajax_post();" /> </p> <!-- コメント投稿フォーム終了 --> </div> <!-- /comments-open-content --> </div> <!-- /comments-open --> </form> </MTEntryIfCommentsOpen> </div> <!-- comment_form_block -->
ソースに間違いがあるからなのでしょうか？それともjsファイルかcgiファイルに不備があるのでしょうか。
アドバイスを頂けるととても助かります。
よろしくお願い致しますm(_ _)m
- #37: Posted by bzbell [RES]
>>36 nuts さん
はじめまして^^
XHTML的には問題なさそうです。
ただし、ajaxloadのイメージ表示がないので、記事内で紹介しているのピンクの字の行を追加して、イメージファイルをアップロードしてください。以下のことを確認してみてください。
- ajaxcomments.js内のajax_post()とajax_preview()に、mt-comments.cgiへのパスが記述されています。 デフォルトでは、/mt/mt-comments.cgi となっていますが、nuts さんの環境と合ってますでしょうか。 URLだと ttp://●●●.com/mt/mt-comments.cgi という場所にmt-comments.cgiが存在してることを前提としています。 なので、nuts さんの環境に合わせてmt-comments.cgiへのURLに変更する必要があります。
- ajaxcomments.jsなど3つのJavaScriptを追加してます。これらのJavaScriptをロードするよう追加してますでしょうか。追加の仕方は記事内で紹介してます。
- 記事内で紹介してるように、コメント・プレビュー、コメント・保留そして、コメント・エラーのテンプレートの内容を変更しています。各テンプレートは変更されてますでしょうか。
1番疑わしいのは、上記1.だと思います (￣∇￣)b
- #38: Posted by nuts [RES]
>>37 bzbell さん
早速のご返信ありがとうございます＾ ＾
ajaxloadのイメージ表示なのですが、bzbellさんの記述例どおりに送信ボタンの下にイメージ表示を入れると、ボタンの横でajaxloadのイメージがクルクル回ってしまうんです＞＜
なので、<form method="post" ～>の下にイメージ表示を入れてみています。<div id="comment_posted"></div> <div id="comment_form_block"> <MTEntryIfCommentsOpen> <form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments_form" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)"> <img id="progress" style="display:none;" src="<$MTBlogURL$>image/ajax-loader.gif" alt="Loading..." /> <input type="hidden" name="entry_id" value="<$MTEntryID$>" />
こんな感じです。
ajaxcomments.js内mt-comments.cgiへのパスですが絶対パスで指定していたものをURLで指定する様にしてみました。
ご指摘の2.に関しては指定してあり、3.に関してはbzbell さんのソースをそのまま使用させて頂きました。
テンプレートのコメント一覧にも表示指定を入れてあります。これでテストしてみると、previewボタンでもpostボタンでも押すとコメント一覧のテンプレートに飛んでしまいます。
なのでコメント一覧のテンプレートを白紙に戻すと、ボタンを押した際画面に何も出なくなってしまいます。そして、どちらのボタンを押してもコメントが投稿されたというメールが来るのですが確認してみるとコメントが投稿されていません。。。
管理画面のコメントから確認してもコメントが入ってきていません。色々確認したのですが、どうしても解決できません。
何度も質問してしまってごめんなさい。。
初心者の為見落としがあっても気付いていないのかもしれません。
どうかお力をお貸し下さい。
- #39: Posted by bzbell [RES]
>>38 nuts さん
> ボタンの横でajaxloadのイメージがクルクル回ってしまうんです＞＜
あっ!! ごめんなさい、追加されてましたね（;￣∇￣A
表示する場所はどこでも構わないのですが、ボタンクリックしていないのにクルクル回ってるんですか!?> previewボタンでもpostボタンでも押すとコメント一覧のテンプレートに飛んでしまいます。
飛んでしまう･･･ということは、ページ移動されてるということですね!?
ajaxloaderのクルクルはpreviewボタンまたは、postボタンをクリックにより非表示⇒表示になった･･･という認識でよいでしょうか。とすると、ajaxcomments.jsは正しくロードされてるけど、その先のajaxが正しく行われていないとなりますね。
1番いいのは、nutsさんの個別エントリ・テンプレートおよび、ajaxcomments.jsを解析できれば話は早いのですけど（;￣∇￣A
お手数ですが、ページ上部にある『CONTACT(メール)』から、わたし宛てにnutsさんの作った、以下の3点を教えていただけますか。- 個別エントリ・テンプレートを添付していただけますか
- ajaxcomments.jsを添付していただけますか
- nutsさんのサイトのURLとMTのインストール先URLを教えてください
このカスタマイズが正常に動作した人と、しない人がいるようなんです。
以前にも同じような人がいたのですが、結局それっきり連絡とれず、原因が分からないままでいたんです。無理強いはしませんが、nutsさんが教えてもいいよ･･･ということでしたら、上記情報から原因追求してご連絡したいと思います(￣∇￣)/
その前に1つ確認していただきたいことがあります。
ajaxcomments.js内のmt-comments.cgiのパスまたはファイル名をありえないものにした場合、どのような表示されるか確認していただけますか。想定では、Ajaxが正しく動作していれば、そんなファイルないよ･･･ということで、404 Not Foundと表示されるはずです。
- #40: Posted by nuts [RES]
>>39 bzbell さん
早速アドバイスを頂いたのにお返事が遅くなりごめんなさいm(_ _)m
すごく初心者的な発言で唖然とされるかもしれませんが、もしかしてこれってphpにしないと動作しなかったりしますか？
phpは全く分からないのでhtmlでサイトを構築しています。
もしかしたらそのせいで動作しないのではないかという気がして...＞＜色々なメリットを考えるとphpを勉強しなければ！と思うのですが、なかなか出来ず。。
もっと頑張らなくちゃと思う今日この頃です。今は、コメントに関するテンプレートをカスタムし、ページが移る事なく動作が進んでいる様に見える様にカスタムしました。
これから色々勉強し、より良いサイトを作れる様頑張ろうとおもいます。
色々本当にありがとうございました＾＾
- #41: Posted by bzbell [RES]
>>40 nuts さん
こんにちわ^^
> もしかしたらそのせいで動作しないのではないかという気がして...＞＜
いえ、ブログのPHP化を行ってなくてもできますよ (￣∇￣)b
ただし、Ajaxを使用するのでブラウザでJavaScriptを有効にしている必要があります。> これから色々勉強し、より良いサイトを作れる様頑張ろうとおもいます。
わたしも的確に答えられるよう勉強しておきます (;￣∇￣A
- #42: Posted by ああああああああああああああ [RES]
すごいですね
これからも頑張ってください。
- #43: Posted by す [RES]
このテクニックはSEO的に問題はないのでしょうか？
教えてください。
- #44: Posted by bzbell [RES]
>>42 ああああああああああああああ さん
ありがとうございます。
>>43 す さん
ご質問の件ですが、AjaxがSEO的にマイナスかどうかということでしょうか。
それとも、mt-comments.cgiによるページ表示を行わないことが問題ということでしょうか。
SEOに詳しいわけではないので問題視してるところが何なのか分かりませんが、問題ないのではと思ってます。訪問者さんが投稿するコメントを、ただJavaScriptでプレビューなどするだけだし、mt-comments.cgiによるページ表示したことでどれだけSEOに影響するのかさえ知りませんから（;￣∇￣A
ただ、だいぶ前に 'display:none' で意図的に非表示するようなことはSEO的にマイナス…という記事を読んだことあります。実際のところどうか分かりませんし、気にしたことありません。
- #45: Posted by もっふぉ [RES]
はじめまして。
いつも大変参考にさせて頂いております。
上記のnutsさんと全く同じ症状で今悩んでいるのですが、
こちらは解決されたのでしょうか？？
- #46: Posted by bzbell [RES]
>>45 もっふぉ さん
はじめまして^^
nuts さんはその後ご連絡がないので結果的に解決されたのかどうか分かりませんが、もっふぉ さんも同じ現象だとすると同様に、ajaxcomments.jsで記述しているmt-comments.cgiのパスなどにミスがないか確認してみてください。
ぶっちゃけて書くと、わたしのサイトでは以下のようなディレクトリ構成になっています。http://bizcaz.com/ +--- mt/ +--- mt-comments.cgi
上記の場合、ajaxcomments.jsのmt-comments.cgiへのパスは以下のようにします。/mt/mt-comments.cgi or http://bizcaz.com/mt/mt-comments.cgi
それでも正しい動作しない場合には、ページ上部にあるメールフォームから差し支えなければ、
- ajaxcomments.js
- エントリ・アーカイブのテンプレート
- もっふぉ さんのサイトのURL
- MTのインストール先(URL)
を添付していただければ対応いたします。
- #47: Posted by もっふぉ [RES]
>>46 bzbell さん
ご丁寧にご回答頂きましてありがとうございます。
ajaxcomments.jsを洗ってみたのですが、こちらは問題ありませんでした。
再度、ソースを検証してみたところ
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" id="comments_form" name="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
の箇所の 『id="comments_form"』 がデフォルトでは入っていなかったため質問した現象が起きたようでした。
（Movable Type3.33です）
こちらはどのような意味を持つのでしょうか？？
- #48: Posted by bzbell [RES]
>>47 もっふぉ さん
> こちらはどのような意味を持つのでしょうか？？
はい。
comments_formをIDにして、正常に通信が行われて、mt-comments.cgiから応答が返ってきた場合に限り、コメントフォームを非表示にするためのものです。参考までに、Ajax(現状のスクリプト)からしたらMTのコメント投稿の結果(正常／異常)を判断することができなく、ただ通信が正常に行われたか否かでしか判断できないため、わたしは正常投稿時でもコメントフォームは非表示にしてませんでした。
- #49: Posted by もっふぉ [RES]
>>48 bzbell さん
すばやくご対応頂きましてありがとうございます。
一応コメントの投稿はできるようなのですが、Mobableのコメント設定で即時に公開するコメントを「すべて」として、コメントを投稿するとローダーの画像が消えず画面が遷移しません。
（その際PreviewとPostのボタンは押すことができません）
更新ボタンを押すと投稿できているようなのですが、こちらは正常な動作なのでしょうか？？
質問ばかりで誠に申し訳ございません。
- #50: Posted by bzbell [RES]
>>49 もっふぉ さん
その前に、先ほどcomments_formを間違って説明してしまったので、訂正させてください。
comments_formはフォーム内の各入力データを取得するために使用されます。
comment_form_blockというのが、正常時にフォームを非表示するためのIDとなります。<div id="comment_posted"></div>でプレビュー内容やメッセージが表示される場所になります。
そして、<div id="comment_form_block">～</div>で括ったところが正常時に非表示される場所になります。
この時ajaxcomments.js内のhighlight_comment()が実行されます。
即時公開に設定した場合でも上記関数が実行されますので、もっふぉ さんに確認して頂きたいことは、非表示ブロック( <div id="comment_form_block">～</div> )の中にローダーイメージが含まれてますでしょうか。
非表示ブロック外だとローダーイメージは表示されっぱなしになってしまいます。
- #51: Posted by test [RES]
どんな感じなのか貯めさせて頂きます
- #52: Posted by tatsuya [RES]
テストさせてください
- #53: Posted by テスト投稿 [RES]
テスト投稿させてください。
- #54: Posted by tetsu [RES]
はじめまして、コメントのAJAX化でこちらにたどり着きました。
親切な説明なので私も早速と思ったのですが、
本家のbrettdewoody.comさんがサービス中止？してしまっているみたいでソースをダウンロードできませんでした。ぶしつけで申し訳ないのですが良かったらソースをいただけませんでしょうか？
ご検討よろしくお願いいたします。
- #55: Posted by bzbell [RES]
>>54 tetsu さん
はじめまして^^
返事が大変遅くなりました (;￣∇￣A すいません。
さっそくですが、オリジナルは見つかりませんでした。
その代わり以下にわたしが使ってるajaxcomments.jsを記します。ajaxcomments.js var outputDivId = 'comment_posted' var outputProgress = 'progress' function ajax_comment_post(divId, divProgress) { outputDivId = divId; outputProgress = divProgress; document.getElementById(outputProgress).style.display = ''; var url = 'http://●●●.com/●●●/mt-comments.cgi'; var pars = Form.serialize('comments_form')+'&post=post'; var myAjax = new Ajax.Updater(outputDivId, url, { method: 'post', parameters: pars, onComplete: ajax_comment_complete }); return false; } function ajax_comment_preview(divId, divProgress) { outputDivId = divId; outputProgress = divProgress; document.getElementById(outputProgress).style.display = ''; var url = 'http://●●●.com/●●●/mt-comments.cgi'; var pars = Form.serialize('comments_form')+'&preview=preview'; var myAjax = new Ajax.Updater(outputDivId, url, { method: 'post', parameters: pars, onComplete: ajax_comment_complete }); return false; } function ajax_comment_complete() { new Effect.Appear('comment_posted', { duration: 0.5, queue:'end' } ); new Effect.Highlight('comment_posted',{ startcolor: '#beeb56', duration: 2.0 }); document.getElementById(outputProgress).style.display = 'none'; }太字の部分をtetsu さんの環境に合わせて変更します。
ajax_comment_complete()内の太字の部分がプレビュー／投稿時にハイライトされる箇所になります。
※わたしのサイトではここの部分を削除しています。使い方は同じです♪
オリジナルをお渡しできなくてすいません (m;_ _)mペコ
- #56: Posted by tetsu [RES]
>>55 bzbell さん
対応ありがとうございます。
早速使わせていただきます。
変なお願いで失礼いたしました。これからも参考にさせていただきます。
それでは！
- #57: Posted by okayama [RES]
bzbell 様
はじめまして。
投稿の雰囲気を知るためのテストをかねてコメントさせてください。
エントリにてajaxcomments.jsへのリンクを張っていらっしゃいますが、
このスクリプトのajax_comment_post関数では出力するセクションのidを非表示にするよう
指定されているようです。↓これ
document.getElementById(outputDivId).style.display = 'none';mt-comments.cgiからのレスポンスを受信後に実行されるajax_comment_complete関数においても
このセクションが非表示のままなので、この状態では
結果が表示されないことになってしまうのではないでしょうか。ajaxはブラウザからソースを見ても反映されないので、このことに気づいていなければ
スクリプトの実行がうまくいっていないのではないか…と考えてしまいがちです。 ＜ これ私なので、結果を出力する際に、このセクションを表示するように
スクリプトを書き換えておいてあげると皆様非常に助かるのではないでしょうか。↓こんな感じに
new Effect.Appear(outputDivId, { duration:3.0, queue:'end' } );
document.getElementById(outputDivId).style.display = '';↓または
new Effect.Appear(outputDivId, { duration:3.0, queue:'end' } );
document.getElementById(outputDivId).style.display = 'block';よろしければ参考までに。
- #58: Posted by bzbell [RES]
>>57 okayama さん
はじめまして^^
ご指摘ありがとうございます♪
実は視覚的な話でして、エフェクトを使用した場合、セクションを明示的に表示してしまうとチラッと見えてしまうんです。
なので、意図的に記述していないんです (;￣∇￣Aでも、okayama さんの言われるように、明示的に記述した方が親切ですね♪
さっそく反映します。
- #59: Posted by ｔｔｔ [RES]
テスト
- #60: Posted by Tatsuya [RES]
投稿はうまくいくのですが、投稿完了のメッセージが表示されません。
また、プレビューメッセージも表示されません。<div id="comment_posted"></div>
はどこに記述しても良いのでしょうか？
現在は、MTIfCommentsActiveタグ内に記述しているのですが、これだとまずいのでしょうか？
- #61: Posted by Tatsuya [RES]
無事、プレビューの確認なども出来たのですが、コメントに管理人の了承を得る場合はいいですが、即時反映させたい場合はこのままではコメントしてすぐに画面遷移せずに投稿したコメントを表示するというのは無理ですよね？
- #62: Posted by bzbell [RES]
>>61 Tatsuya さん
こんにちわ^^
よかったぁ (●´∀｀●)
即時投稿の件ですが、それは無理ですねぇ (;￣∇￣A即時投稿だとその場で再構築が発生するので訪問者さんを待たせることになります。
なので、わたし的にはあまり好まないんですけどね。
- #63: Posted by [匿名] [RES]
どうなるんだろう
- #64: Posted by oscar [RES]
＞即時反映させたい場合はこのままではコメントしてすぐに画面遷移せずに投稿したコメントを表示するというのは無理ですよね？
確かオリジナルの AjaxComment は、そのように動作していたと思います。
CommentCGIからの戻りを、表示するようにすれば、いけた筈です。
ですから再構築動作を待ってすぐに、コメントを表示することは可能です。ただし通常は待ちます。
要はこの再構築待ち時間を、なくす為に bzbell さんは承認制にしているんですね。
ここは、再構築動作の変更と、動的に再構築される様にすることで、短くすることも可能です。
私のサイトでは、再構築を発生させなくして、コメント投稿時間を短縮してみています。
- #65: Posted by bzbell [RES]
>>64 oscar さん
こんにちわ^^
> 確かオリジナルの AjaxComment は、そのように動作していたと思います。
えっ Σ(￣Д￣；)!!
そうでしたっけ!? すっかり忘れてました (;￣∇￣A> 要はこの再構築待ち時間を、なくす為に bzbell さんは承認制にしているんですね。
はいです♪ 結構待たされますもんね。
それで失敗した日には、コメント投稿も嫌になります（つω-`｡）わたしの場合。> 私のサイトでは、再構築を発生させなくして、コメント投稿時間を短縮してみています。
えと、それは MT のコアな部分をカスタマイズしてる･･･ということですか!?
それとも、Dynamic Publishing による恩恵でしょうか。すっごく気になりますの (●´∀｀●)
- #66: Posted by oscar [RES]
＞えと、それは MT のコアな部分をカスタマイズしてる･･･ということですか!?
＞それとも、Dynamic Publishing による恩恵でしょうか。
Dynamic Publishing 化する事で、再構築動作をなくす事が可能ですが、私の場合は comment.cgi のコメント受付時のインデックスやエントリー自身などの再構築動作も動かなくしてます。comment.cgi のカスタマイズなら、静的ビルドでも有効だと思いますよ。
ただし、コメント数の表示部分をAjaxなどで読み込むようにしないと、コメントが反映されなくなりますが。
- #67: Posted by bzbell [RES]
>>66 oscar さん
こんにちわ^^
> 私の場合は comment.cgi のコメント受付時のインデックスやエントリー自身などの再構築動作も動かなくしてます。
なるほどぉ～、oscarさんとこはそのようなカスタマイズしてるんですね。
チョビッとわたしも調べてみます (●＞∀＜●)
- #68: Posted by test [RES]
テスト投稿させていただきます＾＾；
- #69: Posted by たつや [RES]
すみませんが、テストで投稿させてください。
- #70: Posted by 匿名 [RES]
testさせていただきます
- #71: Posted by モリタケ [RES]
参考にさせていただきました！
- #73: Posted by NORIO [RES]
これはすごいですね！
実際に構築してみたのですが、うまくいきません・・・。Previewを押した後に、ボタンの横でAJAX用のロゴがクルクル回って、そのうち消えたと思ったらポストされてしまいますΣ(ﾟДﾟ)
JSファイルで設定するのは、ajaxcomment.jsのコメントCGIのURLだけでいいんですよね？HEADERのJAVASCRIPTの読み込みは
<script type='text/javascript' src='<$MTBlogURL$>ajax/prototype.js'></script>
<script type='text/javascript' src='<$MTBlogURL$>ajax/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='<$MTBlogURL$>ajax/ajaxcomments.js'></script>
<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/src/scriptaculous.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/src/effect.js"></script>
でいいんですか？
同じファイルが指定されているのですが、これは同じものを違うディレクトリに上げて指定という事でいいんでしょうか？あ、あと追記の部分が
$out .= '<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/lib/prototype.js"></script>';
$out .= '<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/src/scriptaculous.js"></script>';
$out .= '<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/src/effect.js"></script>';
って表記されていますが・・・？どうぞお力をお貸しください。
- #74: Posted by TEST [RES]
テストさせて頂きます！
- #75: Posted by bzbell [RES]
>>73 NORIO さん
こんばんわ^^
> 同じファイルが指定されているのですが、これは同じものを違うディレクトリに上げて指定という事でいいんでしょうか？
いえ。同じものを読込む必要ないですよ。
具体的には以下の記述で OK です（￣∇￣)b<script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/lib/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/src/scriptaculous.js"></script> <script type="text/javascript" src="<$MTBlogURL$>js/scriptaculous/src/effect.js"></script> <script type='text/javascript' src='<$MTBlogURL$>ajax/ajaxcomments.js'></script>
すいません。
追記は、バージョンアップされた scriptaculous.js という JavaScript の記述方法なんです。
分かりづらかったですね (;￣∇￣Aで、本題の Preview でイメージはクルクルして投稿されてしまう件ですが、
記事内の 3. で説明している、フォームのカスタマイズのところで、以下の記述が追加されているか確認してください。
<div id="comment_posted"></div>
上記記述がないと、プレビューおよび、投稿結果が表示されなくなります。
また、同じくフォームのカスタマイズのところで、以下の行は削除したか確認してください。<input type="hidden" name="static" value="1" />
プレビューに限って動作がおかしいのでしょうか。
ポストの動作は問題ないですか!?
- #76: Posted by TEST [RES]
テスト投稿させていただきます！
- #77: Posted by TEST [RES]
テスト投稿させていただきます！
- #78: Posted by test [RES]
テスト投稿させていただきます！
- #79: Posted by 名無し [RES]
すみません､テストさせて下さい
- #80: Posted by 試したい人 [RES]
テスト投稿させてください
- #81: Posted by aprico [RES]
てすと～♪
テス、テス！