Movable Type 備忘録

 Ajax風なメールフォームを設置する

  • Sep092006
  • Vote:
    http://bizcaz.com/archives/2006/09/09-191603.php
  • Categories: Plugins
  • Tags: ,
  • Social Bookmark

先週から少しずつ、Ajaxの勉強がてらメールフォームをAjax化できないものか…といろいろ思考錯誤してました。
Ajaxって以外にムズかしくて、HTML + CSS + JSの知識は必須で、更にHTTP通信の知識が必要とのことで、わたしにはハードルがちょと高すぎたかんじでしたけど、いつものごとく、人にはうまく説明できないながらも、ミヨウミマネでなんとかメールフォームをAjax化することができたので、忘れないうちにメモしておきます。

今回わたしが設置したメールフォームは、The blog of H.FujimotoさんのMailFormプラグインを流用してAjax化してみました。

- 2006.10.22 追記 -

The blog of H.Fujimotoさんのところで、Ajaxに対応されたプラグインが公開されました。 これでUTF-8以外の文字コードをお使いの人でもメールフォームをAjax化することができそうですね。

Ajaxに関して参考したサイトは、Ajaxを勉強しよう様とprototype.js の開発者向けメモ様です。

▼MailFormプラグインの入手はこちらから▼
http://www.h-fj.com/blog/archives/2006/07/07-103056.php
▼prototype.jsの入手はこちらから▼
http://bizcaz.com/archives/shoco/js/prototype.js
▼mailform.jsの入手はこちらから▼
http://bizcaz.com/archives/shoco/js/mailform.js

Ajax は、さきほども言ったように、JavaScript さえ知っていればできるものではなかったです。
Ajax は非同期通信といって、サーバと非同期でデータのやりとりをするんだそうです。

たとえば、あるページをブラウザで表示したとき、表示しきるまで時間がかかってしまうことってありますよね。 あれは同期通信なために起こるようで、1 つの処理を完結しない限りその先に進めないから…みたいです。
その点、非同期通信はサーバに要求だけだして、他の処理をやりつつ、サーバからの応答を受ける…という動作をするみたいです。

わたしの説明で分かりますかね（;￣∇￣A
わたしも明確にまだよく理解していないので、こんな説明しかできなくて申し訳ないです。

性格的に、考えるよりまず行動…という性質でして、実際に試して自分が経験しないと、分からないものですから…。

いろいろ説明しましたが、prototype.jsを使用すれば、いろんな、めんどうなところはすべてprototype.jsがやってくれます。
それに、コード的にもすっきりしたものが作れました。

わたしのメールフォームはこんなかんじ

MailFormプラグインのインストール

まず、MailFormプラグインをインストールします。
上記URLからmt-mail-form_110.zipという圧縮ファイルをダウンロードして、適当なフォルダに展開します。

そして、すべてのファイル(フォルダ)をmt/plugins/ディレクトリの中にMailFormディレクトリを新規作成してその中にアップロードします。

たとえば、わたしの場合でしたら http://bizcaz.com/mt/plugins/MailForm/ の中にアップロードしました。

アップロードが済んだら、MovableType(ムーバブルタイプ)のメイン・メニューからブログの「設定」をクリックして、画面上にある「プラグイン」をクリックしてください。
そしてMailFormプラグインの「設定を表示」をクリックします。

設定内容は説明するまでもないと思いますが、自分のメールアドレスとメールのタイトル名を入力します。
一通り入力したら「変更を保存」ボタンで保存します。

以上でMailFormプラグインのインストールは完了です。

メールフォーム用テンプレート作成

次にメールフォーム用のテンプレートを新規作成します。
メイン・インデックスのテンプレートをベースに作成すると楽かも、です。

ブログのテンプレート一覧を表示して、画面上にある「テンプレートを新規作成」をクリックすることでインデックス・テンプレートを作成することができます。

わたしが作ったメールフォーム用のテンプレートをサンプルに、各自でメイン・インデックスをベースにしてメールフォーム用のテンプレートを作成してください。

以下のコードを<head>～</head>の間に追加します。
prototype.jsとmailform.jsは上記URLからダウンロードして、各自の環境に合わせてアップロードしてください。

  1. <script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
  2. <script type="text/javascript" src="<$MTBlogURL$>mailform.js"></script>

以下のコードはメールフォームのメインにあたるコードです。

  1. <div id="mailform_block">
  2.     <form method="post" id="mailform" name="mailform">
  3.         <input type="hidden" name="mail_post_template" id="mail_post_template" value="Mailform: Complete" />
  4.         <input type="hidden" name="mail_preview_template" id="mail_preview_template" value="Mailform: Preview" />
  5.         <input type="hidden" name="mail_error_template" id="mail_error_template" value="Mailform: Error" />
  6.         <input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />
  7.  
  8.         <div id="mailform-open-content">
  9.             <div id="mailform-open-data">
  10.                 <p><label for="mail_author">Your Name:* </label>
  11.                 <input id="mail_author" type="text" size="30" name="mail_author" /></p>
  12.  
  13.                 <p><label for="mail_email">Your Mail Address:* </label>
  14.                 <input id="mail_email" type="text" size="30" name="mail_email" /></p>
  15.  
  16.                 <p><label for="mail_subject">Subject:* </label>
  17.                 <input id="mail_subject" type="text" size="30" name="mail_subject" /></p>
  18.  
  19.                 <p><label for="mail_text">Text:* </label>
  20.                 <textarea id="mail_text" rows="10" cols="50" name="mail_text" /></textarea></p>
  21.             </div><!-- mailform-open-data -->
  22.  
  23.             <div id="mailform-open-footer">
  24.                 <input type="submit" id="mail_preview" value="Preview" onclick="return ajax_preview();" />
  25.                 <input type="submit" id="mail_post" value="Post" onclick="return ajax_post();" />
  26.                 <input type="button" id="mail_close" value="Close" onclick="window.location=<$BlogURL$>" />
  27.                 <img id="progress" style="display:none;" src="<$MTBlogURL$>image/ajax-loader.gif" alt="Loading..." />
  28.             </div><!-- mailform-open-footer -->
  29.         </div><!-- mailform-open-content -->
  30.     </form>
  31. </div><!-- mailform_block -->
  32.  
  33. <div id="mail_result"></div>

青い字の部分では、後で作成する送信完了、プレビュー、送信エラー用のテンプレート・モジュール名をvablue=""属性で指定しています。
この名前は各自で自由に変更してください。 わたしの場合は以下のようなテンプレート・モジュール名としています。

  1. 送信完了: Mailform: Complete
  2. プレビュー: Mailform: Preview
  3. 送信エラー: Mailform: Error

このテンプレート・モジュール名を変更する場合には、後で作成するテンプレート・モジュールの名称と合わせて下さい。

赤い字の部分は各ボタンになります。
クリックされたら、onclick="return ajax_●●●();"で指定したファンクションを実行するよう支持しています。
ちなみに指定ファンクション内で本来のスクリプトを実行させています。 ここはそのまま使用してください。

緑の字の部分がAjaxによって表示されるブロックになります。

メールフォーム用のテンプレートが作成できたら、保存して再構築します。

各テンプレート・モジュールの作成

送信完了、プレビュー、送信エラーのテンプレート・モジュールを作成します。
ブログのテンプレート一覧から画面上にある「モジュール」をクリックして、画面右上にある「モジュールを新規作成」をクリックすることで、テンプレート・モジュールを作成することができます。

ここでつくるテンプレート・モジュールは、それぞれのメッセージ表示のために作成するだけです。 各メッセージ表示用のコードを以下に記します。 各自でメッセージ内容を変更してください。

  1. 送信完了用( Mailform: Complete )
  2. <h3>Thank you for mailing.</h3>
  3. <dl class="mailform_result">
  4.     <dt><$MTMailPreviewAuthor$>, Thank you for transmitting mail. </dt>
  5.     <dt><a href="<$MTBlogURL$>">[Home]</a></dt>
  6. </dl>
  7.  
  8. プレビュー用( Mailform: Preview )
  9. <h3>Mail is transmitted as follows.</h3>
  10. <dl class="mailform_result">
  11.     <dt>Your Name</dt>
  12.     <dd><$MTMailPreviewAuthor$></dd>
  13.  
  14.     <dt>Your Mail Address</dt>
  15.     <dd><$MTMailPreviewEMail$></dd>
  16.  
  17.     <dt>Subject</dt>
  18.     <dd><$MTMailPreviewSubject$></dd>
  19.  
  20.     <dt>Text</dt>
  21.     <dd><$MTMailPreviewBody convert_breaks="1"$></dd>
  22. </dl>
  23.  
  24. 送信エラー用( Mailform: Error )
  25. <h3>Mail Submission Error.</h3>
  26. <dl class="mailform_result">
  27.     <dt><$MTErrorMessage$></dt>
  28.     <dt><a href="javascript:location.reload()">[Reload]</a></dt>
  29. </dl>

各テンプレート・モジュールを作成する際、名前に注意してください。 メールフォーム用のテンプレート作成時に説明した、送信完了、プレビュー、送信エラー時のテンプレート・モジュール名と必ず合わせて下さい。 そうしないと、メッセージ表示されませんので。

以上で、メールフォームの設置は完了です。 以下のメールフォームの表示確認を行ってください。

  • ただしくメール送信後、画面遷移なしにメッセージ表示されること。

  • 画面遷移なしにプレビューされること。

  • 各フォームの入力項目に入力せず送信した場合、画面遷移なしにエラーメッセージが表示されること。

こんなところでしょうか。

今回MailFormプラグインについてはあまり触れませんでした。 詳しいことはThe blog of H.Fujimotoさんのページを参照してください。

処理中イメージはAjaxloadからお好みのイメージをダウンロードして使用してください。

では、SEE YOU (￣∇￣)/

 Trackback Pings(2)

from デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記

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

Tracked on November 1, 2006
from 情報商材アフィリエイトで稼ぐ日給１円

気分屋アフィリエイターじぃまぁです。メールフォーム設置しました。実はメールフォームを設置しないと大変なことに…

Tracked on March 23, 2007

 Comments(22)

#1: Posted by oscar @ September 9, 2006 [REPLY]
user-pic

bzbellさん、ご苦労様。
見た目をまねる（エフェクトを付ける）のは簡単ですけど、実際にAjaxを書くのは難しいですよね。
ベースは壱さんのプラグインなんですね。早速試してみようっと。

 
#2: Posted by bzbell @ September 9, 2006 [REPLY]
user-pic

>>1 oscar さん

こんにちわ^^

はい。とりあえず形にはできたかな…と思っています。
でもマークアップ的にまだまだ改善の余地ありです（つω-`｡）

添削お願い致します♪

 
#3: Posted by oscar @ September 10, 2006 [REPLY]
user-pic

あぁ、そうか。AjaxCommentのパターンを流用してるんですね。
なるほど。もしかしてEUCじゃ駄目かな？

ところで、bzbellさん。「mailform.js」リンク切れっぽいけド？

 
#4: Posted by bzbell @ September 10, 2006 [REPLY]
user-pic

>>3 oscar さん

こんにちわ^^

> あぁ、そうか。AjaxCommentのパターンを流用してるんですね。
> なるほど。もしかしてEUCじゃ駄目かな？

はい。
prototype.jsのインターフェイスのようです。
割と汎用的で他でも流用可能なかんじです。

ただ、一つ気に入らないことがありまして、たとえば、今回のメールフォームだとメアドを未入力にした場合、エラー表示するのですが、Ajax上はエラーと判断できないんです…言い方間違った、判断の方法が分からないんです（つω-`｡）

> もしかしてEUCじゃ駄目かな？

えっ!?
なぜですか?

> ところで、bzbellさん。「mailform.js」リンク切れっぽいけド？

Σ(￣Д￣；)ガーン
失礼しました。

 
#5: Posted by oscar @ September 10, 2006 [REPLY]
user-pic

>Ajax上はエラーと判断できないんです
えと、AjaxCommentのサイトでも紹介されてたけど、wforms.jsっていうライブラリがあります。これが必須項目とかE-Mailになってるかとかのチェック出来るけど、タイミング的にはフロントのJavascriptでやっちゃった方が良いような気もしますが。

>> もしかしてEUCじゃ駄目かな？
>えっ!?
AjaxCommentのフォーム送信だと、文字をUTF-8にしてフォームに送っちゃうんですよ。送る前に文字コード変換とかの処理を追加しないと駄目みたい。
同じ方法でform送ってるなら、やっぱりなるのかなと・・・

もっとも、dbに格納する訳ではないんで、メール送信なら問題ないかもしれないですが。

 
#6: Posted by fag @ October 14, 2006 [REPLY]
user-pic

いつもMTのカスタマイズで参考にさせてもらっています！
(^人^)感謝♪

で，この記事を見てわたしもAjax風なメールフォームを設置しようとしたのですが，
前レスのとおりEUCで文字化けしちゃいます。
何かいい方法ないでしょうか？

 
#7: Posted by bzbell @ October 14, 2006 [REPLY]
user-pic

>>6 fag さん

はじめまして^^

ご質問の件ですが、わたしは使用したことありませんが、こちらのMT-I18Nプラグインと併用するといいと思います。

不明点などありましたら、その時はわたしもちょと調べてみますのでご連絡ください。

 
#8: Posted by fag @ October 15, 2006 [REPLY]
user-pic

どーも，早速のお返事ありがとうございます！
ではでは，MT-I18Nプラグインにチャレンジしてみます！

 
#9: Posted by fag @ October 15, 2006 [REPLY]
user-pic

おお！ばっちり出来ました。
本当にありがとうございましたー！

 
#10: Posted by bzbell @ October 15, 2006 [REPLY]
user-pic

>>9 fag さん

こんにちわ^^

> おお！ばっちり出来ました。

良かったぁ（*´ｰ｀*）
プラグイン紹介したけどわたし自身が使う用がなかったので、ちょと心配になって、わたしもインストールして確認したとこだったんです。

でもスムーズにいったみたいで良かったですね♪

 
#11: Posted by fag @ October 15, 2006 [REPLY]
user-pic

はい！親切にしてもらって感謝です！記事になってるし!
わお

 
#12: Posted by qbo @ January 31, 2007 [REPLY]
user-pic

質問があります。

 
#13: Posted by bzbell @ January 31, 2007 [REPLY]
user-pic

>>12 qbo さん

こんにちわ^^
ナンでしょう（;￣∇￣A

 
#14: Posted by かわぐち @ March 10, 2007 [REPLY]
user-pic

ども、かわぐちです。

またまた、参考にさせてもらいました。
ありがとうございます。

うちのブログはEUCなんですが、なんどやっても文字化けが
解消されなくて悩んでました。
MT-I18Nプラグインなんかも実施してみたんだけど・・・。

結局、謎解きがめんどくさくなって、PHPにて、
確認画面・メール送信等の部分を作成しました。

暇なときに見てやってくださいませ。

 
#15: Posted by bzbell @ March 10, 2007 [REPLY]
user-pic

>>14 かわぐち さん

こんにちわ^^

> うちのブログはEUCなんですが、なんどやっても文字化けが解消されなくて悩んでました。

EUCなんですか。
わたしのとこはUTF-8なので、設置当時もまったく気にならなかったのですが、他の人も同様に悩んでおられました (;￣∇￣A

> MT-I18Nプラグインなんかも実施してみたんだけど・・・。

そのようですね。
このプラグインは表示する分には問題ないようなのですが、いざ、メルサバに送信しようとすると結果、改善されないみたいですね。

> PHPにて、確認画面・メール送信等の部分を作成しました。

えっーーーΣ(￣Д￣；)!!
でも、その気持ち分かります。
チョビッと意味が違いますが、求めている機能のプラグインがない場合、PHPで作っちゃえっ(＞∀＜　)/ てなかんじです♪
ご苦労様です♪

あのぉ…素朴な疑問なんですけど、何でEUCを使われてるんですか!?
よく分かってなくてお聞きしてるのですが、サーバがEUCだから･･･という理由ですか!?

わたしが使用したことあるレンタルサーバではどれもUTF-8でした。
MovableTypeもデフォはUTF-8ですよねぇ。それを理由あってEUCに変更するわけですよね!?
それともEUCにするメリットなどがあるのでしょうか。

 
#16: Posted by かわぐち @ March 11, 2007 [REPLY]
user-pic

ども、かわぐちです。

>あのぉ…素朴な疑問なんですけど、何でEUCを使われてるんですか!?
>よく分かってなくてお聞きしてるのですが、サーバがEUCだから･･･
>という理由ですか!?

うちのMovableTypeが稼動しているサーバーは、私が別の用途で使用する事を
前提として構築したもので、その際にサーバー側をEUCとしてました。

私もUTF-8にてMovableTypeを稼動させたかったのですが、
既にEUCにて運用しているサーバーの手前、なくなく断念し、現在に至ったという次第であります。
で、結論、サーバーがEUCだからって理由です。

>それともEUCにするメリットなどがあるのでしょうか。
あまりないのかも・・・。

今度はUTF-8にしたい、かわぐちでした。

 
#17: Posted by bzbell @ March 11, 2007 [REPLY]
user-pic

>>16 かわぐち さん

こんにちわ^^

> うちのMovableTypeが稼動しているサーバーは、私が別の用途で使用する事を前提として構築したもので、その際にサーバー側をEUCとしてました。

かわぐち さんも自宅サーバなんですかっ!?
自宅サーバでMTやられてる人はかわぐち さん含め2人目です (;￣∇￣A

サーバのメンテナンスやら、セキュリティ対策やらの知識がないとダメなんですよね!?
このサイトは'さくらインターネット'のレンタルサーバでMTを運用してるのですが、共有サーバというだけあってか、503エラーってのがでちゃうんですよ。

ページが表示できないことがあるみたいなんです。

ホントはFastCGIなどインストールしてMTを高速化したいのですが、Apatchの設定を変更しちゃうので共有サーバだとダメみたいなんです。
とっても残念ですの （つω-`｡）

そっかぁ、特に意識してEUCを使われてるわけではないんですね。
シロウトなもので、文字コードなんて意識なくて、Ajaxを使うようになって初めて文字コードによる弊害があることを知ったくらいです。
何かメリットがあるのかなぁって気になってたんですよ。スッキリしましたの♪

いいなぁ自宅サーバ･･･わたしにそういった知識があればやってみたいけど･･･無理ね (;￣∇￣A

 
#18: Posted by かわぐち @ March 11, 2007 [REPLY]
user-pic

ども、かわぐちです。

>かわぐち さんも自宅サーバなんですかっ!?
>自宅サーバでMTやられてる人はかわぐち さん含め2人目です (;￣∇￣A
ん～とね、正確には、自社サーバかな？
私のブログは、一応、業務の一環ってことになってまして・・・。
社長もおおめにみてくれてます。
まぁ、ほとんど、検証用みたいなもんですがね。

社長のブログはこれです。
http://boss.wonder-mix.com/

 
#19: Posted by bzbell @ March 11, 2007 [REPLY]
user-pic

>>18 かわぐち さん

＆gt; 自社サーバかな？

えっ Σ(￣Д￣；)!?
寛大なボスさまで･･･。

わたしの会社でも部署サーバってのがあるんですけど、使わせてくれませんよ（。－ω－）ケチ
BOSSのブログにも同じロゴがある (´･д･`)

 
#20: Posted by かわぐち @ March 12, 2007 [REPLY]
user-pic

ども、かわぐちです。

>BOSSのブログにも同じロゴがある
そうなんです。
一応、会社のロゴってことで・・・。

 
#21: Posted by tomo787 @ July 24, 2007 [REPLY]
user-pic

こんにちわ。
いつも拝見させてもらってます。

ajaxメールフォームに関して気になることがあったんで、質問させてください。

友人のサイトに、ajaxメールフォームを設置して、問題なく動く状態で運用してたある日。

「メールを投稿したときに、文字制限がかかっていました！」

っていうユーザーの声がありました。
そんな設定はした覚えがなかったので、実はajaxメールフォーム関連のスクリプトにそういったものがはいっているのかなぁと。

bzbellさんは経験があられますでしょうか？
見解をお聞きしたいです？
よろしくお願いします。


 
#22: Posted by bzbell @ July 24, 2007 [REPLY]
user-pic

>>21 tomo787 さん

こんにちわ^^

> 「メールを投稿したときに、文字制限がかかっていました！」

文字数制限ですか!?
気にしたことはないですが、先ほど 8K 相当で送信したら送れました。
プラグイン的にもそういった制限はないので、もしかすると、

  • CGI で扱える文字列の長さに限りがある!?
  • メールサーバの制限!?

が、考えられるかな･･･と思います。
何か分かりましたらご連絡します♪

 

 Post a Comment

 

コメント用フィード