FLASHのお勉強_アクションスクリプトaction script_FLASH/php連携による簡易掲示板（BBS）

　先にFlashとphpの連携による日記について学んだが、今回は、簡易掲示板である。　本格的な掲示板をFlashで作成する機会は少ないと思うが、フルFLASHのサイトの一角に取り付ける場合には重宝するかもしれない。
　FLASHでBBSを作成する利点には、好みのデザインで表示することができる（気が向けば何らかの動きのある表示も採用できる）こと、フルFLASHのサイトからまったく違ったデザインのBBSページに飛ばさないですむこと、html/php(cgi)組み合わせのBBSに比べてロボットによる荒らしを受けにくい（と思う？）ことなどがあげられる。
　今回紹介するものは、表示を2行・8アイテム・5ページに、1アイテムの入力を100文字に限定しているが、もちろんこれは自由に設定できて、制限があるものではない。　用途によっては、もっと小型にすることも可能である。
　私は、html/php(cgi)も含めて、BBSを自分で作るのは初めてであるので、ここに紹介するものは機能的にも、セキュリティー的にも十分配慮されているものとは言えない。　FLASHとｐｈｐの連携によるBBSの入門編ととって頂きたい。

(追)サンプルを掲示したところ、むやみに登録ボタンをクリックする人が多いことがわかり、連続投稿を抑制するスクリプトを付け加えることにしました。php側でも可能ですが、Flash側で行うと投稿者のIPアドレスの取得・保存が不要なのと、スクリプトも単純で済むというメリットがあります。
（再追）何も書かずに送信ボタンをクリックする人も多いようです。contents欄が未記入の場合をエラー処理にしました。

SAMPLE

こちらにあります。　記述は自由です。　削除機能はありません。　表示は、5ページ、最新40アイテムまで。　40を超えたものは削除するようにしようと思いましたが、削除するのはもったいないという考え方もあり、その機能はなく、logファイルにたまるようになっています。　テキストファイルなので、あまり負担にはならないと思いますが、必要に応じて管理者が調整･管理する必要があります。

ステージの準備

●600*630、背景色好みのステージ（12fps）を設定
●コンポーネントのTextArea、TextInput、Buttonを使って、好みの配置で、題名（インスタンス名：sbBox）、名前（nmBox）、eメール（emBox）、内容（cntBox）入力用ボックスを配置する。
●適当な位置に、エラーメッセージ表示用ダイナミックテキストフィールド（errMsg）、送信ボタン（submitB）を配置する
　　この例では見えないが、送信ボタンの上にerrMsgがある。
●新規シンボル(ボタン)の作成で、ボタンを5個作成し、pb1,pb2,,pb5のリンケージ名でライブラリーにおいておく
　（これは、過去データページを表示するためのリンクボタンに使い、入力アイテム数が増えると順次5まで表示させる）

スクリプト（_root、FRAME1に記述）

System.useCodepage = true;
var p:Array = new Array();
var step:String;
sdData = new LoadVars();
rvData = new LoadVars();
//出力テキストフィールドの配置
for (i=0; i<8; i++) {
  createTextField("dsp1Box"+i,i+1,20,120+i*60,570,20);
  createTextField("dsp2Box"+i,i+100,30,140+i*60,550,40);
  _root["dsp1Box"+i].background = true;
  _root["dsp1Box"+i].backgroundColor = 0xD2E9FF;
  _root["dsp2Box"+i].maxscroll = 2;
  var cntBox:mx.controls.TextArea;
  cntBox.maxChars = 100;
}
//初期表示用データの取得・表示
srData("opening","");
//書き込みデータ登録・表示
submitB.onRelease = function() {
  var body = sbBox.text+"|"+nmBox.text+"|"+emBox.text+"|"+cntBox.text;
  srData("registration",body);
};
function srData(step,body) {
  rvData.onLoad = function(success) {
    if (success) {
      dataTotal = rvData.count;
      rvBody = rvData.val;
      page(dataTotal);
      display(dataTotal,rvBody);
    } else {
      errMsg.text = "送受信エラー";
    }
  };
  sdData.step = step;
  sdData.body = body;
  sdData.sendAndLoad("bbs.php",rvData,"POST");
}
//ページ選択・表示切り替え
function page(dataTotal) {
  pNum = Math.ceil(dataTotal/8);
  for (k=1; k<=pNum; k++) {
    p[k] = attachMovie("pb"+k, "p"+k, 200+k);
    p[k]._x = 500+20*(k-1);
    p[k]._y = 610;
    p[k].n = k;
    p[k].onRelease = function() {
      this._alpha = 30;
      for (i=1; i<=8; i++) {
      _root["dsp1Box"+i].text = "";
      _root["dsp2Box"+i].text = "";
    }
      page = this.n;
      pageChange(page);
    };
  }
  function pageChange(page) {
    rvData.onLoad = function(success) {
      if (success) {
        dataTotal = rvData.count;
        rvBody = rvData.val;
        display(dataTotal,rvBody);
      } else {
          errMsg.text = "送受信エラー";
      }
    }
    sdData.step = "pagechange";
    sdData.page = page;
    sdData.sendAndLoad("bbs.php",rvData,"POST");
  }
}
//データ表示
function display(dataTotal, rvBody) {
  var bbsData:Array = rvBody.split("\n");
  if (dataTotal) {
    for (j=0; j<dataTotal; j++) {
      var itemData:Array = bbsData[j].split("|");
      if (itemData[0] == "") {
        itemData[0] = "無題";
      }
      if (itemData[1] == "") {
        itemData[1] = "名無しさん";
      }
      _root["dsp1Box"+j].text = itemData[0]+"　　"+itemData[1]+"　　"
                               +itemData[2]+"　　"+itemData[4];
      _root["dsp2Box"+j].text = itemData[3];
    }
  }
}

題、名前、email、日時表示用Dテキストボックス（背景色をつけている)と
記事内容表示用Dテキストボックスを8個配置

step：opening、書き込みなしでsrData関数を参照

送信ボタンがリリースされたら、要素を"|"区切りでつなぎ変数bodyに
step：regisitratio、bodyを引数にｓｒData関数に

phpと交信し、
受信した変数count、val
を引数に関数page、displayを参照

変数step、bodyを送信

全データ数に応じて
ページ切り替え用のボタンを表示する
（ここでは５までだが、いくつでも表示が可能）

数字ボタンがリリースされたら、現在の表示を消してページ番号を引数にして関数pageChangeへ

phpに変数stepとページ番号を送信し、そのページに相当するデータ数とデータを受信し、それを引数に関数displayに

受信データを\n区切りで配列データとする（投稿アイテムごとに分ける）

さらに、｜区切りで要素データを配列として分ける

題名にデータがなければ｢無題｣に、名前にデータがなければ「名無しさん｣に

各要素をテクストボックス
１，２に振り分けて表示

FLASHスクリプトの説明

● _root["dsp2Box"+i].maxscroll = 2;
　　記事内容の表示用Dテキストボックスは2行まで表示させる（3行以上になってもマウスによるスクロールは可能)
●var cntBox:mx.controls.TextArea; cntBox.maxChars = 100;
　　記事内容ボックスに記入できる文字数を100に
●sdData.sendAndLoad("bbs.php",rvData,"POST");
　　phpとのPOST交信で、sdDataの中身を送り、rvDataに受信する

(追)連続投稿抑制スクリプト
submitB.onRelease = function() { var body = sbBox.text+"|"+nmBox.text+"|"+emBox.text+"|"+cntBox.text; srData("registration",body); }; のところを、以下に変えます。

var prevcT = 0;
submitB.onRelease = function() {
        var currentTime = new Date();
        var cT = currentTime.getTime()/1000;
        if (cT-prevcT<60) {
                errMsg.text = "連続投稿";
        } else {
                errMsg.text = "";
                var body = sbBox.text+"|"+nmBox.text+"|"+emBox.text+"|"+cntBox.text;
                srData("registration",body);
        }
        prevcT = cT;
};

(再追)　上記＋cotents欄未記入を登録拒否

var prevcT = 0;
submitB.onRelease = function() {
        if (cntBox.text) {
                errMsg.text = "";
                var currentTime = new Date();
                var cT = currentTime.getTime()/1000;
                if (cT-prevcT<60) {
                        errMsg.text = "連続投稿";
                } else {
                        var body = sbBox.text+"|"+nmBox.text+"|"+emBox.text+"|"+cntBox.text;
                        srData(body);
                }
                prevcT = cT;
        } else {
                errMsg.text = "contents未記入";
        }
};

ｐｈｐスクリプト

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Flash BBS</title>
</head>
<body>
<?php
$mode = $_POST["step"];
$file = 'bbs.log';

if ($mode == "opening") {
rdFile_sdData($file);
}
else if ($mode == "registration") {
$bodyIn = $_POST["body"]."|".date("Y/m/d H:i");
$handle = fopen($file, 'a');
fputs($handle, "$bodyIn\n");
fclose($handle);
rdFile_sdData($file);
}
else if ($mode == "pagechange") {
$page = $_POST["page"];
$bodyOut="";
$handle = fopen($file,'r');
$log = file($file);
$log = array_reverse($log);
$count = count($log);
$total = $count - 8*($page-1);
for ($i=8*($page-1); $i<8*($page-1)+$total; $i++) {
$bodyOut .= $log[$i];
}
echo "&count=$total&";
echo "&val=$bodyOut&";
fclose($handle);
}
else {
exit;
}
function rdFile_sdData($file) {
$display_num_page = 8;
$bodyOut = "";
$handle = fopen($file,'r');
$log = file($file);
$log = array_reverse($log);
$count = count($log);
if ($count>=$display_num_page) {
$total = $display_num_page;
} else {
$total = $count;
}
for ($i=0; $i<$total; $i++) {
$bodyOut .= $log[$i];

}
echo "&count=$count&";
echo "&val=$bodyOut&";
fclose($handle);
}
?>
</body>
</html>

charsetはサーバーによってEUCなどに設定する

変数stepをを受信して$modeに
ログファイル（最初に自動生成される)

初期表示モード
送信関数へ

書き込みモード
受信内容に日付を加える

ログファイルに追加書き込み

送信関数へ

ページ更新モード

ログファイル読み込み

データ数取得
指定してきたページ番号のデータ数

送信データをまとめる

送るデータ数
内容データをFlashに送る

ファイルデータ送信関数
Flashの１ページ当たりの表示件数

読み込みモードでファイルオープン
配列で読み込み
データの並び順を逆に
件数

データのまとめ

FLASHにデータを送る

PHPスクリプトの説明

●$mode = $_POST["step"];
　　POST受信のデータを変数に取り込む
●date("Y/m/d H:i")
　　年月日、時間を取得する関数、いろいろなパラメータ、表示方法が指定できる
●echo "&val=$bodyOut&";
　　変数$bodyOutを変数名 val でFlashに送る。
● for ($i=0; $i<$total; $i++) {$bodyOut .= $log[$i];
　　データ数のデータをつないで１つのデータとする　.= はFlashの += に同じ
●$total = $count - 8*($page-1);
　　Flashから送られてきたページ番号が例えば４ならば、前のページまでの件数（32）を引いた残り
●ファイルの操作関数については、前項「FLASH/phpの連携によるショートダイアリー」を参照のこと

HOME　　　お勉強総リスト