お知らせ

これだけは知っておきたい Webアプリケーションの常識 2008年3月28日

これだけは知っておきたい Webアプリケーションの常識」が発売されました。
Webアプリケーションを作る上では、HTTPのプロトコルや、開発言語、データベースなど、さまざまな知識を組み合わせることが必要になります。
それらを全般的にまとめた一冊です。
Webアプリケーション開発にチャレンジしたい方や、実際に開発までしないまでも基礎知識として知っておきたい方にお勧めです。

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

メールフォームプラグイン(Ajax対応)

| コメント(15) | トラックバック(4)

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

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

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

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

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

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

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

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

MailForm_1_30.zip

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

ファイルを解凍すると、「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.状況表示用のdivタグを追加

次に、「送信」や「確認」のボタンをクリックしたときに、メッセージを表示するための部分を作ります。
メールフォームテンプレートの中で、上の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化したメールフォームが動作することを確認しました。

トラックバック(4件)

このブログ記事を参照しているブログ一覧: メールフォームプラグイン(Ajax対応)

このブログ記事に対するトラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/693.

» MT メールフォームのAjax対応版へのアップロード(BitbizDesign/Hiroki Harada)からのトラックバック

第8回 メールフォームプラグイン(Ajax対応)の導入 The blog of H.Fujimotoさんに、メールフォームプラグインのAjax対応版が公開... 続きを読む

» Ajaxのメールフォームプラグイン(デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記)からのトラックバック

このブログのサイドバーにわたくしにメール送信できるようにメールフォームを取り付けましてん。一見、ただのメールフォームなのですが、これがなかなかいいんですわ... 続きを読む

» メールフォーム(ういろー・ざ・わーるど)からのトラックバック

今月17日に自前サーバに移転・オープンして 実際に運用しながら細部の修正や変更を... 続きを読む

Ajaxメールフォームをメールフォームプラグイン(Ajax対応)に対応させる って、タイトル長〜 The blog of H.Fujimoto:メールフ... 続きを読む

コメント(スレッド6件,コメント15件)

コメントはスレッド表示になっています。
また、スレッドの先頭のコメントに対する返信には、先頭に矢印を表示しています。

プラグインについてご質問をされる方は、ご自分のBlogのURLを必ず入力してください。
また、プラグインの開発やサポートを継続的に行えるようにするために、ドネーション(寄付)をしていただけると幸いです。
金銭的寄付だけでなく、精神的寄付も歓迎します。
ドネーションのページはこちら

No.1 fag : (無題)

こんにちはー^^
お世話になりまっす!
Ajaxに対応していただいてありがとうございます!
これでeuc-jpのサイトでも使えるんですね!最高です。

No.2 デザインウォーカー : (無題)

さっそく、利用させていただきました。
質問なのですが、「送信」「確認」ボタンの部分を画像にしてみたのですが、うまく動きませんでした・・・どのようにしたらよいのでしょうか?よろしくお願いします。

No.3  Author Profile Page: (無題)

>デザインウォーカーさん
こんにちは。プラグインご利用ありがとうございます。

ご質問の件ですが、ボタンのonclickのところで、「onclick="mail_ajax('post'); return false;" 」のように「return false;」を追加してください。

No.4 デザインウォーカー : (無題)

どうもです~。ご指摘どおり「onclick="mail_ajax('post'); return false;" 」でうまく作動しました!!ありがとうございます~。。

No.5 oscar : (無題)

壱さん、こんにちは。
プラグイン、使わせていただいてます。
メールの送信内容の文字化けや画面表示等、問題無いと思っていたのですが、送信エラーの時の「MTErrorMessage」の出力のみ文字化けを起こしているように思えます。
送信完了時の「MTMailPreviewAuthor」などは問題なく表示されております。
これらは、処理方法が違うのでしょうか?

No.6  Author Profile Page: (無題)

>oscarさん
こんにちは。プラグインご利用ありがとうございます。

lib/MailForm.pmファイルの文字コードを、MTの文字コードに合わせてからアップロードすれば、文字化けはしなくなると思います。

No.7 oscar : (無題)

lib/MailForm.pmの文字コードを変更して、動作させることが出来ました。
ありがとうございました。

No.8 tei : (無題)

こんにちは。
いつも質問ばっかりですみません。また質問させて頂きます。ごめんなさい。

MailformをAjax化しようと思い、バージョンアップしてとりあえずサンプルテンプレートに置き換えてみたのですが、確認や送信ボタンを押すと「送信中です...」とは出るのですが、表示が全然切り替わりません。
従来の形に戻すと、ちゃんと動くのですが・・・
これはどういう原因が考えられそうでしょうか?
アバウトな質問ですみませんが、何かわかりましたらお教えください。
よろしくお願いします。

No.9  Author Profile Page: (無題)

>teiさん
こんにちは。

お書きになった現象からすると、AjaxでメールフォームプラグインのCGIを呼び出す処理がうまくいっていないようです。
ただ、実際のそちらのメールフォームのページを見ていないので、はっきりとした原因は分かりません。

No.10 tei : (無題)

壱さん
ご返信ありがとうございます。
色々と試したのですが、未だどうにもなってません。
もうちょっと頑張ってみます。

No.11 まつお : (無題)

こんばんは
2カラムのテンプレートに貼り付けて使おうとしたところ
サイドバーが横ではなく下につながってしまうようになりました
設置にあたり、何か書き換える部分があるのでしょうか?

No.12  Author Profile Page: (無題)

>まつおさん
こんにちは。プラグインご利用ありがとうございます。

サイドバーが下に落ちる場合、サイドバーかコンテンツのどちらかに幅が広いものがあって、そのためにその部分全体の幅が広くなっていることが原因です。
メールフォームを入れてサイドバーが落ちるようになったということからすると、フォームの入力欄の幅が広いのではないかと思います。
inputタグやtextareaタグで幅の指定を変えるか、あるいはスタイルシートでこれらの要素の幅を指定すれば良いと思われます。

No.13 まつお : (無題)

▽壱さん
アドバイスありがとうございます
フォームの入力幅を狭くしてみているのですが
それでも駄目なんです
それでHEAD部に埋めこんだJavaScriptやCGIに
何か幅を指定するような設定があるのかと思いまして...
まだ何か見落としているのかもしれません
もうしばらくいろいろ試してみます

No.14 せんむ : (無題)

はじめまして。
プレビューの時に、チエックボックスやセレクトメニューで入力項目を増やした場合、入力状態を格納するにはどのようにすればよいのでしょうか?
例えば「checked="checked"」や「selected="selected"」といった状態です。
ヒントをいただければ幸いです。

No.15 せんむ : (無題)

すみません、チェックボックスやセレクトメニューの件については他のエントリーですでにコメントがありました。
気長にバージョンアップを楽しみにしています。

コメントする

管理者のみにコメントを送信したい場合は、「コメントを秘密にする」のチェックをオンにしてコメントを送信するか、メールフォームからメールをお送りください。

ブログ全体の感想など、この記事に直接に関係しないコメントは、ゲストブックにお気軽に投稿してください。


アーカイブ

ブログパーツ

ステータス