メールフォームプラグイン（Ajax対応）

2007年5月30日
スパム対策機能等を追加したV1.30を公開しました。

2007年1月27日
メールフォームプラグインにクロスサイトスクリプティングの脆弱性等の不具合が見つかりました。申し訳ありません。
こちらのエントリーをご参照の上、最新版にアップデートしてください。

2007年1月23日
メールフォームプラグインのバージョン1.20を公開しました。
解説も更新しましたので、こちらのエントリーをご参照ください。

メールフォームプラグインをバージョンアップし、Ajaxに対応させました。

従来のプラグインでは、メールの確認や送信の際には、メールフォームのページからCGIを呼び出す形になっています。
これに加えて、メール送信等の処理をAjaxで行うことができるようにしました。

そこで、これまでのメールフォームをAjax化する手順を紹介します。

1.プラグインのバージョンアップ

まず、以下のリンクをクリックして、プラグインをダウンロードします。

MailForm_1_30.zip

プラグインの継続的な開発やサポートのために、プラグインをご利用された方は、ドネーション（寄付）を行っていただけると幸いです。
ドネーションの方法は、こちらのページをご参照ください。

また、このプラグインの他にも、いくつかのプラグインを配布しています。
配布中のプラグインは、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化したメールフォームが動作することを確認しました。

お知らせ