この講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです。

FLASH講座 ーアクションスクリプトの実践的事始めー
実務編
(7) FLASHによるフォームメール (cgiのsendmail使用)

 cgi を使わないで、メーラーを立ち上げるタイプのフォームメイルについて、前回前々回学びました。 今回は、メールを送るところだけcgi のsendmailを使うタイプの講座です。

 メールソフトを使わないで、Webメールを使用している人も増えてきたので、できたら、cgi やphpなどを使ってsendmail機能を働かせたほうがベターです。
 FLASHで記入漏れチェックやemail などの書式チェックまでやる意義がどれほどあるのか疑問ですが、効果のほどははっきりしないのです。 しかし少なくともメール発信まではサーバーとやり取りしなくてもいいと言うメリットはあるはずです。

 従いましてsendmailに使うcgiは非常にシンプルなもの(デコード処理とメール送信)でよく、ここで使用したものは、一般で使われているスクリプトを参考に作成したものです。
 cgiの内容、及び、ダウンロードは、「FLASHとCGIとのやりとりの仕方」にあります。
サンプル画面は 別ウインドウで
ステージの準備 (cgi不要フォームメール(2)と同じ)
三つのシーンで構成している。 
 シーン1:入力画面(必須項目記入漏れチェック、E-mail書式チェック)
 シーン2:確認画面(シーン1に戻って修正をかけるか、送信するかをボタン選択)
 シーン3:終了画面
ライブラリーに以下のコンポーネントをドラッグしてドロップする(コンポーネントウインドウが開いていなければウインドウメニューで開いておく)
 ライブラリーに置くコンポーネント:Button, Label, TextArea
 画面サイズ、背景色、枠などを好みで設定する。
<シーン1>
・画面左サイドにライブラリーからLabelをドラッグ&ドロップして画面左に配置する。更に、インプットに必要な数だけ縦に並べる。上から、インスタンス名を、jLabel0,jLabel1のようにし、同時にパラメータタグをクリックしてtextのところに お名前** のように項目名をそれぞれにインプットする。このとき、最後に**を付けると記入必須項目として扱われる。
・上で配置した項目名のそれぞれの右にインプット用のテキストフィールドを左にあるツールボックスの「A」(テキストツール)を使って配置し、インスタンス名を上から、inBox0, inBox1のように、変数をindat0, indat1のように順に命名する。
・全項目の下に警告用のダイナミックテキストボックスを配置し、インスタンス名をalertBoxとする。
・その下にライブラリーからButtonを配置し、インスタンス名をconfirm_btn、パラメーターでlabelを確認とする。
<シーン2>
・画面左サイトにシーン1からコピーして項目名を縦に並べる。
・それぞれの項目名の右側に、適当な幅のラベルを配置し上からインスタンス名をoutBox0から順に名付け、パラメーターでtextのlabelを削除し、何も表示しないようにする。メッセージのところだけは、TextAreaを配置する。
・最下部に、修正ボタン(edit_btn)と送信ボタン(submit_btn)を配置する。
<シーン3>
・終了メッセージと戻りボタン(back_btn)を配置する。
スクリプト(Script) (cgi不要フォームメール(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に変更

シーン2_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に変更
(cgiの場合は、改行記号が\nとなる)






\nに変更
ここから以下は全く異なる
送信用LoadVarsインスタンス
受信用   〃      〃
cgiからのテキストファイルの読み込み
もし成功したら
(sendmailの成否はcgiから成否のテキストを送らないと判断しない)
cgiに送るデータを以下に並べる
mailtoはsendmailの送り先
emailはinputしたuserのaddress

cgiとの送受信
(cgiへのパス、受け手、送信方式)
)FLASHからCGIにデータを送るには、上記のように sdData.A = X; sdData.B = Y; と言う形式で記述するが、HTMLのinput文でいうと、AやBの部分が name にあたり、XやYの部分が value にあたる。
 なお、FLASHとCGI間の送受信(連携)については、「FLASHとCGIとのやりとりの仕方」に簡単にまとめた。
シーン3_rootに (cgi不要フォームメール(2)と同じ)

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



戻るボタンがクリックされたら
シーン1に
HTMLの<head></head>内に記述するjavascript (cgi不要フォームメール(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"は結果を渡すFlashのメソッド名
なお、javascriptとのやりとりについては、「ExternalInterFaceを使ったFLASHとjavascriptの連携」を参照下さい。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
HOME   Flash講座総リスト    flash アクションスクリプト 実務編 (1)