Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

MailForm プラグインを jQuery 化する

Jan042009
Vote:
http://bizcaz.com/archives/2009/01/04-190154.php
Categories: Customize
Tags: MailForm, Plugins
Social Bookmark

Prev Page: shadowbox を使ってエントリ修正画面のリンクを張る
Next Page: MT-Cumulus プラグインで最近のタグを表示

こんばんわ^^

年末年始のお休みも今日が最後って人は多いと思います。
わたしもその一人ですが、いつもながらあっという間で、毎年のことながらまったりできない年末年始でした（つω-`｡）みなさんはどぅでしょうか。

さて、現在のテンプレートに変更してからメールフォームを取り外してたのですが、とりあえず完成度 80% 程度ですが運用を開始しました。

今回は MailForm プラグインを jQuery 化して、Ajax Uploader という jQuery プラグインを使って、ファイルのアップロード機能を備えたメールフォームを作ってたのですが、どうしてもファイルのアップロードができませんでした。

デモと比較したところ、Ajax Uploader プラグインのインスタンス生成時に input タグ( ファイル選択用 )が自動生成されます。
その input タグのホバーイベントが、デモ版だと正しく入ってきて 'hover' というクラスが自動追加されたりなどされて、ファイル選択ダイアログが表示されるのですが、わたしのメールフォームだとそのイベントが発生してないんですよね。
それが直接の原因か分からないけど、違いはそこら辺ってかんじ。

[2009.01.04] アップローダーが動作しない原因が分かりました。
よく CSS の初期化でフォントサイズを変更したりしますが、Ajax Uploader を使用する際全体のフォントサイズを変更してしまうと動作しなくなります。
なので、わたしはアップローダーを包含するブロック要素配下のすべての子要素のみフォントサイズをデフォルトに戻すことで動作するようになりました。
※詳細は以降で配布する圧縮ファイルの内の CSS を参考にしてください。

後は、アップロードサイズの制限と、アップロードファイルの種類の制限を入れれば完成かな (●´∀｀●)

まだ完成ではないけど、メールフォームの機能は満たせてるのでとりあえずペンディングにしちゃいました (;￣∇￣A
今回は普通に MailForm プラグインの jQuery 化についてご紹介です。

ちなみにわたしが使ってる MailForm プラグインのバージョンは 2.10( 2009/01/04 時点の最新 )で Ajax 版を使用してます。
Ajax 版を利用されてない人にはまったく無意味な記事です。

カスタマイズ

MailForm プラグインを jQuery に対応するには以下のファイルを修正／追加します。

mt/plugins/MailForm/MailForm.pl
修正します。
mt/mt-static/plugins/MailForm/jquery.mailform.js
追加します。

以上です。
後は今まで通り使えます。また、変更後は一度再構築し直す必要もあります。

MailForm プラグインの修正

まず、MailForm.pl ファイルを以下のように修正します。
MailForm.pl 235 行目
1. my $out = <<HERE;
2. <script type="text/javascript" src="${static_path}plugins/MailForm/js/prototype.js"></script>
3. <script type="text/javascript" src="${static_path}plugins/MailForm/js/mailform.js"></script>
4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
5. <script type="text/javascript" src="${static_path}plugins/MailForm/js/jquery.mailform.js"></script>
6. <script type="text/javascript">
7. //<![CDATA[
上記赤字の 235、246 行を削除して青字で置き換えます。変更したら保存します。
この修正は MTMailFormAjaxJS ファンクションタグに影響します。テンプレートでいうと、インデックステンプレートの「mail_form:メールフォーム」に関係します。
JavaScript のアップロード

jQuery 版 mailform.js スクリプトを新規でアップロードします。 jQuery 版 mailform.js のコードは以下の通りです。
jQuery 版 mailform.js
1. jQuery.noConflict();
2. var j$ = jQuery;
3. var FJAjaxMail = {};
5. FJAjaxMail.send = function(mode) {
6. var form = document.mailform;
7. var resp = j$('#ajax_mail');
8. var opts = {preview:'&mail_preview=1', post:'&mail_post=1'};
9. var params = [j$(form).serialize(), opts[mode].join('');
11. resp.html(FJAjaxMail.waitMsg).ajaxError(function(ev, req, ops, err) {
12. j$(this).html(FJAjaxMail.failureMsg);
13. return false;
14. });
15. j$.post([FJAjaxMail.cgiPath, 'plugins/MailForm/mt-mail-form.cgi'].join(''), params, function(message, status) {
16. resp.html(FJAjaxMail.safari_escape(message));
17. return false;
18. });
19. };
21. FJAjaxMail.safari_escape = function(text) {
22. if (navigator.appVersion.indexOf("KHTML") > -1) {
23. var esc = escape(text);
25. if (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) {
26. text = decodeURIComponent(esc);
27. }
28. }
30. return text;
31. };
上記コードを jquery.mailform.js というファイル名で保存して、mt/mt-static/plugins/MailForm/js/ フォルダ内にアップロードします。

以上です。
後はメールフォームを再構築すれば完了です。

ちなみに、上記コードは単純にオリジナルの mailform.js を jQuery で置き換えただけですが、わたしのサイトではさらにカスタマイズして、フォーカスイン、フォーカスアウト時の強調表示なども賄ってます。

bzbell 版 mailform.js

jQuery.noConflict();
var j$ = jQuery;
var FJAjaxMail = {};
j$(document).ready(function() {
FJAjaxMail.focus_bg = '#d3cbc6';// フォーカスイン時の背景色
FJAjaxMail.blur_bg = '#fbfaf5';// フォーカスアウト時の背景色
FJAjaxMail.focus_bd = '#c89932';// フォーカスイン時のボーダー色
FJAjaxMail.blur_bd = '#000'; // フォーカスアウト時のボーダー色
FJAjaxMail.image_height = 200; // 背景イメージ高さ
FJAjaxMail.setevent();
});
FJAjaxMail.setevent = function() {
/*
* 全 input タグに hover イベント割り当て
*/
j$(':input').hover(function() {
j$(this).css({'border-color':FJAjaxMail.focus_bd});
},
function() {
j$(this).css({'border-color':FJAjaxMail.blur_bd});
})
/*
* preview/post ボタンに click イベント割り当て
*/
.filter('input[@type="button"]').click(function() {
var form = document.mailform;
var resp = j$('#ajax_mail');
var opts = {mail_preview:'&mail_preview=1', mail_post:'&mail_post=1'};
var params = [j$(form).serialize(), opts[j$(this).attr('name')]].join('');
resp.html(FJAjaxMail.waitMsg)
.ajaxError(function(ev, req, ops, err) {
j$(this).html(FJAjaxMail.failureMsg);
return false;
});
j$.post([FJAjaxMail.cgiPath, 'plugins/MailForm/mt-mail-form.cgi'].join(''), params, function(message, status) {
resp.html(FJAjaxMail.safari_escape(message));
FJAjaxMail.setevent();
return false;
});
})
.end()
/*
* 全 input:text タグに focus/blur イベント割り当て
*/
.filter('input[@type="text"]').focus(function() {
j$(this).css({'background-color':FJAjaxMail.focus_bg, 'background-position':'0 -'+FJAjaxMail.image_height+'px', 'border-color':FJAjaxMail.focus_bd});
})
.blur(function() {
j$(this).css({'background-color':FJAjaxMail.blur_bg, 'background-position':'0 0', 'border-color':FJAjaxMail.blur_bd});
});
/*
* 全 textarea タグに hover/focus/blur イベント割り当て
*/
j$('textarea').focus(function() {
j$(this).css({'background-color':FJAjaxMail.focus_bg, 'background-position':'0 -'+FJAjaxMail.image_height+'px', 'border-color':FJAjaxMail.focus_bd});
})
.blur(function() {
j$(this).css({'background-color':FJAjaxMail.blur_bg, 'background-position':'0 0', 'border-color':FJAjaxMail.blur_bd});
})
.hover(function() {
j$(this).css({'border-color':FJAjaxMail.focus_bd});
},
function() {
j$(this).css({'border-color':FJAjaxMail.blur_bd});
});
};
FJAjaxMail.safari_escape = function(text) {
if (navigator.appVersion.indexOf("KHTML") > -1) {
var esc = escape(text);
if (esc.indexOf("%u") < 0 && esc.indexOf("%") > -1) {
text = decodeURIComponent(esc);
}
}
return text;
};

ざっくり説明すると、メールフォームのページが表示されたら hover、focus、blur、click イベントを各 input タグに割り当てることをやってます。
これに伴って、テンプレートモジュールの「mail_common:メールフォーム共通部分」を以下のように変更します。

mail_common:メールフォーム共通部分

<div id="mailform-block">
<form method="post" action="-" name="mailform" id="mailform">
<fieldset class="rounded">
<p id="owner" class="clearfix"><img src="<$MTStaticWebPath$>plugins/mt_memo/images/iddy/profile.png" width="100%" height="100%" alt="bzbell" /></p>
<p><label for="mail_author">Name</label>
<input type="text" id="mail_author" name="mail_author" class="mail_input" value="<$MTMailPreviewAuthor$>" /></p>
<p><label for="mail_email">Email address</label>
<input type="text" id="mail_email" name="mail_email" class="mail_input" value="<$MTMailPreviewEMail$>" /></p>
<p><label for="mail_email_confirm">Retype email address</label>
<input class="mail_input<MTMailPreviewIfEMailDifferent> mail_error</MTMailPreviewIfEMailDifferent>" type="text" id="mail_email_confirm" name="mail_email_confirm" value="<$MTMailPreviewEMailConfirm$>" /></p>
<p><label for="mail_subject">Title</label>
<input type="text" id="mail_subject" name="mail_subject" class="mail_input" value="<$MTMailPreviewSubject$>" /></p>
<p><label for="mail_text">Message</label>
<textarea id="mail_text" name="mail_text" class="mail_input" rows="12" cols="20"><$MTMailPreviewBody$></textarea></p>
<p class="center"><input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />
<input type="hidden" name="mail_ajax" value="1" />
<input type="hidden" name="mail_setting" value="<$mt:GetVar name="mail_setting"$>" />
<input type="button" name="mail_preview" id="mail_preview" accesskey="v" value="Preview" />
<input type="button" name="mail_post" id="mail_post" accesskey="s" value="Post" /></p>
</fieldset>
</form>
</div>

何が違うかというと、テンプレート内に JavaScript のコードが消えたってことでしょうか。
参考までに、わたしが使ってる MailForm プラグインを以下に置いておきます。上記で説明されてるコード、およびテンプレート一式を同梱してます。
一部取っ掛かり中のファイルアップロード機能のコードも含まれてますが気にしないでください。

MailForm_with_jQuery.zip

では。

Edit
Permalink
4 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(4)

#1: Posted by kchin.openid.ne.jp @ April 7, 2009 [REPLY]

こんにちは^^
メールフォームを設置しようと思っているのですが
その前に・・・またIE８でのエラー情報です
bzbellさんのメールフォームURLをクリックすると（サイドバーにあるメールフォーム）
エラーが発生しフォームが表示されていません^^；

Foxだとエラーも無くメールを送る事ができるのですが

エラー内容は下記のとおりです

メッセージ: 引数が無効です。
ライン: 12
文字: 12949
コード: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

#2: Posted by bzbellからkchin.openid.ne.jpへの返信 @ April 7, 2009 [REPLY]

>>1 kchin.openid.ne.jp さん

こんばんわ^^

そうなんです。
shadowbox というライブラリを使用してまして、IE8 だとエラーしちゃうんですよね。
すっかり忘れてました
shadowbox と併用しなければ問題ないかと思います。

ご連絡ありがとうございます

#3: Posted by asd @ May 13, 2009 [REPLY]

こんにちは、
jquery版メールフォーム使わせていただきました。
jquery.mailform.jsをアップして使おうと思ったら、エラーが出てました。
jQuery 版 mailform.jsの９行目
var params = [j$(form).serialize(), opts[mode].join('');
を
var params = [j$("form").serialize(), opts[mode]].join('');

結構使いたい人がいると思うので、ご報告しておきます〜。

#4: Posted by bzbellからasdへの返信 @ May 13, 2009 [REPLY]

>>3 asd さん

こんばんわ^^

> 結構使いたい人がいると思うので、ご報告しておきます〜。

あちゃ
修正版を UP しました。
ご連絡ありがとうございます