Home > Internet > Movabletype > Ajaxメールフォームをメールフォームプラグイン(Ajax対応)に対応させる

Ajaxメールフォームをメールフォームプラグイン(Ajax対応)に対応させる

Ajaxメールフォームをメールフォームプラグイン(Ajax対応)に対応させる　って、タイトル長～

The blog of H.Fujimoto：メールフォームプラグイン（Ajax対応）で、AjaxRequestでの送信が可能になったため、bzbellさんのMovableType備忘録: Ajax風なメールフォームを設置するを、対応するように変更してみました。

bzbellさんのスクリプトは、AjaxCommentをベースにしているようなので、その構造をほぼ引き継いでます。今回壱さんが書かれたスクリプトを見ると、かなり手を入れてますね。
プレビューとポストを関数内で変化させてる部分など、すごく参考になります。

ただし、壱さんのスクリプトはビジュアルな装飾部分がとても少なく、実際見た目的にはAjaxぽさはあまりありません。(っていうか、Ajaxはエフェクトを指してるんじゃないんで、壱さんが正解なんですが)送信時に裏でAjaxRequestが動き、プログレスメッセージが表示されメールが送信されるだけです。実際にはプラグインの戻りで動的にメッセージが書き換えられているのですが、普通に画面遷移をしているように見えてしまいます。（見た目だとあまり派手さが少ない・・・）

という訳で、見た目はbzbellさんのフォームの動きを参考に、壱さんのスクリプトの良い部分を取り込んでみる事にしました。

なぁ～んてのを途中まで書いてたのですが、いつも途中で脇道にそれちゃうんですよね。
という訳で、メールフォームがほぼ完成しました。
といっても、なぜかwindows.jsで表示した中では、wFormsの機能動いてくれないんですけどね。ポップアップする相対位置の問題っぽいです。
ここら辺だけ、課題残です・・・別なツールチップの実装方法考えないと・・・

Ajaxメールフォームじゃ使えない人がいないのか？

当たり前ですけど、script.aculo.usのエフェクトバリバリの、しかも送信がAjaxじゃ、使えないブラウザが存在する事になります。必要度からすれば、そっちの方がありそうなんですが。という訳で、今回のメールフォームは2タイプ作ってます。今までどおりのCGIで送信するタイプと、エフェクトバリバリ？のAjaxタイプです。壱さんのメールフォームプラグインには、新しくAjaxで動作させるための指定が追加されてます。そのパラメーターと、動作部分を見直したメールフォームをインデックステンプレートとして作成してあります。ここは特に特別なことはしてません。壱さんのサンプルの見た目を少しいじっただけです。

それから同じリンク部分を、$()関数指定で書き換える事で、prototypeが使えるブラウザーだとCGI版へのリンクがAjax版へのリンクに書き変わります。

こんな感じです。

<div id="mail_post"><div id="mail_post_pop" class="pkg"><a href="/mailform.php" title="メール送信フォーム">メールフォーム<img src="http://www.zelazny.mydns.jp/images/silk_icons/email.png" width="16" height="16" style="vertical-align: middle;" /></a></div></div><script language="JavaScript" type="text/javascript"><!--str1 = "/mailform.php";str2 = "javascript:openConfirmDialog();";$("mail_post_pop").innerHTML = $("mail_post_pop").innerHTML.replace(str1,str2);//--></script>

要は置換結果を元の部分に戻してやってる。

これは、結構他の部分へも応用が利くと思います。他にもこういうのが必要な所があるんで、少しずつ適用していこうと思ってます。

メールフォームのポップアップ

すでに何度か紹介している通り、この部分には「Prototype Window Class」を使用しています。一通り他のポップアップも試してみたのですが、ポップアップの種類がダイアログやインフォウィンドウなど、色々あるのでこれにしています。（他はウィンドウ自身とその中身が連動してない様だったので）

もっとも、今だったらp0t: pprompt.jsを使ったかもしれないですね。

今回使ったのがコンファームダイアログ、OKとキャンセルボタンに機能を割り当てられます。

function openConfirmDialog() {    Dialog.confirm("　表示するフォームの内容（XHTML）", {    windowParameters: {className:"alphacube", width:380, height:500},    buttonClass: "ajaxform-mail-button",    id: "ajaxform-mail-box",    okLabel: "メール送信",     ok:function(win) {mail_ajax("post"); return false},    cancelLabel: "閉じる",     cancel:function(win) {return true}    });}

最初のダブルクォート内がポップアップ内に表示されるXHTMLです。ここにメールフォームを書きます。windowParametersは表示するウィンドウの形を決定します。alphacubeというCSSを適用し、サイズを指定してます。ボタンに表示するラベルも明示することで変更できます。OK時はmail_ajax("post")を実行してます。キャンセル時は何もせずにWindowを閉じるだけです。

Ajax版メールフォーム

メールフォーム自体は壱さんの解説にあるとおりです。１点だけ、これまた非UTF-8サイトでの注意点として、プラグインがエラーを吐き出す時に、/plugins/MailForm/lib/MailForm.pmの文字コードで吐き出されます。その為非UTF-8サイトでは上記ファイルをサイトの文字コードに合わせて保存し直してください。・・・解らなくて壱さんに聞いちゃいました。

<div class='form-title'>メール送信フォーム</div><div id='ajax_mail' class='mail_form_text'><form method='post' id='mail_form' name='mail_form'>  <input type='hidden' id='mail_post_template' name='mail_post_template' value='Mailform: AjaxPosted' />  <input type='hidden' id='mail_error_template' name='mail_error_template' value='Mailform: AjaxError' />  <input type='hidden' id='mail_blog_id' name='mail_blog_id' value='<$MTBlogID$>' />  <input type='hidden' id='ajax' name='ajax' value='1' /> <div class='form-input-block'>  <label for='mail_author' id='mail_author-L' class='preField form-labels'>お名前:</label>  <input type='text' id='mail_author' name='mail_author' size='30' value='' class='required' /> <div id='mail_author-H'>  <span class='reqMark'>*</span>お名前（ハンドル）の入力が必須です。 </div></div><div class='form-input-block'>  <label for='mail_email' id='mail_email-L' class='preField form-labels'>メールアドレス:</label>  <input type='text' id='mail_email' name='mail_email' size='30' value='' class='required validate-email' /> <div id='mail_email-H'>  <span class='reqMark'>*</span>Eメールアドレスの入力が必須です。 </div></div><div class='form-input-block'>  <label for='mail_subject' id='mail_subject-L' class='preField form-labels'>メールタイトル:</label>  <input type='text' id='mail_subject' name='mail_subject' size='30' value='' /> <div id='mail_subject-H'>無理に入力する必要はありません。</div></div><div class='form-input-block'>  <label for='mail_text' id='mail_text-L' class='preField form-labels'>メール本文:<span class='reqMark'>*</span>  <span id='mail_text-H'>もちろん本文が必要です。</span> </label> <textarea id='mail_text' name='mail_text' rows='10' cols='50'></textarea></div></form><img id='progress' style='display:none;' src='<$MTBlogURL$>images/ajax-loader.gif' width='220' height='19' alt='Loading...' /></div><div id='send_status'></div>

青がおなじみの送信中表示のイメージです。見た目重視なんでやってます。入力ヒント部分は、自分の気に入るように変更します。

後は元のbzbellさんの（というかAjaxcommentの）ように、エフェクトを割り当てます。

メールフォームのエフェクト

エフェクトは２つ。一つは送信時に表示されるさっきのおなじみイメージ。mail_ajax()の最初に、

$('progress').style.display = '';

というのを追加すれば、送信時に表示されるようになります。送信後の戻りはdisplayMailResult()というのが起動しますので、このスクリプトの中身を変更します。送信ステータスを表示し、フォーム自信をCGIからの戻りと入れ替える。という処理をまとめて行います。

function displayMailResult(obj) {   $("send_status").innerHTML = "";   $("ajax_mail").innerHTML = obj.responseText;   new Effect.Highlight('ajax_mail',{ startcolor: '#FF9933', duration: 2.0 });}

最初にステータス部分を表示し、フォームの中身(ajax_mailというidの部分)を、そっくりCGIの戻りと入れ替えます。ローディングイメージもこの時に書き換えられて無くなります。最後はおまけのハイライトエフェクトです。

こんな感じでよりAjaxっぽい（ただし見た目が）メールフォームの完成です。
ちなみにCGIの戻り部分（送信完了時テンプレートや送信エラー時テンプレート）もAjaxっぽく直しておくのを忘れないようにしましょう。

正月から、こんな長文書いてるオレって、季節感ゼロ！

Newer >: links for 2007-01-01
< Older: 新年の挨拶は着物でしょ・・

わりと新しめの関連してるかもしれないエントリー達（10件）

ping a Trackback

TrackBack URL for this entry.(1)

Comments:(2)

bzbell said January 2, 2007 6:46 AM | ReplyThis!

あけおめでぇ～す(￣∇￣)/
昨年は大変お世話になりました。本年もよろしくお願い致します(m_ _)mペコ

この記事を参考に久しぶりにメールフォームをイジってみます♪

> 正月から、こんな長文書いてるオレって、季節感ゼロ！

そんなことないですよぉ(￣∇￣)b
ぜんぜんOKですっ!!
今年もいろんな記事期待してます♪

カンタンですが新年のご挨拶でした。
では。

oscar replied for bzbell's comment January 2, 2007 11:10 AM | ReplyThis!: あけまして、おめでとうございます。
こちらこそ、大変お世話になりました。
bzbellさんが、詳しく解りやすい記事書いて下さるおかげで、こちらはちょっと斜めから見たフォローみたいな記事を書く事が出来ました。
・・・正面は苦手なんだよね・・・
廻りがどんどん、WordPressに移行していく中、MT使ってる方が居るのは心強いんですよ！
今年も、いっしょにガンバリましょう！