なんか airhttpd を使って面白いものを作れないかと思い、SWFLoader を使って外部 swf ファイルをロードし、そのフレームのスナップショットをHTTPクライアントに返すサーバーアプリを思いついた。

HTML 5 の Canvas 対応をブラウザであればそれを JavaScript で描画していくことができる。

開発環境とライブラリ

ファイル構成

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

<?xml version=”1.0” encoding=”utf-8”?>
<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:Script>
<mx:SWFLoader id=”loader” width=”150” height=”200” opaqueBackground=”0xffffff” cacheAsBitmap=”true”
source=”SWFファイルのURL”/>
</mx:WindowedApplication>

SWFLoader を一つ配置して、そのスクリーンショットを撮る getSnapShot を用意する。そのメソッドを CGIService に渡して HttpListener のサービスとしてセットする。
creationCompleteで以上を行い、サーバーを起動する。

index.html

ブラウザで表示する HTML 5 の HTMLファイル。

<!DOCTYPE html>





Flash Viewer





timerで0.2秒おきにサーバーへ画像(スクリーンショット)を取得しに行く。いったん非表示のimageにロードし、ロード完了イベントで canvas のコンテキストに対して描画する(drawImage) 。

結果

f:id:tilfin:20100221182824j:image
こんな感じ iPod touch の Safari で http://AIRのサーバホスト:9080/ にアクセスするとパラパラ漫画のように Flash のアニメーションが表示される。

テストに使わせてもらった Flash は Afternoon Tea|Blog Parts|アフタヌーンティーの季節のテーマをモチーフにしたブログパーツ(無料)