もぜひご覧ください。
2007年5月30日
スパム対策機能等を追加したV1.30を公開しました。
2007年1月27日
メールフォームプラグインにクロスサイトスクリプティングの脆弱性等の不具合が見つかりました。申し訳ありません。
こちらのエントリーをご参照の上、最新版にアップデートしてください。
2007年1月23日
メールフォームプラグインのバージョン1.20を公開しました。
解説も更新しましたので、こちらのエントリーをご参照ください。
メールフォームプラグインをバージョンアップし、Ajaxに対応させました。
従来のプラグインでは、メールの確認や送信の際には、メールフォームのページからCGIを呼び出す形になっています。
これに加えて、メール送信等の処理をAjaxで行うことができるようにしました。
そこで、これまでのメールフォームをAjax化する手順を紹介します。
1.プラグインのバージョンアップ
まず、以下のリンクをクリックして、プラグインをダウンロードします。
プラグインの継続的な開発やサポートのために、プラグインをご利用された方は、ドネーション（寄付）を行っていただけると幸いです。
ドネーションの方法は、こちらのページをご参照ください。
また、このプラグインの他にも、いくつかのプラグインを配布しています。
配布中のプラグインは、Movable Type Plugin Directoryのページをご参照ください。
Movable Typeのプラグイン開発等のドキュメント「Movable Type Developer's Guide Volume 1」も販売しています。
ご自分でプラグインを作ってみたい方に、ぜひお勧めしたい一冊です。
詳細は特設ページをご覧ください。
ファイルを解凍すると、「MailForm」というフォルダができます。
このフォルダを、Movable Typeの「plugins」ディレクトリの中にアップロードします。
2.メールフォームテンプレートのヘッダー部分の書き換え
次に、メールフォームのヘッダー部分（<head>～</head>）に、以下を追加します。
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript">
<!--
function mail_ajax(mode)
{
var params = Form.serialize("mail_form");
if (mode == "post") {
params += "&mail_post=1";
}
else if (mode == "preview") {
params += "&mail_preview=1";
}
new Ajax.Request("<$MTCGIPath$>plugins/MailForm/mt-mail-form.cgi",
{ method : "post",
parameters : params,
onComplete : displayMailResult });
$("send_status").innerHTML = '<p>送信中です...</p>';
}
function displayMailResult(obj)
{
$("send_status").innerHTML = "";
$("ajax_mail").innerHTML = obj.responseText;
}
//-->
</script>
なお、prototype.jsはあらかじめ入手して、Blogの出力先ディレクトリにアップロードしておいてください。
3.メールフォームテンプレートのフォーム部分の書き換え
次に、メールフォームテンプレートのフォーム部分を、以下のように書き換えます。
・タグの追加
まず、以下のタグを追加します。
<input type="hidden" id="ajax" name="ajax" value="1" />
・「送信」「確認」ボタンの変更
「送信」および「確認」ボタンの部分を、以下のように変更します。
<input type="button" name="mail_preview" id="mail_preview" accesskey="v" value="確認" onclick="mail_ajax('preview');" />
<input type="button" name="mail_post" id="mail_post" accesskey="s" value="送信" onclick="mail_ajax('post');" />
4.Ajax化する部分をdivタグで囲む
次に、メールフォームテンプレートの中で、Ajaxによって表示を切り替えたい部分を、「<div id="ajax_mail">」と「</div>」のdivタグで囲みます。
5.状況表示用のｄｉｖタグを追加
次に、「送信」や「確認」のボタンをクリックしたときに、メッセージを表示するための部分を作ります。
メールフォームテンプレートの中で、上の4.の</div>タグの後あたりに、以下のタグを追加します。
<div id="send_status"></div>
6.プレビュー用等のテンプレートモジュールの書き換え
次に、プレビュー／エラー／送信完了の各テンプレートモジュールを書き換えます。
これらのテンプレートモジュールには、Ajaxで表示する部分（上の4.のdivタグの内部に表示する部分）だけを入れます。
7.サンプル
以下をクリックすると、Ajax化したメールフォーム(MT標準テンプレートベース）のサンプルをダウンロードすることができます。
8.注意点
AjaxではUTF-8でデータを送受信しますが、文字コードの変換の処理は、プラグインの内部で行うようにしてあります。
したがって、MT-I18Nプラグイン等の文字コード変換プラグインは不要です。
なお、Movable Typeの文字コードをEUC-JPにした状態で、Ajax化したメールフォームが動作することを確認しました。
コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。
こんにちはー^^
お世話になりまっす！
Ajaxに対応していただいてありがとうございます！
これでeuc-jpのサイトでも使えるんですね！最高です。
さっそく、利用させていただきました。
質問なのですが、「送信」「確認」ボタンの部分を画像にしてみたのですが、うまく動きませんでした・・・どのようにしたらよいのでしょうか？よろしくお願いします。
＞デザインウォーカーさん
こんにちは。プラグインご利用ありがとうございます。
ご質問の件ですが、ボタンのonclickのところで、「onclick="mail_ajax('post'); return false;" 」のように「return false;」を追加してください。
どうもです～。ご指摘どおり「onclick="mail_ajax('post'); return false;" 」でうまく作動しました！！ありがとうございます～。。
壱さん、こんにちは。
プラグイン、使わせていただいてます。
メールの送信内容の文字化けや画面表示等、問題無いと思っていたのですが、送信エラーの時の「MTErrorMessage」の出力のみ文字化けを起こしているように思えます。
送信完了時の「MTMailPreviewAuthor」などは問題なく表示されております。
これらは、処理方法が違うのでしょうか？
＞oscarさん
こんにちは。プラグインご利用ありがとうございます。
lib/MailForm.pmファイルの文字コードを、MTの文字コードに合わせてからアップロードすれば、文字化けはしなくなると思います。
lib/MailForm.pmの文字コードを変更して、動作させることが出来ました。
ありがとうございました。
こんにちは。
いつも質問ばっかりですみません。また質問させて頂きます。ごめんなさい。
MailformをAjax化しようと思い、バージョンアップしてとりあえずサンプルテンプレートに置き換えてみたのですが、確認や送信ボタンを押すと「送信中です...」とは出るのですが、表示が全然切り替わりません。
従来の形に戻すと、ちゃんと動くのですが・・・
これはどういう原因が考えられそうでしょうか？
アバウトな質問ですみませんが、何かわかりましたらお教えください。
よろしくお願いします。
＞teiさん
こんにちは。
お書きになった現象からすると、AjaxでメールフォームプラグインのCGIを呼び出す処理がうまくいっていないようです。
ただ、実際のそちらのメールフォームのページを見ていないので、はっきりとした原因は分かりません。
壱さん
ご返信ありがとうございます。
色々と試したのですが、未だどうにもなってません。
もうちょっと頑張ってみます。
こんばんは
2カラムのテンプレートに貼り付けて使おうとしたところ
サイドバーが横ではなく下につながってしまうようになりました
設置にあたり、何か書き換える部分があるのでしょうか？
＞まつおさん
こんにちは。プラグインご利用ありがとうございます。
サイドバーが下に落ちる場合、サイドバーかコンテンツのどちらかに幅が広いものがあって、そのためにその部分全体の幅が広くなっていることが原因です。
メールフォームを入れてサイドバーが落ちるようになったということからすると、フォームの入力欄の幅が広いのではないかと思います。
inputタグやtextareaタグで幅の指定を変えるか、あるいはスタイルシートでこれらの要素の幅を指定すれば良いと思われます。
▽壱さん
アドバイスありがとうございます
フォームの入力幅を狭くしてみているのですが
それでも駄目なんです
それでHEAD部に埋めこんだJavaScriptやCGIに
何か幅を指定するような設定があるのかと思いまして...
まだ何か見落としているのかもしれません
もうしばらくいろいろ試してみます
はじめまして。
プレビューの時に、チエックボックスやセレクトメニューで入力項目を増やした場合、入力状態を格納するにはどのようにすればよいのでしょうか？
例えば「checked="checked"」や「selected="selected"」といった状態です。
ヒントをいただければ幸いです。
すみません、チェックボックスやセレクトメニューの件については他のエントリーですでにコメントがありました。
気長にバージョンアップを楽しみにしています。