Movable Type 備忘録
Movable Type のコメントを Ajax で投稿する2
- Prev Page: CommentSubscribe プラグイン
- Next Page: Movable Type のコメント投稿をフィードで配信
こんばんわ^^
わたしのサイトで配布してますテンプレートでは、Ajax を使ってコメント投稿するようにカスタマイズされてます。
ただし、今までだとコメント設定にて「自動的に公開しない」にしておかないとダメなものでした。
その理由は・・・わたしが「自動的に公開にしない」にしているからですねぇ (; ̄∇ ̄A はは
でも人によっては即時投稿の人もいるかと思いますので、重いおしり(腰)を上げてコメントの即時投稿が選択された場合、ページをリロードして即座にコメント表示するよう対応しました。
また、以前にもコメント投稿の Ajax 化は記事にしてますが、参考までに改めて説明してみたいと思います。
Movble Type のコメント投稿のしくみ
Movable Type のコメント投稿は、各ブログで設定されている即時公開の条件によって異なります。
「自動的に公開しない」を選択された場合、「コメントプレビュー」、「コメント完了」システムテンプレートが使用されます。 反面、「すべて自動的に公開する」が選択された場合、コメント投稿したページが表示されるようです。
ディレクトリ構成
コメント投稿の Ajax 化は以下のようなディレクトリ構成として説明していきます。
http://●●●.com/|+-- index.html( トップページ )|+-- js/| +-- prototype/| +-- prototype.js| +-- prototype.comment.js| || +-- image/| +-- ajax-loader.gif
カスタマイズ
コメント投稿の Ajax 化は以下の手順で行います。
[2008.04.26] HTML ヘッダの記述について説明してなかったので追記しました。
prototype.js 入手
prototype.js をこちらの prototype のページから入手して、js/prototype/ フォルダの下にアップロードします。コメントフォームの修正
コメントフォームを修正します。 具体的にはプレビューボタンと投稿ボタンを以下のように修正します。<input type="submit" accesskey="v" id="comment-preview" tabindex="15" value="Preview" onkeypress="javascript:void(0);" onclick="return ajaxcomment_preview('comment_results');" /><input type="submit" accesskey="p" id="comment-submit" tabindex="16" value="Post" onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('comment_results');" />
青字にはプレビュー、またはコメント投稿結果を表示する ID 名称を指定します。
次にプレビュー、コメント投稿結果を表示したい場所に以下を追加します。<div id="comment_results"> </div>
青字は先ほどの各ボタンで説明した青字の ID 名称と同じにしてください。
一通り修正したら保存しますコメント投稿用スクリプト
コメント投稿用のスクリプトを作成します。以下のコードをテキストエディタにコピー & ペーストしてください。var ajaxloader = 'http://●●●.com/js/prototype/image/ajax-loader.gif';var ajaxcomment_divid = '';var ajaxcomment_cgi = ['http://●●●.com/mt/', 'mt-comments.cgi'].join('');/** ローダーイメージの表示/非表示*/function show_ajaxloader(elem, enable){if (enable) {elem.innerHTML = '';elem.style.height = '100px';elem.style.background = 'transparent url('+ajaxloader+') no-repeat center center';}else {elem.style.height = 'auto';elem.style.background = 'none';}}/** コメント投稿*/function ajaxcomment_post(divid){ajaxcomment_divid = divid;show_ajaxloader($(ajaxcomment_divid), true);var form = $('comments-form');if (form.bakecookie.checked) rememberMe(form);var pars = Form.serialize('comments-form')+'&post=post';new Ajax.Request(ajaxcomment_cgi, {method: 'post',parameters: pars,onComplete: function (req) {if (0 < req.responseText.indexOf('DOCTYPE', 0)) {document.location.reload();}else {if (0 < req.responseText.indexOf('コメントを投稿しました。', 0)) {$('comments-form').style.display = 'none';}var divid = $(ajaxcomment_divid);show_ajaxloader(divid, false);divid.innerHTML = req.responseText;}},onFailure: function (req) {$('comments-form').style.display = '';var divid = $(ajaxcomment_divid);show_ajaxloader(divid, false);divid.innerHTML = req.responseText;}});return false;}/** コメントプレビュー*/function ajaxcomment_preview(divid){ajaxcomment_divid = divid;show_ajaxloader($(ajaxcomment_divid), true);var pars = Form.serialize('comments-form')+'&preview=preview';new Ajax.Request(ajaxcomment_cgi, {method: 'post',parameters: pars,onComplete: function (req) {var elem = $(ajaxcomment_divid);show_ajaxloader(elem, false);elem.innerHTML = req.responseText;},onFailure: function (req) {var divid = $(ajaxcomment_divid);show_ajaxloader(divid, false);divid.innerHTML = req.responseText;}});return false;}
赤字の URL を各自の環境に合わせて変更します。
ちなみに上記スクリプトは prototype.js 版となります。他の JavaScript フレームワークを使用している人は各自で変更してください。青字の部分は「自動的に公開しない」を設定した場合に正常終了/エラーを識別するための文字列を指定します。
たとえば、デフォルトのテンプレートですと、「コメント完了」システムテンプレートの 9 行目の「コメントを投稿しました。」が送られてきた場合には正常終了とみなしています。また、1 行目の ajax-loader.gif はこちらの Ajaxload - Ajax loading gif generator などからお好みで作成できます。
一通り変更したら適当な名前(たとえば、prototype.comment.js)で保存します。 そして、js/prototype/ フォルダの下にアップロードしてください。
HTML ヘッダを変更
HTML ヘッダ(<head>~</head>)内に以下を追加します。<mt:if name="feedback_template"><script type="text/javascript" src="http://●●●.com/js/prototype/prototype.js"></script><script type="text/javascript" src="http://●●●.com/js/prototype/prototype.comment.js"></script></mt:if>
赤字の部分ではフィードバックテンプレート(エントリページ、ウェブページ)の場合のみスクリプトをロードするよう条件設定してます。
青字の部分を各自の環境に合わせて変更します。追加したらエントリページ、ウェブページのみ再構築します。
動作確認
動作確認します。コメントプレビュー、コメント投稿がページ移動せずに正しく動作することを確認してください。
以上でコメント投稿の Ajax 化は完了です ( ̄∇ ̄)/
コメントプレビュー時やコメント投稿時でページ移動という煩わしさから解放されますので、お試しください。
また、週末の間だけコメントの即時投稿に設定しておきますので、ご確認頂けたらと思います。
Trackback Pings(1)
- from
GaS:Grumbling about Something
来週の木曜日まで夏休みです。ひゃっほう。 ってなわけでAjaxの勉強を兼ねて、前々からやりたかったコメントプレビューとコメント投稿をAjax...




bzbellさん、お忙しいところ有難うございました。
ちょっと大がかりになりそうなので、落ち着いてから試させて頂きたいと思っていますが、何点か質問させて下さい。
>1.Movble Type のコメント投稿のしくみ
私の処では、サインインした方のみ、即時公開になっています。ゲストの方は承認後公開。
で、即時公開の場合は[コメント完了]ページは表示されず、画面がリロードされコメントが表示されます。
[承認後公開]の場合は[送信]を押した後、[コメント完了]ページになります。
ちなみに管理画面のコメントポリシーは「自動的には公開しない」になっています。
それなのにサインインしたユーザー書き込みが公開されてしまう動作がちょっと怪しいのですが、このパターンでも大丈夫でしょうか?。
prototype.js は他のものでも使っていますので既に読み込む設定になっているのですが、prototype.comment.js もヘッダ部分で読み込みをさせれば良いのでしょうか?。
あと、大ぼけかもしれませんけど、私のブログはダイナミックパブリッシングでもなければPHP化もしていないのですが…大丈夫でしょうか?。
>>1 aiko_m さん
こんにちわ^^
> ちなみに管理画面のコメントポリシーは「自動的には公開しない」になっています。
> それなのにサインインしたユーザー書き込みが公開されてしまう動作がちょっと怪しいのですが、このパターンでも大丈夫でしょうか?。
えっ!? 「自動的には公開しない」にも関わらず即時公開されるんですか
それって「認証サービスで認証されたコメント投稿者のみ」or 「ブログで承認されたコメント投稿者のみ」を選択した場合の動作っぽいですね。
でも大丈夫だと思います。
即時公開される場合は mt-commets.cgi からの応答はコメント投稿したページがそのまま返ってきます。逆に公開待ちだとシステムテンプレートの「コメント完了」の内容が返ってきます。
要するに、どの即時公開する条件を設定しても動作するパターンは 2 通りなので問題ないかと思われまする
> prototype.comment.js もヘッダ部分で読み込みをさせれば良いのでしょうか?
そこら辺はお好みでしょうか。
テンプレート内に埋め込んでもいいですが、テンプレートの中がスッキリします。それに XHTML 的には JavaScript は外部ファイルにしましょう・・・といわれてますので
> 大ぼけかもしれませんけど、私のブログはダイナミックパブリッシングでもなければPHP化もしていないのですが…大丈夫でしょうか?。
はい。問題ないです
>>2 bzbell さん
>えっ!? 「自動的には公開しない」にも関わらず即時公開されるんですか
はい(^^ゞ。ですから最初、正しい動作が分からなくてネットを検索しまくりましたが、サインインに関してのトピックも少ないですね。無料ユーザーなので質問する訳にもいかず、マニュアルがしっかりしたものが製品版に付いているなら、購入しようかと考えています。
(HPにあるマニュアル程度しか付いてないなら考え物ですが…)
ちなみに、この辺りの動作はいじっていませんし、メンバー登録って「何?」って未だにその動作がよく分かりません。あと、LiveJournalでログインしようとするとエラーが出るそうなんですが、bzbellさん、オープンIDで登録なさって下さっていません?。それも何故出来たのか不思議です(^^ゞ。
初歩的な質問にお答え下さって有難うございます≦(._.)≧。
>XHTML 的には JavaScript は外部ファイルにしましょう・・・
確かにそのほうが管理も楽ですよね。テンプレートに書いちゃうとちょっとした修正の度に再構築が必要ですし、出来る限り外部ファイルにしたいのですが、FC2なんかだと外部ファイルが別サーバーに保存される仕組みなので、それだとよくサーバーが落ちるとエラー頻発なので困ることもあって、環境によって何がベストか?を見極めるのもカスタマイズには大切なことと痛感しました。
ps:
ちょっと違うお話しですが、「res」を押した時に表示される
「>>2 bzbell さん」
ですが、コメント入力領域にカーソルを合わせると消えてしまいます。
それでそのまま書き込むと、その部分が無くなった状態になり、
ですから念のためもう一度[res]を押すと今度は
>>2 bzbell さん
>>2 bzbell さん
と二つ表示されて、書き込んでも消えません。
勿論、ダブっている一つは消しますが、これ、「>>2 bzbell さん」が
表示つれた後、カーソルを置く場所にコツがあるのでしょうか?。
それともこれもAikoのパソだけでしたら…。まじリカバーしてみたほうが
良いかもしれませんね。
>>3 aiko_m さん
> マニュアルがしっかりしたものが製品版に付いているなら、購入しようかと考えています。
どうですかねぇ。
機能的な差異があるだけでマニュアルはいっしょのような気がしないでもないです
ユーザ登録はコミュニティ・ソリューションってのを別途インストールしないと意味ないようです。わたしも最初わっけ分からなくって悩みました。
普通にブログする程度なら関係ないと思って無視してます。
要するに MT を CMS として使う・・・といった関連のことではないですかね
> bzbellさん、オープンIDで登録なさって下さっていません?
わたし前にコメント残したことありますから、その時に確か OpenID を使ったように思います。
> ・・・コメント入力領域にカーソルを合わせると消えてしまいます。
えっ
!?
また新たな事実です。確かに IE6 だとそのような現象がでました。
textarea タグに JavaScript を使用してまして、初期表示時に「Leave your comment here.」って文字列を表示させてます。
フォーカスが入った時にその文字列クリアってことをやってるのですが、IE だとそれが正常動作しないようです。
IE に限っては、一度テキストエリアをフォーカス(入力状態)して、それから RES をポチッ!! とするとよさそうです
何だか面倒ですね。対策考えます
>>3 aiko_m さん
ユーザ登録通常の MT でもできるようです。
以下にその手順を記します。
MT の管理画面から「ブログの設定」>「登録/認証」を選択
「ユーザー登録」をチェックして「変更を保存」ボタンクリック
コメント投稿時のサインインで Movable Type を選択
下にある「アカウントがないときはサインアップしてください。」でユーザ登録可能
でした
>>4 bzbell さん
なるほど、コメントを書く前。[res]を押す前にココをクリっとしておけば大丈夫です!。なんか重箱の隅を突くようなことばかりですみません。でももう分かったので大丈夫ですよσ(^^)。
って多分、bzbell さんの性格だと完璧を目指すのかな(^_^;。
多分ブログを持たない普通の観覧者の方は、細かい動作など気にされないと思いますし、クロスブラウザを考えると、もうキリがないですよね。
shpです
prototype.comment.js
標準コミニュテイブログ x
vicuna CMS x
koikikukan. x
ajax-loader.gif は表示されますが
コメントプレビューと投稿結果の表示をページ遷移なし
出来ません
私のmt ver Movable Type Pro 4.23-ja
Movable Type Pro 4 以降は対応していないのですか。
tubes テンプレート 設置 しましたが。
コメントプレビューと投稿結果を
他のテンプレートでも試したいのです。
以上の件宜しくお願い致します。
>>7 shp さん
こんばんわ^^
> tubes テンプレート 設置 しましたが。
> コメントプレビューと投稿結果を
> 他のテンプレートでも試したいのです。
週末で良ければ shp さんのテンプレートを、わたしの方でカスタマイズしましょうか!?
その場合には、テンプレートセット一式を右上のメールフォームから添付して送って頂けますか
prototype と jQuery で対応可能ですがどちらがいいかも明記してください
はじめまして。
コメントのAjax化を検索していてたどり着きました。
記事を読んでるとそんなに難しそうではなさそうだったので、手順にそって実装してみたのですが、テストコメントを投稿すると、エラーとなってしまいます。
エラー内容:
不正な投稿です。
<div id="comment_results"></div>を挿入した部分に、実行中のloading画像とエラー画面は表示されるので動いていないわけではないと思うのですが…何分、プログラム等の知識はないため原因がわからない状態です。
テンプレートについてもデフォルトではなく、カスタマイズされて配布されているものをベースに自分でアレンジをしているので、もしかすると底も関係するかもしれないのですが…。
MT ver:Movable Type Commercial 4.23
※コメントは即時公開です
テンプレートベース:Vicuna(http://mt.vicuna.jp/)
実装済みのテストサイトのURLも記載いたしました(topページ1番上の記事にテストコメントが入っております)
お忙しいところ、申し訳ありませんが、お知恵を拝借できればと思います。
>>9 mayue さん
こんばんわ^^
mayue さんのサイト拝見させてもらいました。
HTML ヘッダ内の script_ajaxcomments.js は必要ですか!? 不要なら削除します。
prototype_com.js の内容を以下のコードに差し替えます。
var ajaxComment = { base : 'http://studio.verse.jp/cg/sblg/', loader: 'mt-static/images/indicator.gif', script: 'mt-comments.cgi', post : function(mode) { var me = this; var pars = ''; me.elem = $('comment_results'); me.form = $('commentsForm'); me.open = $('comments-open'); me.elem.innerHTML = ['<img src="', [me.base, me.loader].join(''), '" />'].join(''); me.elem.setStyle({'display':'block'}); if ('post' == mode) { mtCommentOnSubmit(me.form); me.form.preview.value = ''; pars = [me.form.serialize(), '&post=post'].join(''); } else { me.form.preview.value = '1'; pars = [me.form.serialize(), '&preview=preview'].join(''); } new Ajax.Request([me.base, me.script].join(''), { method: 'post', parameters: pars, onSuccess: function (req) { var txt = req.responseText; if (0 < txt.indexOf('DOCTYPE', 0)||'' == txt) { document.location.reload(); } else { $('comments-open').setStyle({'display':'none'}); me.elem.innerHTML = txt; } }, onFailure: function(req) { me.elem.innerHTML = req.responseText; } }); return false; } }; var ajaxcomment_post = ajaxComment.post;※行頭の全角スペースを削除してからご利用ください。
フォーム内の「Preview」、「Write」ボタンを以下のコードで差し替えます。
<div id="comments-open-footer" style="padding-left:150px;"> <input type="submit" class="comf_bot" accesskey="v" name="preview_button" id="comment-preview" value=" Preview " onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('post');" /> <input type="submit" class="comf_bot" accesskey="s" name="post" id="comment-submit" value=" Write " onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('prevew');" /> </div>※行頭の全角スペースを削除してからご利用ください。
最後にブログ記事テンプレートを再構築します。
以上のことを試してみてください
>>10 bzbell さま
こんばんは。
早々にご教授ありがとうございます。しかも、プログラムの修正までしていただいて…。
早速、ご教授いただいた箇所を修正してみました。
1.HTML ヘッダ内の script_ajaxcomments.js の削除
※↑別のプラグインを試したときのものが残ったままの状態でした。なくても動作するようなので削除いたしました。
2.prototype_com.js のコード修正
3.投稿ボタンのソース修正
と修正後、再構築をしてテスト投稿をしてみたのですが、最初にご相談させていただいたエラーは出ないものの、プレビュー画面を通らずに完了画面へと移動してしまいます(コメントはきちんと投稿されています)
あわせて、完了画面が<div id="comment_results"></div>部分に表示ではなく、プレビュー画面を飛ばしてデフォルトのコメント投稿と同じ動作となってます。
ちなみに、素朴な疑問なのですが…Previewボタンの実行がpost、Writeボタンの実行がpreviewなのは、なにか関係がありますか?
bzbellさまに書いていただいた投稿ボタン部分のソースだとそうなっているのですが…試しにonclick部分だけ入れ替えてみたのですが、コメント完了画面→コメント投稿となり、変わりませんでした。
ご教授いただきましたのに「できました!」報告が出来ずに申し訳ありません。
再度、ご教授いただければと思います。
>>11 mayue さん
こんばんわ^^
確認しました。
ajaxComment というのが無いよ・・・と、怒られてるようです。
prototype_com.js 内の 1 行目を以下のように var と ajaxComment の間をスペースで区切ってください。
1 行目 var ajaxComment={ついでに以下の行においても同様に修正します。
6、7 行目 var me=this; var pars=''; 25 行目 new Ajax.Request([me.base,me.script].join(''),{ 29 行目 var txt=req.responseText;まずは上記修正で確認してみてください
>>12 bzbell さま
早々のお返事、ありがとうございます。
改めて、prototype_com.jsを作成し直して差し替えたのですが、今度は投稿ボタンを押しても全く実行されないという状態になってしまいました…(涙)
度々申し訳ありませんが、修正箇所などご教授いただけますでしょうか。
よろしくお願いします。
>>13 mayue さん
はぁ~い
ご苦労様です。
以下のコードは mayue さんのサイト専用のコードです。
コメントプレビュー/ポストできることを確認しましたので prototype_com.js の内容を差し替えてください。
var ajaxComment = { base : 'http://studio.verse.jp/cg/sblg/', loader: 'mt-static/images/indicator.gif', script: 'mt-comments.cgi', post : function(mode) { ajaxComment.elem = $(this); ajaxComment.form = $('commentsForm'); ajaxComment.open = $('comments-open'); ajaxComment.elem.innerHTML = ['<img src="', [ajaxComment.base, ajaxComment.loader].join(''), '" />'].join(''); ajaxComment.elem.setStyle({'display':'block'}); var pars = ''; if ('post' == mode) { mtCommentOnSubmit(ajaxComment.form); ajaxComment.form.preview.value = ''; pars = [ajaxComment.form.serialize(), '&post=post'].join(''); } else { ajaxComment.form.preview.value = '1'; pars = [ajaxComment.form.serialize(), '&preview=preview'].join(''); } new Ajax.Request([ajaxComment.base, ajaxComment.script].join(''), { method: 'post', parameters: pars, onSuccess: function (req) { var txt = req.responseText; if (0 < txt.indexOf('DOCTYPE', 0)||'' == txt) { document.location.reload(); } else { if (!txt.indexOf('Error', 0)) { ajaxComment.open.setStyle({'display':'none'}); } ajaxComment.elem.innerHTML = txt; } }, onFailure: function(req) { ajaxComment.elem.innerHTML = req.responseText; } }); return false; } }; var ajaxcomment_post = ajaxComment.post;また、コメントフォームですが・・・すいません
わたし preview と post のボタンを逆にしてしまってましたので、以下のように訂正してください。
<div id="comments-open-footer" style="padding-left:150px;"> <input type="submit" class="comf_bot" accesskey="v" name="preview_button" id="comment-preview" value=" Preview " onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('preview');" /> <input type="submit" class="comf_bot" accesskey="s" name="post" id="comment-submit" value=" Write " onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('post');" /> </div>以上ご確認ください
>>14 bzbell 様
こんばんは。新たに、当サイト専用コードを書いていただいてありがとうございました。
prototype_com.jsと投稿ボタン部分を、再度ご教授いただいたものに差し替えてみたところ、投稿されました。
ただ、完了画面が<div id="comment_results"></div>部分に表示ではなく、プレビュー画面を飛ばしてデフォルトのコメント投稿と同じ動作となってしまいます…(最初のエラーが直った後と同じ状況です)
書いていただいた専用コードも、行頭の全角スペースのみを削除し、差し替えたのですが…bzbellさまのテストだと問題なくプレビューされたとのことなのですが、何が違っているのでしょうか…?(涙)
お忙しいところ、何度もすいません。よろしくお願いします。
>>15 mayue さん
こんばんわ^^
あっ!! すいません。 わたしのコードミスです (; ̄∇ ̄A えと、>>14 で示したコードの 6 行目を以下のように変更して確認してみてください。ajaxComment.elem = $('comment_results');これでたぶん大丈夫だと思います。prototype と jQuery がごっちゃになっちゃいました
お手数ですがご確認お願いします
>>16 bzbell さま
こんばんは。
いただいたコードの6行目を修正しましたら、無事にAjaxでのプレビュー→投稿ができました!!
お忙しいところ、コードを特別に書いていただいたり、丁寧に修正箇所などご教授してくださり、ありがとうございました
無事に投稿ができたので、一安心…なのですが、また素朴な疑問が出て来てしまったので、教えていただけますか?
MTの「Captcha」を使用するよう設定をしているのですが、今回無事に実装できたAjax化だとどうやらこれが有効になってないようなのです…
。
こちらのコメント欄でも「Captcha」は使用してないようですし、なくてもそんなに困らないかなとは思うのですが(事実、4.2にする前のverではしてないですし)何故かな、と思った次第です。
もし、「Captcha」を使用するために、書いていただいたコードをさらに修正ということになるようでしたら、実装自体は無事にできたのでこのままで大丈夫です。
よろしくお願いします。
>>17 mayue さん
> MTの「Captcha」を使用するよう設定をしているのですが、今回無事に実装できたAjax化だとどうやらこれが有効になってないようなのです…
あれっ!? 確かに CAPTCHA 表示されないですね
いつからだろ・・・少しお時間いただけますか。
今週末にちょとコード解析してみます
- 追記 -
あ、ごめんなさい。
わたしのサイトではちゃんと CAPTCHA 認証できてました。
CAPTCHA 認証無効から有効にした場合、mt.js を再構築する必要があります。
mayue さんは mt.js を再構築されてますか!?
>>17 mayue さん
こんにちわ^^
先ほど mayue さんとこのテストサイトで CAPTCHA 認証の動作確認してきました。
正しく認証手続きされてるようなのですが、有効になっていない・・・というのはどういった現象なのか分かりますか!?
ちなみに CAPTCHA 認証はサインインしないユーザ用のしくみなのはご存知かと思いますが、サインインしてしまうと CAPTCHA は表示されません。
!?
このことを言われてるわけではないですよね
あと、正常にコメント投稿が完了した場合、コメントフォームが隠されてないですね
prototype_com.js 内の 34 行目を以下のように変更してください。
if (0 > txt.indexOf('Error', 0)) {これで正常に投稿が完了できた場合、コメントフォームが隠されるようになります。 もちろんエラー時は隠されません。ただし、上記 34 行目はテンプレートを変更した場合には注意が必要です。
'Error' というキーワードがあるかないかの判断をしてますので、mayue さんがお使いの「コメント完了」システムテンプレート内にある 'Error' というキーワードを消してしまうと、投稿完了したにも関わらずコメントフォームが表示されっぱなしという状態になります。※コメント投稿自体は完了します。
>>19 bzbell さま
こんばんは。
>正しく認証手続きされてるようなのですが、有効になっていない・・・というのはどういった現象なのか分かりますか!?
説明が不十分ですいません…、
MTの設定でCaptcha認証を有効にしており、Captchaの画像と入力欄も表示されているのですが、入力欄が空欄あるいはCaptcha画像の文字列と相違が逢った場合でもプレビュー→投稿が出来てしまう状態です。自分でテストする際はサインインしていません。
念のため、ご教授いただいたとおり、mt.jsの再構築をしてみたところ、解消されました!
Ajax化を導入する前からCaptcha認証を有効にしていたため、よもやそんなこととは思いませんでした…(汗)お騒がせいたしました。
>あと、正常にコメント投稿が完了した場合、コメントフォームが隠されてないですね
あ、コメントフォームは隠されるのがデフォルトなのですね。あまり気にしていませんでした(苦笑)
せっかくなので、ご教授いただいた34行目について修正をしてみましたところ、プレビューを押下したらコメントフォームが隠されてしまいました(汗)何故でしょう…?
先日より、私のせいで、かなりbzbellさまのお手を煩わしてしまいまして申し訳ありません…。
Captcha認証問題は解消されたので、コメントフォームが隠されるという件のみ、またご教授いただいてもよろしいでしょうか?
>>20 mayue さん
> せっかくなので、ご教授いただいた34行目について修正をしてみましたところ、プレビューを押下したらコメントフォームが隠されてしまいました(汗)何故でしょう…?
あちゃ
そっかぁ、Ajax によるデータ転送完了後は Preview でも Post でも同じなので、先ほどのコード( >>19 )だとそのような動作しちゃいますね。では、度々で申し訳ないのですが以下のように修正してください。
if ('post' == mode && 0 > txt.indexOf('Error', 0)) {改めて prototype_com.js の全容を以下に記します。
var ajaxComment = { base : 'http://studio.verse.jp/cg/sblg/', loader: 'mt-static/images/indicator.gif', script: 'mt-comments.cgi', post : function(mode) { ajaxComment.elem = $(this); ajaxComment.form = $('commentsForm'); ajaxComment.open = $('comments-open'); ajaxComment.elem.innerHTML = ['<img src="', [ajaxComment.base, ajaxComment.loader].join(''), '" />'].join(''); ajaxComment.elem.setStyle({'display':'block'}); var pars = ''; if ('post' == mode) { mtCommentOnSubmit(ajaxComment.form); ajaxComment.form.preview.value = ''; pars = [ajaxComment.form.serialize(), '&post=post'].join(''); } else { ajaxComment.form.preview.value = '1'; pars = [ajaxComment.form.serialize(), '&preview=preview'].join(''); } new Ajax.Request([ajaxComment.base, ajaxComment.script].join(''), { method: 'post', parameters: pars, onSuccess: function (req) { var txt = req.responseText; if (0 < txt.indexOf('DOCTYPE', 0)||'' == txt) { document.location.reload(); } else { if ('post' == mode && 0 > txt.indexOf('Error', 0)) { ajaxComment.open.setStyle({'display':'none'}); } ajaxComment.elem.innerHTML = txt; } }, onFailure: function(req) { ajaxComment.elem.innerHTML = req.responseText; } }); return false; } }; var ajaxcomment_post = ajaxComment.post;以上です。ご確認ください>>21 bzbell さま
早々の御対応ありがとうございます。
>そっかぁ、Ajax によるデータ転送完了後は Preview でも Post でも同じなので、先ほどのコード( >>19 )だとそのような動作しちゃいますね。では、度々で申し訳ないのですが以下のように修正してください。
34行目を再度、修正してテストをしましたところ、コメント投稿後にフォームが隠れるようになりましました!
コメントのAjax化実装から、Captcha認証、投稿後のコメントフォーム隠しまで丁寧にご教授いただきましてありがとうございました。
これで実装してみたいことは、一通りできたのでしばらくMTを弄ることもないかなあと思いますが、これは便利!と思ったものがこちらで紹介されましたら実装してみたいと思います(その際は、またご教授願うかもしれません…)
これで、今夜からゆっくり眠れそうです(笑)
ありがとうございました。
初めまして。chocoです。
いつも観て参考にしています。
記事を観てカスタマイズしましたが、プレビューボタンを押すと画面遷移してしまったので、form action="#"にしてみたのですが、<div id="comment_results"> </div>に表示されませんでした。
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" class="comments_form" id="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
このままだと、mt-comment.cgiに遷移してしまいます。
ご教授お願いします。
テンプレートは小粋です。
Movable Type Pro version 4.27-ja :: Community Pack 1.631, Professional Pack 1.301
------- エントリー・アーカイブ -------------------------------------------------
<略>
<head>
<mt:if name="feedback_template">
<script type="text/javascript" src="http://○○/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://○○/js/prototype/prototype.comment.js"></script>
</mt:if>
</head>
<略>
<!-- コメント投稿フォーム部分 -->
<MTEntryIfCommentsOpen>
<form method="post" action="#" class="comments_form" id="comments_form" onsubmit="if (this.bakecookie.checked) rememberMe(this)">
<略>
<div id="comments-open-footer" class="comments-open-footer">
<input type="submit" tabindex="12" accesskey="v" name="preview" id="comment-preview" value="Preview" onkeypress="javascript:void(0);" onclick="return ajaxcomment_preview('comment_results');"/>
<input type="submit" tabindex="13" accesskey="s" name="post" id="comment-post" value="Post" onkeypress="javascript:void(0);" onclick="return ajaxcomment_post('comment_results');"/>
</div><!-- /comments-open-footer -->
<!-- コメント投稿フォーム終了 -->
</div><!-- /comments-open-content -->
</div><!-- /comments-open -->
</fieldset>
</form>
</MTEntryIfCommentsOpen>
<div id="comment_results"> </div>
</div>
<!-- コメント終了 -->
-----------------------------------------------------------------------------
コメントテストをさせて頂きます。