お知らせ
2008年3月28日
「これだけは知っておきたい Webアプリケーションの常識」が発売されました。
Webアプリケーションを作る上では、HTTPのプロトコルや、開発言語、データベースなど、さまざまな知識を組み合わせることが必要になります。
それらを全般的にまとめた一冊です。
Webアプリケーション開発にチャレンジしたい方や、実際に開発までしないまでも基礎知識として知っておきたい方にお勧めです。
他にも多数書籍を執筆しています。
こちら
メールフォームプラグイン（Ajax対応）
2007年5月30日
スパム対策機能等を追加したV1.30を公開しました。
2007年1月27日
メールフォームプラグインにクロスサイトスクリプティングの脆弱性等の不具合が見つかりました。申し訳ありません。
こちらのエントリーをご参照の上、最新版にアップデートしてください。
2007年1月23日
メールフォームプラグインのバージョン1.20を公開しました。
解説も更新しましたので、こちらのエントリーをご参照ください。
メールフォームプラグインをバージョンアップし、Ajaxに対応させました。
従来のプラグインでは、メールの確認や送信の際には、メールフォームのページからCGIを呼び出す形になっています。
これに加えて、メール送信等の処理をAjaxで行うことができるようにしました。
そこで、これまでのメールフォームをAjax化する手順を紹介します。
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化したメールフォームが動作することを確認しました。
前後の記事
関連するエントリー(10件)
- メールフォーム作成用プラグイン(汎用フォーム対応/MT3.3対応・その4)(2006年07月10日 10:16)
- メールフォーム作成用プラグイン(汎用フォーム対応/MT3.3対応・その3)(2006年07月09日 13:15)
- メールフォーム作成用プラグイン(汎用フォーム対応/MT3.3対応・その2)(2006年07月08日 22:01)
- メールフォーム作成用プラグイン(汎用フォーム対応/MT3.3対応・その1)(2006年07月07日 10:30)
- メールフォームのサンプルテンプレート(2006年03月14日 16:27)
- メールフォーム作成用プラグイン（その5）(2006年03月13日 09:58)
- メールフォーム作成用プラグイン（その4）(2006年03月12日 21:06)
- メールフォーム作成用プラグイン（その3）(2006年03月11日 09:09)
- メールフォーム作成用プラグイン（その2）(2006年03月10日 13:13)
- メールフォーム作成用プラグイン（その1）(2006年03月09日 21:53)
トラックバック(4件)
このブログ記事を参照しているブログ一覧: メールフォームプラグイン（Ajax対応）
このブログ記事に対するトラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/693.
第8回 メールフォームプラグイン(Ajax対応）の導入 The blog of H.Fujimotoさんに、メールフォームプラグインのAjax対応版が公開... 続きを読む
このブログのサイドバーにわたくしにメール送信できるようにメールフォームを取り付けましてん。一見、ただのメールフォームなのですが、これがなかなかいいんですわ... 続きを読む
Ajaxメールフォームをメールフォームプラグイン(Ajax対応)に対応させる って、タイトル長〜 The blog of H.Fujimoto：メールフ... 続きを読む
コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。
プラグインについてご質問をされる方は、ご自分のBlogのURLを必ず入力してください。
また、プラグインの開発やサポートを継続的に行えるようにするために、ドネーション（寄付）をしていただけると幸いです。
金銭的寄付だけでなく、精神的寄付も歓迎します。
ドネーションのページはこちら
こんにちはー^^
お世話になりまっす！
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"」といった状態です。
ヒントをいただければ幸いです。
すみません、チェックボックスやセレクトメニューの件については他のエントリーですでにコメントがありました。
気長にバージョンアップを楽しみにしています。