FLASHのお勉強_アクションスクリプトaction script　FLASHによるフォームメール(cgiのsendmail使用)

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

(34) FLASHによるフォームメール(cgiのsendmail使用)

　　2006/10/11

　cgi を使わないで、メーラーを立ち上げるタイプのフォームメイルについて、前回、前々回お勉強したが、今回は、メールを送るところだけcgi のsendmailを使うタイプのお勉強である。　メールソフトを使わないで、Webメールを使用している人も増えてきたので、できたら、cgi やｐｈｐなどを使ってsendmail機能を働かせたほうがベターである。
　FLASHで記入漏れチェックやemail などの書式チェックまでやる意義がどれほどあるか、効果のほどははっきりしないが少なくともメール発信まではサーバーとやり取りしなくてもいいと言うメリットはあるはずである。
　sendmailに使うｃｇｉはしたがって非常にシンプルなもの（デコード処理とメール送信）でよく、ここで使用したものは、一般に世の中で使われているスクリプトを参考に作成した。
　ｃｇｉの内容、及び、ダウンロードは、「ＦＬＡＳＨとＣＧＩとのやりとりの仕方」に。

サンプル画面は　別ウインドウで

ステージの準備 (ｃｇｉ不要フォームメール(2)と同じ)

三つのシーンで構成している。　
　シーン1：入力画面（必須項目記入漏れチェック、E-mail書式チェック）
　シーン2：確認画面（シーン1に戻って修正をかけるか、送信するかをボタン選択）
　シーン3：終了画面
ライブラリーに以下のコンポーネントをドラッグしてドロップする（コンポーネントウインドウが開いていなければウインドウメニューで開いておく）
　ライブラリーに置くコンポーネント：Button, Label, TextArea
　画面サイズ、背景色、枠などを好みで設定する。
＜シーン1＞
・画面左サイドにライブラリーからＬａｂｅｌをドラッグ&ドロップして画面左に配置する。更に、インプットに必要な数だけ縦に並べる。上から、インスタンス名を、jLabel0,jLabel1のようにし、同時にパラメータタグをクリックしてtextのところに　お名前**　のように項目名をそれぞれにインプットする。このとき、最後に**を付けると記入必須項目として扱われる。
・上で配置した項目名のそれぞれの右にインプット用のテキストフィールドを左にあるツールボックスの「A」（テキストツール）を使って配置し、インスタンス名を上から、inBox0, inBox1のように、変数をindat0, indat1のように順に命名する。
・全項目の下に警告用のダイナミックテキストボックスを配置し、インスタンス名をalertBoxとする。
・その下にライブラリーからＢｕｔｔｏｎを配置し、インスタンス名をconfirm_btn、パラメーターでlabelを確認とする。
＜シーン２＞
・画面左サイトにシーン1からコピーして項目名を縦に並べる。
・それぞれの項目名の右側に、適当な幅のラベルを配置し上からインスタンス名をoutBox0から順に名付け、パラメーターでｔｅｘｔのlabelを削除し、何も表示しないようにする。メッセージのところだけは、TextAreaを配置する。
・最下部に、修正ボタン（edit_btn）と送信ボタン（submit_btn）を配置する。
＜シーン３＞
・終了メッセージと戻りボタン（back_btn）を配置する。

スクリプト（Script）　(ｃｇｉ不要フォームメール(2)と異なる箇所だけコメントする)

シーン1_rootに
（インスタンスを何も選択していない状態でF9キーを押し、出てきたウインドウに記述）


stop();
var item_num = 6;
_root.confirm_btn.onRelease = function() {
  alertStr = "";
  for (i=0; i<item_num; i++) {
    jlabel = _root["jLabel"+i];
    inbox = _root["inBox"+i];
    jT = jlabel.text;
　　if (jT.substring(0,1) == "E") {
      $email = inbox.text;
    }
    mark = jT.substring(jT.length-2, jT.length);
    if (mark == "**" && inbox.text == "")
  { alertStr += jT.substring(0, jT.length-2)+"　";
    }
  }
  if (alertStr == "") {
    alertBox.text = " ";
    emailCheck($email);
  } else {
    alertBox.text = alertStr+"が未記入です";
  }
};
function emailCheck(emailIn) {
  import flash.external.*;
  function checkResult(str:String):Void {
    if (str == "OK") {
      nextScene();
    } else {
      alertBox.text = str;
    }
  }
  ExternalInterface.addCallback
  ("checkResult", this, checkResult);
  ExternalInterface.call("emailcheck", emailIn);
}

3行追加
e-mailアドレスを$emailとして取得

引数を$emailに変更

シーン２_rootに


stop();
$body = "";
for (i=0; i<item_num; i++) {
  inData = _root["indat"+i];
  outData = _root["outBox"+i];
  outLabel = _root["jLabel"+i];
  if (inData) {
    outData.text = inData;
    $body += outLabel.text+"：　"
    +outData.text+"\n";
  }
}
_root.edit_btn.onRelease = function() {
  prevScene();
};

$subject = "フォーム送信を受け付けました";
$body="以下のデータを送信します\n\n" + $body;
_root.submit_btn.onRelease = function() {
  sdData = new LoadVars();
  rvData = new LoadVars();
  rvData.onLoad = function(success) {
    if (success) {
      nextScene();}
  };
  sdData.mailto="aaaa@bbb.ne.jp";
  sdData.email=$email;
  sdData.subject = $subject;
  sdData.body = $body;
  sdData.sendAndLoad("sendmail4flash.cgi", rvData, "POST");
};

%Aを\nに変更
（ｃｇｉの場合は、改行記号が\nとなる）

\nに変更
ここから以下は全く異なる
送信用

LoadVarsインスタンス

受信用　　　〃　　　　　　〃
ｃｇｉからのテキストファイルの読み込み
もし成功したら
（sendmailの成否はｃｇｉから成否のテキストを送らないと判断しない）
ｃｇｉに送るデータを以下に並べる
mailtoはsendmailの送り先
emailはinputしたuserのaddress

cgiとの送受信
（cgiへのパス、受け手、送信方式)

（注）FLASHからＣＧＩにデータを送るには、上記のように sdData.A = X; sdData.B = Y; と言う形式で記述するが、ＨＴＭＬのinput文でいうと、AやBの部分が name にあたり、XやYの部分が value にあたる。
　なお、ＦＬＡＳＨとＣＧＩ間の送受信(連携)については、「ＦＬＡＳＨとＣＧＩとのやりとりの仕方」に簡単にまとめた。

シーン３_rootに　(ｃｇｉ不要フォームメール(2)と同じ)


_root.back_btn.onRelease = function() {
  gotoAndPlay("Scene 1");
};

戻るボタンがクリックされたら
シーン1に

HTMLの<head></head>内に記述するjavascript　(ｃｇｉ不要フォームメール(2)と同じ)


function thisMovie(movieName) {
 var isIE = navigator.appName.indexOf("Microsoft") != -1;
 return (isIE) ? window[movieName] : document[movieName];
}
function emailcheck(str) {
 if(!str.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/)){
 toFlash("E-mailアドレスを確認して下さい");
 }else{
 toFlash("OK"); }
}
function toFlash(str) {
 thisMovie("fFormMail").checkResult(str);
}

ユーザーのブラウザに合わせて参照を返す関数

emailcheck関数
FLASHから入力されたアドレスを受け取りチェックし、適否に応じたメッセージを、
toFlash関数に返す

FLASHにチェック結果に基ずくメッセージを返す　"fFormmail"はFlashファイルのid名
"checkResult"は結果を渡すFlaｓｈのメソッド名

なお、javascriptとのやりとりについては、「ExternalInterFaceを使ったFLASHとjavascriptの連携」を参照下さい。

HOME　　　お勉強総リスト

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

(34) FLASHによるフォームメール(cgiのsendmail使用)

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