MovableTypeのコメントをAjaxで投稿する

テス、テス！

>>2 GUTS さん

こんにちわ^^
ぜひ、GUTSさんとこでも設置してください♪
Ajaxっておもしろいですね。
最近ちょと凝ってるんです♪

> 解析するのって結構楽しいですよね

元々わたしはプログラマさんじゃない(ごく普通のOL)ので最初辛かったです。
見るものすべてが何だこりゃ？！ってかんじで(＞∀＜　)
今でもアヤフヤなのが"関数"です。
読むことはできますが、人には説明できません（つω-`｡）とほほ

GUTSさん"Blog for SMDL"以外にもブログ持ってるんですね。
勝手ながらリンクさせていただきましたぁ♪

>>5 ssgg さん

はじめまして^^

> ajax勉強している最中でこのサイトと投稿を見ました。

同じくわたしも勉強中です(￣∇￣)/

> とても便利ですね。ユーザビリティもよくなるので自分も試してみたいです。

同感♪ ユーザビリティ重要ですよね。
わたしのブログの性質上、メモなので訪問者さんが目的の記事を探しやすいような、ユーザビリティを模索中なんです。
カンタンにユーザビリティといっても、なかなか奥が深いです（つω-`｡）

> これからも色々見て勉強させてもらいます！！

はい♪ こちらこそよろしくお願い致します。

>>7 ぴー さん

こんにちわ^^

お気に召したようで（*´∇｀*）♪
うまく設置できなかったときはご連絡ください。

>>9 ajax さん

こんにちわ^^

どうぞ、どうぞ♪

他にも恩恵がありまして、わたしはテンプレートをコロコロ変えます。その際、このカスタマイズを行っておくとコメント・プレビュー、保留、エラーの各テンプレートはそのまま使えちゃいます(￣∇￣)b

>>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 fag さん

度々です(ｏ￣∀￣)ノ

> ただ，投稿したものは404エラーになったままです。^( ToT)^

>>12で記したコード内にmt-comments.cgiのURLを指定していますが、そちらのパスはどうでしょう。
考えられるのってそこくらいですよねぇ。

>>15 起動戦車ガンタンク さん

こんにちわ^^

わたしJSの方のそのパスについて、ぜんぜん説明してませんでしたね（;￣∇￣A

ごめんなさい。

>>17 fag さん

こんにちわ^^

> 本来どこからのパスになるんですか？？

おぉΣ(￣Д￣；)!!
失礼しました。

Ajaxのスクリプト( ajaxcomments.js )がある場所からのパスだと思います。
なので、わたしは絶対パスで、ルートからのパスを指定しています。

>>19 fag さん

こんにちわ^^

上記環境ですと、以下のようなパスにしたらどうでしょう(￣∇￣)b
"/cgi/mt/mt-comments.cgi"

ルートからの絶対パスとなります。
これによりajaxcomments.jsがどこにあっても、ルーからのパスで実行されます。

>>21 fag さん

う～ん（つω-`｡）
考えられることは、

• mt-comments.cgiがない or パーミッション違い
• mt-comments.cgiに渡すパラメータが違う

があると思うのですが、たとえば、Postしたときローダーイメージは表示されるわけですよね。
ということは、ajaxcomments.jsは実行されてることになりますが、そうするとやっぱりそこのパスか、もしくはパラメータ指定に不備がある…となりますよね。

記事にもあるように、Post、Previewの各inputタグの属性にデフォルトでは、nameを指定していますが、そちらは削除されてますか。
これが残ったままだと、コメント一覧のテンプレートが使用されていました。
試しに、コメント一覧をバックアップして、区別しやすいように適当な文字を入れて再構築した場合、どんなメッセージが表示されますか。

あと、404エラーが表示された場所って、<div id="comment_posted"></div>の場所に表示されるのですよね!?

たぶん、わたしが想像するにそこら辺に何かあるように思います。
パスはfagさんもご承知のパスで問題ないと思うんですよねぇ。

>>24 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 m00a0370ggtt さん

こんにちわ^^

> Javascriptでは異なるホストのファイルにアクセスできないのだとしたら、MT本体があるホスト内で公開しているブログ以外ではこのAjaxによるコメント投稿スクリプトが使えないのではないでしょうか？

たぶん、それはないのではないでしょうか。
実際、他の人のホスト上のJSをテンプレ内に記述して使ったことありますので…。
つか、Google Analytics とか Google AdSense ってJSですよね。
他にもフリーのアクセス解析などにもJSが使われてたりします。
これらはすべてわたしからすれば外部ホストになりますよね。

それに、MT内でもデフォルトでJSが使われていますよね。
もし使えなかった場合、Ajax以前にMTの一部機能が使えない…制限付きってことになります。

または、通常ではNGだけどホスト側で何らかの設定すればOKなのかもしれませんね(￣∇￣)b

意識したことないので断言はできませんが、そのようなトラブルの記事って見たことないです。

わたし的には、サブドメインといっても、サイトパス的にはドメインの環境下なので、仮にURLによる参照がダメでもサイトパスなら問題ないのでは?…と思ってましたが、どうでしょ。

的外れなお返事でしょうか。
スキル不足ではっきりしたことお答えできなくてすいません（つω-`｡）

>>29 moory さん

はじめまして^^

> テストさせてもらいます(^▽^;)

どうぞ、どうぞ♪
エントリごとにコメントの認証あり／なしとか設定できればいいのにねぇ。

ちなみに、今はこちらのAjaxによるCAPTCHA認証をやってみるに変更しています。
なので、多少見た目に違いがありますし、コードも異なりますけど、わたし的にはオススメの一品ですの(￣∇￣)b

>>31 tera5896 さん

はじめまして^^

> プレビューではフォームが残るんですがエラー画面だとフォームが残りませんね・・・。

はい。
えとですね(;￣∇￣A、結論から言いますとできません。
というのは、Ajaxからすると、非同期通信が正常／異常によるエラー処理というのはできるようなのですが、コメント投稿に対するエラーについては関知してないからなんです。

なので、一応わたしが考えている対策としては、

1. コメント・保留テンプレート内に'OK'、コメント・エラーテンプレート内に'NG'という文字列を入れる
2. Ajaxの受信処理でその文字を判断することで、正常に投稿された場合には正常用メッセージを表示し、フォームを隠す、エラー時はエラーメッセージ表示してフォームを残す

などの条件判定ができると思います。

ただし、ご存知のようにコメント・エラー時にはMTによる動的メッセージが生成されますので、そういった機能が使えなくなります。
言い換えると、正常時と同様にエラー時も、固定メッセージ表示で問題なければ上記方法で対応可能かと思います。

こういった理由で、わたしのサイトでは、正常／異常問わずフォームを表示しっぱなしにしています。
でも、これだとエラーしたと勘違いする!? ようで、2重投稿される人もいるので、一応わたしが考えているのは上記方法になります。

受信文字列による条件判断については、AjaxによるCAPTCHA認証をやってみるでやってますので、参考にしてください。

>>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 });
}

>>36 nuts さん

はじめまして^^

XHTML的には問題なさそうです。
ただし、ajaxloadのイメージ表示がないので、記事内で紹介しているのピンクの字の行を追加して、イメージファイルをアップロードしてください。

以下のことを確認してみてください。

1. 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に変更する必要があります。
2. ajaxcomments.jsなど3つのJavaScriptを追加してます。これらのJavaScriptをロードするよう追加してますでしょうか。追加の仕方は記事内で紹介してます。
3. 記事内で紹介してるように、コメント・プレビュー、コメント・保留そして、コメント・エラーのテンプレートの内容を変更しています。各テンプレートは変更されてますでしょうか。

1番疑わしいのは、上記1.だと思います (￣∇￣)b

>>38 nuts さん

> ボタンの横でajaxloadのイメージがクルクル回ってしまうんです＞＜

あっ!! ごめんなさい、追加されてましたね（;￣∇￣A
表示する場所はどこでも構わないのですが、ボタンクリックしていないのにクルクル回ってるんですか!?

> previewボタンでもpostボタンでも押すとコメント一覧のテンプレートに飛んでしまいます。

飛んでしまう･･･ということは、ページ移動されてるということですね!?
ajaxloaderのクルクルはpreviewボタンまたは、postボタンをクリックにより非表示⇒表示になった･･･という認識でよいでしょうか。

とすると、ajaxcomments.jsは正しくロードされてるけど、その先のajaxが正しく行われていないとなりますね。

1番いいのは、nutsさんの個別エントリ・テンプレートおよび、ajaxcomments.jsを解析できれば話は早いのですけど（;￣∇￣A
お手数ですが、ページ上部にある『CONTACT(メール)』から、わたし宛てにnutsさんの作った、以下の3点を教えていただけますか。

1. 個別エントリ・テンプレートを添付していただけますか
2. ajaxcomments.jsを添付していただけますか
3. nutsさんのサイトのURLとMTのインストール先URLを教えてください

このカスタマイズが正常に動作した人と、しない人がいるようなんです。
以前にも同じような人がいたのですが、結局それっきり連絡とれず、原因が分からないままでいたんです。

無理強いはしませんが、nutsさんが教えてもいいよ･･･ということでしたら、上記情報から原因追求してご連絡したいと思います(￣∇￣)/

その前に1つ確認していただきたいことがあります。
ajaxcomments.js内のmt-comments.cgiのパスまたはファイル名をありえないものにした場合、どのような表示されるか確認していただけますか。

想定では、Ajaxが正しく動作していれば、そんなファイルないよ･･･ということで、404 Not Foundと表示されるはずです。

>>40 nuts さん

こんにちわ^^

> もしかしたらそのせいで動作しないのではないかという気がして...＞＜

いえ、ブログのPHP化を行ってなくてもできますよ (￣∇￣)b
ただし、Ajaxを使用するのでブラウザでJavaScriptを有効にしている必要があります。

> これから色々勉強し、より良いサイトを作れる様頑張ろうとおもいます。

わたしも的確に答えられるよう勉強しておきます (;￣∇￣A

>>42 ああああああああああああああ さん

ありがとうございます。

>>43 す さん

ご質問の件ですが、AjaxがSEO的にマイナスかどうかということでしょうか。
それとも、mt-comments.cgiによるページ表示を行わないことが問題ということでしょうか。
SEOに詳しいわけではないので問題視してるところが何なのか分かりませんが、問題ないのではと思ってます。

訪問者さんが投稿するコメントを、ただJavaScriptでプレビューなどするだけだし、mt-comments.cgiによるページ表示したことでどれだけSEOに影響するのかさえ知りませんから（;￣∇￣A

ただ、だいぶ前に 'display:none' で意図的に非表示するようなことはSEO的にマイナス…という記事を読んだことあります。実際のところどうか分かりませんし、気にしたことありません。

>>45 もっふぉ さん

はじめまして^^

nuts さんはその後ご連絡がないので結果的に解決されたのかどうか分かりませんが、もっふぉ さんも同じ現象だとすると同様に、ajaxcomments.jsで記述しているmt-comments.cgiのパスなどにミスがないか確認してみてください。

http://bizcaz.com/
+--- mt/
+--- mt-comments.cgi

/mt/mt-comments.cgi
or
http://bizcaz.com/mt/mt-comments.cgi

それでも正しい動作しない場合には、ページ上部にあるメールフォームから差し支えなければ、

• ajaxcomments.js
• エントリ・アーカイブのテンプレート
• もっふぉ さんのサイトのURL
• MTのインストール先(URL)

を添付していただければ対応いたします。

>>47 もっふぉ さん

> こちらはどのような意味を持つのでしょうか？？

はい。
comments_formをIDにして、正常に通信が行われて、mt-comments.cgiから応答が返ってきた場合に限り、コメントフォームを非表示にするためのものです。

参考までに、Ajax(現状のスクリプト)からしたらMTのコメント投稿の結果(正常／異常)を判断することができなく、ただ通信が正常に行われたか否かでしか判断できないため、わたしは正常投稿時でもコメントフォームは非表示にしてませんでした。

>>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> )の中にローダーイメージが含まれてますでしょうか。
非表示ブロック外だとローダーイメージは表示されっぱなしになってしまいます。

>>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ペコ

>>57 okayama さん

はじめまして^^

ご指摘ありがとうございます♪

実は視覚的な話でして、エフェクトを使用した場合、セクションを明示的に表示してしまうとチラッと見えてしまうんです。
なので、意図的に記述していないんです (;￣∇￣A

でも、okayama さんの言われるように、明示的に記述した方が親切ですね♪
さっそく反映します。

>>61 Tatsuya さん

こんにちわ^^

よかったぁ (●´∀｀●)
即時投稿の件ですが、それは無理ですねぇ (;￣∇￣A

即時投稿だとその場で再構築が発生するので訪問者さんを待たせることになります。
なので、わたし的にはあまり好まないんですけどね。

>>64 oscar さん

こんにちわ^^

> 確かオリジナルの AjaxComment は、そのように動作していたと思います。

えっ Σ(￣Д￣；)!!
そうでしたっけ!? すっかり忘れてました (;￣∇￣A

> 要はこの再構築待ち時間を、なくす為に bzbell さんは承認制にしているんですね。

はいです♪ 結構待たされますもんね。
それで失敗した日には、コメント投稿も嫌になります（つω-`｡）わたしの場合。

> 私のサイトでは、再構築を発生させなくして、コメント投稿時間を短縮してみています。

えと、それは MT のコアな部分をカスタマイズしてる･･･ということですか!?
それとも、Dynamic Publishing による恩恵でしょうか。

すっごく気になりますの (●´∀｀●)

>>66 oscar さん

こんにちわ^^

> 私の場合は comment.cgi のコメント受付時のインデックスやエントリー自身などの再構築動作も動かなくしてます。

なるほどぉ～、oscarさんとこはそのようなカスタマイズしてるんですね。
チョビッとわたしも調べてみます (●＞∀＜●)

>>71 モリタケ さん

はじめまして^^

お役に立ててよかったです (●´∀｀●)
今後ともよろしくですの♪

>>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" />
  

• プレビューに限って動作がおかしいのでしょうか。
  ポストの動作は問題ないですか!?