なんか airhttpd を使って面白いものを作れないかと思い、SWFLoader を使って外部 swf ファイルをロードし、そのフレームのスナップショットをHTTPクライアントに返すサーバーアプリを思いついた。
HTML 5 の Canvas 対応をブラウザであればそれを JavaScript で描画していくことができる。
開発環境とライブラリ
- Flex 3.5
- Adobe AIR 2.0 β2
- airhttpd - http://code.google.com/p/airhttpd/
ファイル構成
lib/
airhttpd-0.5.swc
src/
docroot/
index.html
webapp/
CGIService.as
Main.mxml
CGI処理
airhttpd の FileService クラスを継承して CGIService クラスを作ります。
package webapp {
import com.tilfin.airthttpd.server.HttpRequest;
import com.tilfin.airthttpd.server.HttpResponse;
import com.tilfin.airthttpd.services.FileService;
import flash.filesystem.File;
public class CGIService extends FileService {
private var _snapShotFunc:Function;
public function CGIService(snapShotFunc:Function, docroot:File) {
super(docroot);
_snapShotFunc = snapShotFunc;
}
override public function doService(request:HttpRequest, response:HttpResponse):void {
if (request.path == “/action”) {
response.contentType = “image/png”;
response.body = _snapShotFunc();
return;
}
super.doService(request, response);
}
}
}
/action のリクエストが来たらコンストラクタで指定された snapShotFunc を呼び出して png の画像バイト配列を返す。
Main.mxml
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml" creationComplete=”init()”>
mx:Script
<![CDATA[
import com.tilfin.airthttpd.server.HttpListener;
import webapp.CGIService;
import mx.graphics.codec.PNGEncoder;
private var _pngEncoder:PNGEncoder;
private var _listener:HttpListener;
public function init():void {
_pngEncoder = new PNGEncoder();
_listener = new HttpListener(function(line:String):void {
trace(line)
});
_listener.service = new CGIService(getSnapShot,
new File(File.applicationDirectory.nativePath + “/docroot”));
_listener.listen(9080);
}
private function getSnapShot():ByteArray {
var bmpdat:BitmapData = new BitmapData(150, 200, false);
bmpdat.draw(loader.content);
return _pngEncoder.encode(bmpdat);
}
]]>
<mx:SWFLoader id=”loader” width=”150” height=”200” opaqueBackground=”0xffffff” cacheAsBitmap=”true”
source=”SWFファイルのURL”/>
SWFLoader を一つ配置して、そのスクリーンショットを撮る getSnapShot を用意する。そのメソッドを CGIService に渡して HttpListener のサービスとしてセットする。
creationCompleteで以上を行い、サーバーを起動する。
index.html
ブラウザで表示する HTML 5 の HTMLファイル。
timerで0.2秒おきにサーバーへ画像（スクリーンショット）を取得しに行く。いったん非表示のimageにロードし、ロード完了イベントで canvas のコンテキストに対して描画する（drawImage） 。
結果
こんな感じ iPod touch の Safari で http://AIRのサーバホスト:9080/ にアクセスするとパラパラ漫画のように Flash のアニメーションが表示される。
テストに使わせてもらった Flash は Afternoon Tea｜Blog Parts｜アフタヌーンティーの季節のテーマをモチーフにしたブログパーツ(無料)
