明日も楽をするために

めんどくさがりなITエンジニアが書くメモ帳

PexJSで引数にURLではなくバイナリをセットして使用する方法

新年初投稿です。

最近までGoogleのSwiffyを使ってswfをhtml5に変換して使っていたのですが
developers.google.com


特定のバージョンから内部的にCanvasからWebGLに変更されたのか動かなくなってしまった古い端末が増えたため、別の方法を取り入れることになりましてDeNA様のPexJSを使わせて頂く事になりました。
github.com

Swiffyは公開されているruntimeとGoogleのサーバー上で変換されたhtml5は常に揃えないといけないのですが、実はv5.2のruntimeを使用するとv7.3が公開されるまでの間そのまま使用することが出来ました。(古いruntimeはサーバーに残ってるので直打ちでダウンロードできる)

v5.2を使用すると古い端末でも再生できたりします。v7.3辺りからGoogleで生成されるJsonの形式が微妙に変わってしまったため遂に動かなくなりました。


Flashの生成にはswfmillを使用して行っていたのですが、PexJSをそのまま使うと第一引数にURLをセットする必要があるのでPexJSを使用する画面とswfを生成する画面の二画面が必要でした。

どうしても一画面で完結したいので最初はwindow.URL.createObjectURL()を使って試していましたが、Android4.0.4では動かないため別の方法を模索する必要がありました。

PexJSは日本語のドキュメントも充実しているのですが、実は書かれていないオプションがありましてそれが「swfBinary」です

■サンプル(PHP+Javascript)

PHP側でswfのバイナリをbase64にしてhtml側に渡す

base64_encode($swf);

Javascriptbase64をdecodeしてセットする

var option = {
    swfBinary : atob(swf);
};
var pex = new Pex("", "container", option);

これで一画面で完結できます。