【Smokescreen】FlashをHTML5に変換するエンジンをチラ見したメモ。
※6月4日10:40頃追記 海外のブログに情報があったので適宜修正しています。
※6月4日10:50頃追記 ブログ「MACLALALA2」に日本語訳があったので参考にしました。
お世話になっております。
ループス岡村です。
今回は仕事のメモです。
すみません、公開するようなものじゃないんですが、露出狂なもので。。。ほんとすんません。
だれかにサポートして欲しいとか、情報提供して欲しいとか、そんなこと決して思ってません。
◆Smokescreen
SWF（パブリッシュ済みFlashファイル）を読み込んでHTML5（というかJavaScript）に変換する（らしい）、ものすごいツール。上記は同サイトのSWFファイルを直接表示していますが、こちらのURLではJavascriptに変換されたものを見ることができます。
動作イメージ（Simon Willison’s Weblogより）
- swf バイナリを読み込む
- 読み込んだ swf を開ける
（SWFの中身はJavaScriptノネイティブコードになっているの？アセンブラの逆コンパイルみたいなもの？） - 画像や埋め込まれた音声データを抜き出す
- データをBase64エンコード （？）
- ベクター画像はSVG（XMLによって記述されたベクターグラフィック言語）で動かす
(Chromeのインスペクタで見るとリアルタイムにSVG変換されている様子が見えるらしい)
動作はかなり重いですが、バナー広告程度であれば（i-Phoneでも）結構さくさく動きます。
デモ：
http://smokescreen.us/demo/
※StrongBad
email #45なんかはiPhoneでも見れます。でもすごく重い。
◆メモ
ソースコード（http://smokescreen.us/demos/js/smokescreen.0.1.3-min.js） をチラ見。
/**
* Smokescreen v0.1.2 - Chris Smoak <chris.smoak@gmail.com>
* A Flash player written in JavaScript.
*
* Copyright 2010, RevShock
*
* Date: 2010-05-27
*/
↑コピーライト。
実質5000～6000行くらい？Simonoのブログによれば8000行程度とのこと- swfファイルからActionScriptや画像・音声・映像データなんかを読み込むのは結構メジャーな技術らしい。
- 有償でswfファイルからflaファイルにデコンパイルするツールもあるようなので、不可逆圧縮ではないのかもしれない。
- 空のDOMオブジェクトにメンバ変数としてPlayerやswfを生成し、javaのリフレクションメソッドの要領でDOMのエレメントのプロパティやメソッドなんかをガンガン追加しているように見える。
- UserAgentからブラウザやOSを判別している。
- マウス位置やクリックをイベントで拾って制御しようとしている。
- 音声はバイナリからカレントタイムラインのデータをぶっこ抜いて無理やり再生しているように見える。
- イベントハンドラで分岐しているあたり、ActionScriptを動かそうとしているようにも見える。
- XMLHttpRequestでサーバと同期通信している。
- ちゃんとHTML5とJavascriptを勉強しないと理解できなそう。秀丸で読むのは限界。
- AdobeがこれをJSでやらないのはオープンソースだから？それともユーザーエクスペリエンスの問題？
◆まとめ
関数名は意味の通じる言葉で書かれていて読みやすかったです。
変数名がアルファベット一文字だったりするのは、階層程度しか意味がないってことなんですかねェ。
ActionScriptを定数で見かけたのは嬉しかったです。今後もしかしたらActionScriptまで動くのかも！？そんな期待をいだいてしまいます。
Smokescreenは独自のActionScriptインタープリタを実装しているというブログ記事がありました。
ところで、Smokescreenのコメント欄にいるバケモノたちはなかなか素敵な造形です。
ご覧になったことがない方は、是非一度サイトを訪れてみることをお勧めします。
