GAEからjavascript経由でFlashに値を渡す方法

・Log ・・Flash ・・GAE

＝前置き＝

　無念番付関連の話題の最後。GAEで一番多い色の計算まではできたので、あとはそれをFlashで実際に使えるように値を渡すまでの処理。

＝概要＝

　おおまかな流れは以下の通り。

  • テンプレートを使い、値をjavascriptの変数としてセットする
  • Flashはswfobjectで読み込むようにし、その引数に先の値をセットする

＝GAE→javascript＝

　GAEからテンプレートを使ってjavascriptに値を渡すのは、以前のAmazonリンク画像の埋め込みのついでに処理可能。


　スクリプト側は以下のような感じで、「color」に色を設定して渡す。（ちなみにここでは以前のGAEの画像格納に合わせ、img_urlの参照先も変更している）

div_ad_list = []

infos = db.GqlQuery("SELECT * FROM UpdateModel ORDER BY list_index LIMIT 5")
for info in infos:
	div_ad = {}

	#url
	div_ad['link_url'] = info.link_url
	div_ad['img_url'] = 'image?key_name=' + info.key().name()	#info.img_url

	#color
	div_ad['color'] = info.color

	#add
	div_ad_list.append(div_ad)

#template param
template_values = {
	'div_ad_list': div_ad_list,
}

#template apply
path = os.path.join(os.path.dirname(__file__), 'template', 'template.html')
self.response.out.write(template.render(path, template_values))


　今回はcolorのリストになるので、javascriptも以下のように配列として宣言し、そこにテンプレートで値を並べる。

//それぞれの広告で一番多い色のリスト
var color_list = [
	{% for div_ad in div_ad_list %}
		"{{div_ad.color}}",
	{% endfor %}
];

＝javascript→Flash＝

　何やら最近はFlashの設定は直接embedするのではなくjavascriptから起動することが多いようで、javascriptからFlashに値を渡すサンプルもそういうものが多かった。ので、今回はswfobjectを使ってFlashに引数を渡して起動することにした。


　まずはGitHub - swfobject/swfobject: An open source Javascript framework for detecting the Adobe Flash Player plugin and embedding Flash (swf) files.からソースコードをダウンロード。実際に使うのはswfobject.jsなのでこれだけコピペすれば十分だが、自動でFlashのバージョンUPを促してくれるexpressInstall.swfもあると便利なようなのでこれもコピペする。（HTMLから参照しやすい位置に）


　そしてjavascriptで以下のようにして埋め込む。

<!-- swfobjectの読み込み -->
<script src="swfobject.js"></script>

<!-- 本体Script -->
<SCRIPT type="text/javascript">
<!--
//それぞれの広告で一番多い色のリスト
//（上で書いたやつ）
var color_list = [
	{% for div_ad in div_ad_list %}
		"{{div_ad.color}}",
	{% endfor %}
];

//Flashから呼び出す関数の設定
var canvasToFlash = window.canvasToFlash= {};
canvasToFlash.getDataURL = function(){
	var index = 0;//実際には色々と計算する
	return color_list[index];
};

//パラメータは関数の設定以外は適当に
var flashvars = {
	getDataURL:'canvasToFlash.getDataURL'
};
var params = {
	menu: 'false',
	scale: 'noScale',
	allowFullscreen: 'true',
	allowScriptAccess: 'always',
	bgcolor: '#000000',
	wmode: 'direct'
};

//swfobjectでswf読み込み
swfobject.embedSWF(
	"GameMain.swf",//このFlashを
	"div_flash",//このdivに読み込む
	"320",//あとはサイズとか色々設定
	"480",
	"10.0.0",
	"expressInstall.swf",
	flashvars,
	params
);
-->


<!-- divだけ設定しておき、あとからswfobjectでFlashをロードする -->
<div id="div_flash" width="320" height="480"></div>

　これで「id="div_flash"」のところにGameMain.swfが埋め込まれる。

　そしてFlashからは以下のようにgetDataURLを呼べばcolorが返ってくる。（ちなみに関数名がgetDataURLなのは元々Amazonなどの画像を渡す目的だったためなので、本来は目的に合わせてちゃんと設定すべき）

var getDataURL:String = loaderInfo.parameters.getDataURL;
var color:uint = ExternalInterface.call(getDataURL);

＝参考URL＝