FLASHのお勉強_流れる文字（テロップ、marquee）をブラウザ画面から更新（１）

　最新情報などをwebページにFLASH上の流れる文字（テロップ、marquee）として表示させている場合、文字列を fla をいじることなく、ブラウザ画面から更新するお勉強である。　管理画面（非公開）を別に作り、そこで更新させた文字が公開ページに反映されるというものである。　流れる文字はこのSAMPLE１では、単に文字列が流れるだけであるが、スライドショーなどのFlash上で流すことも可能である。　また、Flash画面上にテロップ風に流している場合の例については、SAMPLE２で示している。

　SAMPLE２で示す例は、更新と表示を同じ画面で行う例である。　したがって、更新と同時にリアルタイムで更新されたことが確認でき、また、このまま公開すれば、不特定多数の閲覧者誰でもが更新することができることになる。　この場合、比較的アクセスの少ないページでは機能すると思うが、同時書き込みに対する対策等が十分とは言えないので、使用に当たっては注意を要する。　目的によってはこんな使い方ができるという例である。
　また、この例の場合、更新した人は更新後の文字が流れるのをリアルタイムで確認できるが、他の同時閲覧者はページを更新しない限りリアルタイムでは確認できない。　flash側で、一定時間ごとにPHPにアクセスするようにすれば、その時間間隔で表示が変わるようにできるが、どの程度の頻度で更新が起こるかということと、サーバーへの負荷がどの程度になるかということとの相談と言うことになるので、ここでは、そこまでは踏み込んでいない。

SAMPLE１

★＜公開ページ＞　最新のテロップが流れています。下の管理ページで更新してからこちらの更新ボタンで確認してください。
　　　　　　　　　　　　実際のページではページを開くたびに最新となるので、更新ボタンは不要です。

★＜非公開管理ページ＞　新しいテロップを記述して更新ボタンを押して下さい。　上の更新ボタンで確認できます。

ステージなどの準備

<公開ページ用fla>
●600*45、24fpsのステージ。右下に更新ボタン（インスタンス名：submit_btn）を置く

<非公開管理用flaページ>
●600*45、２４ｆｐｓのステージ。右下に更新ボタン（インスタンス名：submit_btn）を置く
●メッセージ表示用ダイナミックテキストボックス（インスタンス名：errMsg）を左上に配置
●インプットテキストボックス（インスタンス名：inputBox）をその下に配置

スクリプト　各flaファイルのFrame1に記述 （as2.0）


<公開ページ用fla>

System.useCodepage = true;
var sdData = new LoadVars();
var rvData = new LoadVars();

//流れる文字のフォーマット
var txtformat = new TextFormat();
txtformat.size = 14;
txtformat.color = 0x000000;

//流れる文字の表示用MCとテキストフィールド作成
this.createEmptyMovieClip("txtBox",10);
txtBox.createTextField("tf",10,0,0,1000,30);

//文字を流す速度
var speed = 5;

//データログファイルからDATA読み込み・表示
rData("reading");

//文字列の表示関数
function displayStr(str) {
	txtBox.tf.text = str;
	txtBox.tf.setTextFormat(txtformat);
	var str_w = txtformat.getTextExtent(str).width;
	txtBox._x = Stage.width;

	onEnterFrame = function () {
		txtBox._x -= speed;
		if (txtBox._x<-str_w) {
			txtBox._x = Stage.width;
		}
	};
}

//PHPとのデータ送信、DATA取得関数
function rData(mode) {
	rvData.onLoad = function(success) {
		if (success) {
			displayStr(rvData.msg);
		} else {
			errMsg.text = "送受信エラー";
		}
	};
	sdData.mode = mode;
	sdData.sendAndLoad("telop.php",rvData,"POST");
}

//最新データの取得・表示
submit_btn.onRelease = function() {
	rData("reading");
}


<非公開管理ページ用fla>
System.useCodepage = true;
var sdData = new LoadVars();
var rvData = new LoadVars();
var prevcT = 0;
var limitInterval = 20;

//更新文字列のインプットと送信
errMsg.text="下のボックスにコメントを記述し更新ボタンをクリックして下さい";
submit_btn.onRelease = function() {
	if (inputBox.text) {
		errMsg.text = "";
		var currentTime = new Date();
		var cT = currentTime.getTime()/1000;
		if (cT-prevcT<limitInterval) {
			errMsg.text = "連続更新(20秒以内の再更新不可)";
		} else {
			var str = inputBox.text;
			srData("writing",str);
		}
		prevcT = cT;
	} else {
		errMsg.text = "contents未記入";
	}
};

//PHPとの交信
function srData(mode, str) {
	rvData.onLoad = function(success) {
		if (success) {
			errMsg.text = "正常に更新されました。";
		} else {
			errMsg.text = "送受信エラー";
		}
	};
	sdData.mode = mode;
	sdData.str = str;
	sdData.sendAndLoad("telop.php",rvData,"POST");
}

スクリプトの若干の説明

●文字列は、onEnterFrame で流していて、文字列全部がステージ左に消えた時点で右から再登場させている、文字列の長さは、
　var str_w = txtformat.getTextExtent(str).width
によって取得している。
●PHPとの交信は
　sdData.sendAndLoad("telop.php",rvData,"POST");
で行っていて、読み込み時には'reading'、書き込み時には'writing'をdataとしてPHPに送っている。これはPHPが１つのファイルになっていてその区別が必要となるから。
また、telop.phpが同じディレクトリーに置けない場合はそこにパスを通すこと。　他のドメインにPHPをおく場合は、そのドメインのルートに crossdomain.xml をおく必要があるが、これに関してはネットで探せば解説ページがいくつもあるのでそちらを参照のこと。

PHPスクリプト


        <!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/plain; charset=shift_jis" />
<title>Flash TELOP</title>
</head>
<body>
<?php
$file = 'str.log';
$dataMax = 10;
$mode = $_POST["mode"];
if($mode=="writing") {
	$strIn = $_POST["str"];
	$fp = fopen($file, 'a');
	@flock($fp,LOCK_EX);
	fwrite($fp, "$strIn\n");
	$log = file($file);
	$num = count($log);
	if($num>$dataMax) {
		$d = $num-$dataMax;
		for($i=1; $i<=$d; $i++) {
			array_shift($log);
		}
	}
	$newfile = join("",$log);
	fclose($fp);
	$fp = fopen($file,'w+');
   @flock($fp,LOCK_EX);
	fwrite($fp,$newfile);
	fclose($fp);
	echo "&msg=$strIn&";
}
else if($mode == "reading") {
	$strOut="";
	$fp = fopen($file,'r');
	@flock($fp,LOCK_SH);
	$log = file($file);
	$log = array_reverse($log);
	$strOut = $log[0];
	fclose($fp);
	echo "&msg=$strOut&";
}
else {
	exit;
}
?>
</body>
</html>

PHPスクリプトの若干の説明

$dataMax = 10;
　ログファイル（str.log）に保存するコメントの最大数
$newfile = join("",$log);
　最大数を超えたコメントを削除した後の配列をつないで、新しい保存用ファイルを作成する
$fp = fopen($file,'w+');
　一旦現在のファイルの中身を空にして$newfileを新たに書き込むためにfileオープンする
　（PHPのバージョンによってはファイルが空になったままになるようなので、そのときはこの再書き込みスクリプトを削除する）
echo "&msg = $strIn&";
　Flash側に、msgという変数で$strInを送信する
@flock($fp,LOCK_EX);　　@flock($fp,LOCK_SH);
　同時に複数の閲覧者が更新すると不都合が起きるので、誰かがファイルを開いたらファイルにロックをかける。
　この処理だけでは十分な対策とはいえないようなので、詳しくは他のサイト（検索すればたくさん見つかる）を参照のこと

HOME　　　お勉強総リスト