乐胖代购免代理版

※Chromeで本文エリアをスクロールするとエラーになるそうです。ごめんなさい！

こんにちは！１年間自転車通勤を続けた結果、健康診断で「おっ！」と言われて大満足のaragaです!

SWFをiPhone上のSafariで動かすプロジェクト「FlashForward」をgithubで公開しました。

プロジェクト名

FlashForward

ライセンス

MIT

FlashForwardとはなにか？

まずは、社内勉強会で発表した資料をご覧ください。

非常に操作性が悪くてすいません。が、実はこの資料はおそらく世界初の試みで作られています。

なんとSWF,SVG,Canvasの3種類のフォーマットで見る事が出来ます。

※ Safari推奨

これらはFlashForwardを使ってFlashLite1.1で作ったSWFのスライドを変換しました。

このほかのサンプルはギャラリーをご覧ください。

以上で、エントリを終了するつもりでしたが、想像以上に使いづらい資料ですので、資料の内容を簡単に説明していきます。

特徴

FlashForwardはFlashLite1.1コンテンツをHTML5に変換するシステムで、特に日本のフィーチャーフォン(ガラケー)で使われているようなFlashに特化しています。

iPhoneで見るという前提なのでSafari以外のブラウザは動作保証しません。

日本のガラケーサービスにおいて一般的なテクニックである「SWFの動的生成」に対応しやすくするために、SWFを一度中間フォーマットへ変換するパーサーと動かすランタイムを独立させています。

そのため動的生成は中間フォーマットであるJSONを書き換えるだけで実現できるので、非常に処理が簡単です。

また、携帯ブラウザという特性上、出来るだけ通信を小さくするために、中間フォーマットは小さな単位で分割します。上手くキャッシュを使えば、例えばアバターの服だけを新たにロードするというように非常に少ない通信で扱う事が出来ます。

中間コードの仕様

グラフィックはSVGまたはJPEG, PNG、その他はJSONに変換し名前付きインスタンス単位でファイルを分割します。(ファイル数を少なくする事も可)

index.json

SWFのルートでfpsなどのメタ情報、素材の辞書情報、RootにあるフレームアニメーションとActionScriptを所持しています。

動的生成をする場合は、このindex.jsonを書き換えます。

各種SVG

ベクターグラフィック、埋め込みフォント、静的テキストはSVGにしています。

SVGにしている理由はSVGは見た目を非常に美しく再現できるということと、XMLなのでクライアントでパースがしやすいためです。

各種ビットマップ

SWFに埋め込まれたBitmapデータはJPEGまたはPNGにして抽出します。

その他JSON

上記以外はJSONにしています。

Canvas と SVG

FlashをHTML5にした事のある方はCanvasにするか、SVGにするか、CSSアニメーションにするか非常に悩むと思います。

iOS4からCSSアニメーションのwebkitTransformではGPUが効くという噂を聴きCSSアニメーションも検討しましたが、SWFのようなフレームアニメーションを再現するには、各ムービークリップで同期を取るのが難しかったため今回は見送りました。

さて、問題はSVGとCanvasのどちらを採用するかですが、グラフィックが奇麗なのはSVG、FPSが出やすいのがcanvasというのが色々と試した結果です。

グラフィックに関しては、canvasではpixel単位でビットマップを作るので丸める際に生じる誤差の範囲で隙間が出来たりする場合が有ります。

FPSに関しては、SVGでは10fps程度が限界で、canvasでは15fpsくらいまで出せると思います。

実装上の大きな違いは、SVGが毎フレーム差分のDOM操作をするのに対して、Canvasは毎フレーム全ての画像レンダリングを実装する必要があります。ガラケーの制約の中で作られたFlashの場合はSVGでもかなりのFlashが問題なく動きますが、アルファを多様したりオブエジェクト数が多かったり、着色を使っているような場合はCanvasでないとパフォーマンスが出ません。

まとめると、