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

(54) フォームメールの作成   2007/12/28

(actionscript3.0)

 actionscript3.0による、フォーム部品としての「テキストフィールド」「コンボボックス」「ラジオボタン」の作成についてはそれぞれ既に勉強したが、今回は、それらを使ったフォームメールの作成である。 一般的に使われそうな項目をサンプルとして選び、正規表現による入力チェック、必須項目の入力状況チェック機能を付与し、送信は、メーラーを立ち上げるタイプと、cgiのsendmail機能を使うタイプの両方を解説することにしたい。 なお、テキストフィールドの作成用asファイルは、前回解説したものをフォームメール用に若干手直しをしているが、コンボボックス、ラジオボタン作成用のasファイルは変更していない。 また、新たに文字入れ専用のmakeLabel.as を追加した。
 なお、as3.0による記述は2.0と大幅に変わっている。 大幅にレベルアップしたスクリプトになっているのは確かであるが、もう通常のフラッシャーの手を離れ、プログラマーのためのスクリプトに変身したといってもいいように思う。 手作り感覚でアニメーションを作っていたWebクリエイター諸氏にとっては、ちょっと手ごわいかもしれない。 かく言う私も、この完成にはHELPやWeb解説サイトを参照しながらの苦労の連続であった。 as3.0の洗練されたスクリプトにはなっていないかもしれないが、実践的な作りにはなっていると思う。 一つ一つの項目を作るのに長いスクリプトを書かなければならないので、一見大変なように思えるかもしれないが、コピー・ペイストを繰り返せばそれほどのことはない。
 また、cgiを使わないでFLASHからsendmailできるようになっているのかもしれないが、今のところ私にはこれに関する情報・知識がないので今後の勉強課題としたい。
SAMPLE

ステージの準備
●w470H550のステージを設定。背景色、枠線の挿入などは好みによる。
●コンポ―ネントウインドウから、Label、ComboBox、RadioButton、Buttonをドラッグ&ドロップし、ステージから削除しておく。
●「挿入」「新規シンボル」ウインドウで、ダイナミックテキストボックスを作成し、シンボル名を"alertArea"とし、リンケージにチェックを入れるとクラス名、baseクラス名が自動的に挿入される。OKをクリックすると、自動的にクラスパスが作成される旨のメッセージが出るので、OKとする。
テキストボックスインスタンス名を"msgBox"とし、サイズ:w285H30、文字サイズ12pt、文字色:#ff0000、multiline、枠なしを設定。
●同様に、新規シンボル"alertBox"、テキストボックスインスタンス名"msgBox"、クラス定義をして、W200H20、13pt、赤を設定
●シーン2、3を挿入

スクリプト
 ファイルの構成: formMail.fla(swf) − createTextField.as、makeLabel.as、createComboBox.as、createRadioButton.as
formMail.flaファイル
scene 1 に
stop();
import fl.controls.RadioButtonGroup;
import fl.controls.Button;
var inputText:Array = new Array();
var inputNum:Number;
var req:Array = new Array();

//確認ボタンと未記入警告用ボックスの配置
var confirm_btn:Button = new Button();
confirm_btn.x=350;
confirm_btn.y=500;
confirm_btn.label = "確認する";
addChild(confirm_btn);

var alert:MovieClip = new alertArea();
alert.x=50; alert.y =505;
alert.msgBox.multiline = true;
addChild(alert);

//Label Settingのフォーマット
//var lb#:Array = [str#,x,y];  labelText,x,y
//var lbfm#:Array = [tfFont,size,color,bold,italic];  textFormat

//TextField Property(default)
var tfx:Number = 200;
var tfy:Number = 80;
var tfwidth:Number = 150;
var tfheight:Number = 22;
var border:Boolean = true;
var borderColor:Number= 0x999999;
var background:Boolean = true;
var bgColor:Number = 0xf5f5f5;
var type:String = TextFieldType.INPUT;
var multiline:Boolean = false;

//Text Formatting(default)
var tfFont:String = "_ゴシック";
var size:Number = 14;
var color:Number = 0x336600;
var bold:Boolean = false;
var italic:Boolean = false;

//Check Pattern
var ptNum:Number;
//ptNum=0  checkなし
//ptNum=1  半角数
//ptNum=2  半角英
//ptNum=3  半角英数
//ptNum=4  全角カタカナ
//ptNum=5  全角ひらがな
//ptNum=6  全角文字
//ptNum=7  Eメールアドレス
//ptNum=8  電話番号
//ptNum=9  郵便番号

//Title
var title:String = "お問い合わせフォーム";
var lb0:Array =[title,150,20];
var lbfm0:Array = [tfFont,20,0x336600,true,false];
var label0:makeLabel = new makeLabel(lb0,lbfm0);
addChild(label0);
var titlesub:String = "※は必須記入項目です";
var lb0s:Array =[titlesub,185,45];
var lbfm0s:Array = [tfFont,12,0xff0000,false,false];
var label0s:makeLabel = new makeLabel(lb0s,lbfm0s);
addChild(label0s);

//フリガナ
var str1:String = "フリガナ(全角カナ)";
var lb1:Array =[str1,20,80];
var lbfm1:Array = [tfFont,14,0x000000,false,false];
var label1:makeLabel = new makeLabel(lb1,lbfm1);
addChild(label1);

var tf1:Array = [tfx,tfy,tfwidth,tfheight,border,borderColor,background,bgColor,type,multiline];
var tffm1:Array = [tfFont,size,color,bold,italic];
ptNum=4;
inputNum=1;
var obj1:createTextField = new createTextField(tf1,tffm1,ptNum,inputNum);
addChild(obj1);

//お名前
req[2] = true;
var str2:String = "お名前(全角)";
var lb2:Array =[str2,20,120];
var lbfm2:Array = [tfFont,14,0x0066ff,false,false];
var label2:makeLabel = new makeLabel(lb2,lbfm2);
addChild(label2);

var tf2:Array = [tfx,120,tfwidth,tfheight,border,borderColor,background,bgColor,type,multiline];
var tffm2:Array = [tfFont,size,color,bold,italic];
ptNum=6;
inputNum=2;
var obj2:createTextField = new createTextField(tf2,tffm2,ptNum,inputNum);
addChild(obj2);

//性別
var str3:String = "性 別";
var lb3:Array = [str3,20,160];
var lbfm3:Array = [tfFont,14,0x000000,false,false];
var label3:makeLabel = new makeLabel(lb3,lbfm3);
addChild(label3);

var rb1_label:Array = ["男","女"];
var rbg1:RadioButtonGroup = new RadioButtonGroup("性別");
var rb1x:Number = 200;
var rb1y:Number = 160;
var rb1size:Number = 14;
var obj3:createRadioButton = new createRadioButton(rbg1,rb1_label,rb1x,rb1y,rb1size);
addChild(obj3);

//年代
var str4:String = "年 代";
var lb4:Array = [str4,20,200];
var lbfm4:Array = [tfFont,14,0x000000,false,false];
var label4:makeLabel = new makeLabel(lb4,lbfm4);
addChild(label4);

var $prompt:String ="あなたの年代をお選びください";
var cbItem =["20未満","20-30未満","30-40未満","40-50未満","50-60未満","60以上"];
var cb1x:Number = 200;
var cb1y:Number = 200;
var cb1w:Number = 180;
var cb1h:Number = 24;
var obj4:createComboBox = new createComboBox($prompt,cbItem,cb1x,cb1y,cb1w,cb1h);
addChild(obj4);

//メールアドレス
req[5] = true;
var str5:String = "メールアドレス(半角英数)";
var lb5:Array =[str5,20,240];
var lbfm5:Array = [tfFont,14,0x0066ff,false,false];
var label5:makeLabel = new makeLabel(lb5,lbfm5);
addChild(label5);

var tf3:Array = [tfx,240,180,tfheight,border,borderColor,background,bgColor,type,multiline];
var tffm3:Array = [tfFont,size,color,bold,italic];
ptNum=7;
inputNum=5;
var obj5:createTextField = new createTextField(tf3,tffm3,ptNum,inputNum);
addChild(obj5);

//電話番号
var str6:String = "電話番号(半角数)" + "\n" + "   例) 012-345-6789";
var lb6:Array =[str6,20,280];
var lbfm6:Array = [tfFont,14,0x000000,false,false];
var label6:makeLabel = new makeLabel(lb6,lbfm6);
addChild(label6);

var tf4:Array = [tfx,280,180,tfheight,border,borderColor,background,bgColor,type,multiline];
var tffm4:Array = [tfFont,size,color,bold,italic];
ptNum=8;
inputNum=6;
var obj6:createTextField = new createTextField(tf4,tffm4,ptNum,inputNum);
addChild(obj6);

//郵便番号
var str7:String = "郵便番号(半角数)"+"\n"+"       例) 123-4567";
var lb7:Array =[str7,20,320];
var lbfm7:Array = [tfFont,14,0x000000,false,false];
var label7:makeLabel = new makeLabel(lb7,lbfm7);
addChild(label7);

var tf5:Array = [tfx,320,100,tfheight,border,borderColor,background,bgColor,type,multiline];
var tffm5:Array = [tfFont,size,color,bold,italic];
ptNum=9;
inputNum=7;
var obj7:createTextField = new createTextField(tf5,tffm5,ptNum,inputNum);
addChild(obj7);

//住所
var str8:String = "住 所";
var lb8:Array =[str8,20,360];
var lbfm8:Array = [tfFont,14,0x000000,false,false];
var label8:makeLabel = new makeLabel(lb8,lbfm8);
addChild(label8);

var tf6:Array = [tfx,360,230,34,border,borderColor,background,bgColor,type,true];
var tffm6:Array = [tfFont,size,color,bold,italic];
ptNum=0;
inputNum=8;
var obj8:createTextField = new createTextField(tf6,tffm6,ptNum,inputNum);
addChild(obj8);

//メッセージ
var str9:String = "メッセージ";
var lb9:Array =[str9,20,400];
var lbfm9:Array = [tfFont,14,0x000000,false,false];
var label9:makeLabel = new makeLabel(lb9,lbfm9);
addChild(label9);

var tf7:Array = [150,400,280,60,border,borderColor,background,bgColor,type,true];
var tffm7:Array = [tfFont,size,color,bold,italic];
ptNum=0;
inputNum=9;
var obj9:createTextField = new createTextField(tf7,tffm7,ptNum,inputNum);
addChild(obj9);


//必須項目※表示
var Rlabel:Array = new Array();
for (var ri:uint=1; ri<=9; ri++) {
        if (req[ri]) {
                var strR:String = "※";
                var rx:Number = 185;
                var ry:Number = 80+40*(ri-1);
                var lbR:Array =[strR,rx,ry];
                var lbfmR:Array = [tfFont,12,0xff0000,false,false];
                var labelR:makeLabel = new makeLabel(lbR,lbfmR);
                addChild(labelR);
                Rlabel[ri]=labelR;
        }
}

//データ取得・確認
var input1:String;
var input2:String;
var input3:String;
var input4:String;
var input5:String;
var input6:String;
var input7:String;
var input8:String;
var input9:String;
function confirm(event) {
        input1 = obj1.inputText();
        input2 = obj2.inputText();
        input3 = obj3.clickedData();
        input4 = obj4.itemSelected();
        input5 = obj5.inputText();
        input6 = obj6.inputText();
        input7 = obj7.inputText();
        input8 = obj8.inputText();
        input9 = obj9.inputText();
        var alertItem:String = "";
        for (var j:uint=1; j<=9; j++) {
                var Input:String = root["input"+j];
                var Str:String = root["str"+j].split("(").shift().toString();
                if (req[j]==true && Input=="") {
                        alertItem += Str+" ";
                }
        }
        alert.msgBox.text = alertItem + " が未記入です";
        if (!alertItem) {
                removeChild(confirm_btn);
                removeChild(alert);
                nextScene();
        }
}
confirm_btn.addEventListener(MouseEvent.CLICK,confirm);
<説明>
import fl.controls.RadioButtonGroup; import fl.controls.Button;
  ラジオボタングループパッケージ、ボタンパッケージの読み込み
●項目名(label)はscript中に記載の「Label Settingのフォーマット」に準じて配置
  インプット用テキストボックス、コンボボックス、ラジオボタンのフォーマットは、それぞれ既出のページに記載あり
  これらのオブジェクトは、obj1から通し番号を付けて識別する
●正規表現によるCheck Patternは ptNum=1,,,,,9で指定する。 あらたに、電話番号、郵便番号を追加した。
  正規表現は、createTextField.as に記載されているので、ここでは番号を指定するだけ
●必須項目は、req[#] の配列で定義 label3の項目を必須にする場合は、req[3] = true; とする
  必須項目※はreq[#]で指定された項目のインプットフィールドの手前に(左)に表示
  Rlabel[ri]=labelR; は後に表示を消す(removeChild)ときのために配列に格納している
input1 = obj1.inputText();
  obj1(この場合はフリカナ入力ボックス)に入力されたデータをasファイルに参照し input1 とする
var Str:String = root["str"+j].split("(").shift().toString();
  ラベル表示の項目名を ( の前で切り取り、Str とする
if (req[j]==true && Input=="") { alertItem += Str+" "; }
  もし、必須項目に入力がなければ、alertItem にそのStr を足していく
alert.msgBox.text = alertItem + " が未記入です";
  未記入メッセージをムービークリップalertのmsgBoxに表示する
if (!alertItem) { 以下
  alertItem がなければ(必須項目全部に記載があれば)確認ボタン、警告文を消して、シーン2へ移動

formMail.flaファイル(cgiのsendmailを使うケース)
scene 2 に

stop();
import flash.net.*;
import flash.system.System;
import flash.display.Sprite;
import flash.display.MovieClip;
import fl.controls.Button;
System.useCodePage = true;

//修正、送信ボタンの配置
var edit_btn:Button = new Button();
var submit_btn:Button = new Button();
edit_btn.x=100;
submit_btn.y=500;
edit_btn.label = "修 正";
addChild(edit_btn);
submit_btn.x=250;
edit_btn.y=500;
submit_btn.label = "送 信";
addChild(submit_btn);

//インプット内容の表示と送信データ($body)の作成
var Ilabel:Array = new Array();
var $body:String = "";
var $email:String = input5;
for (var j:uint=1; j<=9; j++) {
        removeChild(root["obj"+j]);
        var Input:String = root["input"+j];
        if (Input==null) {
                Input = "";
        }
        var Str:String = root["str"+j].split("(").shift().toString();
        var lbIx:Number = 200;
        var lbIy:Number = 80+40*(j-1);
        var lbI:Array =[Input,lbIx,lbIy];
        var lbfmI:Array = [tfFont,14,0x0033ff,false,false];
        var labelI:makeLabel = new makeLabel(lbI,lbfmI);
        addChild(labelI);
        Ilabel[j]=labelI;
        $body += Str + ":  " +Input + "\n";
}

//修正ボタンのアクション
function edit(event) {
        removeChild(edit_btn);
        removeChild(submit_btn);
        nextScene();
}
edit_btn.addEventListener(MouseEvent.CLICK,edit);

//送信後のメッセージ表示
function thanks() {
        for (var j:uint=1; j<=9; j++) {
                removeChild(root["label"+j]);
                removeChild(Ilabel[j]);
                if (Rlabel[j]) {
                        removeChild(Rlabel[j]);
                }
        }
        removeChild(label0s);
        var thanksMsg1:String = "お問い合わせありがとうございました"+"\n\n"+
          "折り返しご返事申し上げますので、しばらくお待ちください";
        var lbt1:Array =[thanksMsg1,80,100];
        var lbfmt1:Array = [tfFont,14,0x000000,false,false];
        var labelt1:makeLabel = new makeLabel(lbt1,lbfmt1);
        addChild(labelt1);
}

//送信ボタンアクション(cgiに送信)
function submit(event) {
        removeChild(edit_btn);
        removeChild(submit_btn);
        var $subject:String = "お問い合わせフォームからの送信";
        $body="以下のデータを送信します\n\n" + $body;
        var myVars:URLVariables = new URLVariables();
        myVars.mailto="****@*****.com";  //sendmailの宛先
        myVars.email=$email;  //記入されたアドレス(ここにもCcで送信する)
        myVars.subject = $subject;  //件名
        myVars.body = $body;  //内容
        var myReq:URLRequest = new URLRequest();
        myReq.url = "sendmail4flash.cgi";  //cgiファイル名(パスを通す)
        myReq.data = myVars;
        myReq.method = URLRequestMethod.POST;
        sendToURL(myReq);
        thanks();  //thanks関数へ
}
submit_btn.addEventListener(MouseEvent.CLICK,submit);
formMail.flaファイル
scene 3 に
stop();

//確認ボタン、未記入警告ボックス配置
var confm_btn:Button = new Button();
confm_btn.x=350; confm_btn.y=500;
confm_btn.label = "確 認";
addChild(confm_btn);
var alert2:MovieClip = new alertArea();
alert2.x=50; alert2.y =505;
addChild(alert2);

//確認内容表示削除、objの再表示
for (var k:uint=1; k<=9; k++) {
        var LABEL=Ilabel[k];
        if (LABEL) {
                removeChild(LABEL);
        }
        if (root["obj"+k]) {
                addChild(root["obj"+k]);
        }
}

//確認ボタン・クリックアクション
function confirm2(event) {
        input1 = obj1.inputText();
        input2 = obj2.inputText();
        input3 = obj3.clickedData();
        input4 = obj4.itemSelected();
        input5 = obj5.inputText();
        input6 = obj6.inputText();
        input7 = obj7.inputText();
        input8 = obj8.inputText();
        input9 = obj9.inputText();
        var alertItem:String = "";
        for (var j:uint=1; j<=9; j++) {
                var Input:String = root["input"+j];
                var Str:String = root["str"+j].split("(").shift().toString();
                if (req[j]==true && Input=="") {
                        alertItem += Str+" ";
                }
        }
        alert2.msgBox.text = alertItem + " が未記入です";
        if (!alertItem) {
                removeChild(confm_btn);
                removeChild(alert2);
                prevScene();
        }
}
confm_btn.addEventListener(MouseEvent.CLICK,confirm2);
cgiを使わずに、メーラーを立ち上げるケース
シーン2の//送信ボタンアクション(cgiに送信)の部分を入れ替える
function submit(event) {
        var $subject:String = "以下の内容でお問い合わせを頂きました";
        $body="以下のデータを送信します\n\n" + $body;
        var ur:URLRequest = new URLRequest("mailto:****@******.com?subject="+$subject
          +"&body="+$body);
        navigateToURL( ur );
        nextScene();
}
submit_btn.addEventListener(MouseEvent.CLICK,submit);
 makeLabel.as ファイル、createTextField.as ファイルは、こちらを参照のこと
 
flashirohaサイト内  Web全体 
HOME   お勉強総リスト