FLASHのお勉強 ーアクションスクリプトの実践的事始めー

(59) FLASHフォームメールLite
(actionscript 3.0)

  2008/2/6
 本サイト「(54) フォームメールの作成」でas3.0のスクリプトで正規表現を利用した書式チェック付フォームメールを作成する方法を掲載している。 この作成法は汎用性を重視しているので、重装備となっていて、ちょっと重いかなと言う感じで、気軽にちょっと作成と言うわけにはいかない。 そこで、今回はステージにインプット用のテキストフィールドをあらかじめ配置し必要な書式チェックだけに絞りこんだスクリプトにした。 いわば、簡易版(Lite)フォームメールである。
サンプル(インプットされたemailアドレスにメールが自動返信されます)
ステージの準備
<FRAME 1>
●300*340のステージ(背景色、枠取りなどは好みで)に静置テキストで、氏名などのラベルを、その右にそれに相当するインプット用のテキストフィールドを配置する。 記入必須項目には印をつける。 (サンプル参照)
●インプット用のテキストフィールドのインスタンス名を上からinput1、input2、input3、input4とする(必要な数だけ)。
●インプットテキストフィールド群の下に送信ボタン、書式エラー通知用テキストフィールド(alertBox1) 、未記入通知用テキストフィールド(alertBox2)を配置する
<FRAME 5>
●「お問い合わせありがとうございます」などの終了メッセージ
  ここではつけていないが、必要に応じて戻るボタンなどを配置する
スクリプト(Script)
<FRAME 1>

stop();
import flash.events.*;
import flash.net.*;
System.useCodePage = true;

var input:Array = new Array();
var inputText:Array = new Array();
var itemStr = ["氏 名","email","電話番号","メッセージ"];
var emailPattern:RegExp = /([0-9a-zA-Z]+[-._+&])*[0-9a-zA-Z]
                          +@([-0-9a-zA-Z]+[.])+[a-zA-Z]{2,6}/;
var phonePattern:RegExp = /^\d{2,3}-\d{1,4}-\d{4}$/;

for (var i:Number=1; i<5; i++) {
        input[i] = this["input"+i];
        with (input[i]) {
                border=true;
                borderColor = 0x999999;
                background = true;
                backgroundColor = 0xf5f5f5;
                text = "";
        }
}
function sosin(event:MouseEvent) {
        var alertSt1:String = "";
        var alertSt2:String = "";
        var $body:String="";
        alertBox1.text = alertBox2.text = "";
        for (var j:uint=1; j<5; j++) {
                inputText[j] = input[j].text;
                var $str:String = itemStr[j-1] + ":  "
                                   + inputText[j] + "\n";
                $body += $str;
        }
        var emailCheck:Boolean = emailPattern.test(inputText[2]);
        var phoneCheck:Boolean = 
                       validateNumber(inputText[3],phonePattern);
        if (!emailCheck && inputText[2]!="") {
                alertSt1 = " email";
        }
        if (phoneCheck && inputText[3]!="") {
                alertSt1 += " 電話番号";
        }
        if (alertSt1) {
                alertBox1.text = alertSt1 + "に誤りがあります";
        }
        if (inputText[2]=="") {
                alertSt2 = " email";
        }
        if (inputText[4]=="") {
                alertSt2 += " メッセージ";
        }
        if (alertSt2) {
                alertBox2.text = alertSt2 + "が未記入です";
        }
        if (alertBox1.text == "" && alertBox2.text == "") {
                var $email:String = inputText[2];
                sendMessage($email,$body);
                gotoAndStop(5);
        }
}
submit_btn.addEventListener(MouseEvent.CLICK,sosin);

//番号チェック
function validateNumber(str:String,pattern:RegExp):Boolean {
        var result:Object = pattern.exec(str);
        if (result == null) {
                return true;
        }
        return false;
}
//data送信
function sendMessage($email,$body) {
        var $subject:String = "お問い合わせフォームから送信がありました";
        $body="以下のデータを受信いたしました\n\n" + $body;
        var myVars:URLVariables = new URLVariables();
        myVars.mailto="mail@tyoshioka.com";//sendmailの宛先
        myVars.email=$email;//記入されたアドレス(ここにもCcで送信する)
        myVars.subject = $subject;//件名
        myVars.body = $body;//内容
        var myReq:URLRequest = new URLRequest();
        myReq.url = "sendmail4flash12.cgi";//cgiファイル名(パスを通す)
        myReq.data = myVars;
        myReq.method = URLRequestMethod.POST;
        sendToURL(myReq);
}








配列の定義


正規表現patternの
定義
(email、電話番号)



インプットフィールドの
書式設定






送信ボタンイベント
警告文の初期化

送信主文の初期化



送信項目のまとめ



書式チェック結果

関数validateNumberへ
emailチェック不合格なら

電話番号不合格なら


誤記入項目があれば
注意文を表示

もしemail記入がなければ

もしメッセージ文の記入がなければ

もし未記入項目があれば注意文を表示

未記入、誤りがなければ、$email、$bodyを引数にsendMessage関数へ
FRAME5へ


送信ボタンにリスナーを設定


電話番号チェック
パターン検索をかける







cgiにデータ送信
件名
主文(上でまとめた主文に頭文を付ける)








送信(応答受付なし)
なお、ここで用いた cgi (sendmail4flash12.cgi)は、「FLASHとCGIとのやりとりの仕方」に掲載した cgi と同じものであるが、sendmailのスクリプト部に print MAIL"Cc: $email\n"; を一行加えている。 これにより、インプットしたユーザーのアドレスにも同文のメールが自動返信される。
 
flashirohaサイト内  Web全体 
HOME   お勉強総リスト