FlashがHTML5より優れている点を敢て挙げてみる

HTML5のVideo/AudioタグとCanvasなどがあればFlashが要らなくなるのではとの議論があるが、そう簡単にはFlashが不要になるとは思えない。僕個人としては、Webの世界に1ベンダーのプロプライエタリでクローズドなものがあることは好ましくないと考えているが、ひいき目にみてもVideo/Audio+CanvasタグではFlashには適わないと思える点がある。

奇しくも、GoogleがChromeにFlashを正式サポートすることを発表したが、これまで脱Flashへ向かうものと思っていたのでちょっと驚きである。これはAppleを睨んでの戦略的・政治的な決定であると思うが、そんな泥臭い話とは切り離して、Flashの方がHTML5より技術的に遙かに優れていると僕が感じている点を敢て以下に挙げてみた。

コンパクトなデータ表現

SWF中にはタイムラインベースの静的なベクターグラフィックのデータがエンコードされているが、それが非常にコンパクトだ。

CanvasのmoveTo()などのパス形式の座標値は特定の原点からの絶対座標であり、現在の位置からの距離に関わらずデータ量は同じである。一方、Flashでは現在の位置からの差分(相対値)で表現できる。何を意味するかというと、短い線は差分が小さいので、もし、4ビットで表現できる数値であれば、4ビットで表現するということである。FlashのSWF中の数値(ビット表現)はその値の大きさに応じて可変長であり、さらに整数で表現できるように工夫されている。CanvasではJavaScriptの実装にもよるが、数値はどんなに小さな整数でも32bitで表現しているのが普通だ。

これは、些細なことのように思えるかも知れないが、複雑な図形は膨大な数の数値の塊であり、コンパクトに表現できるか否かではデータ量が大きく異なってくる。また、それはパフォーマンスにも影響を及ぼす。

巧妙な領域の塗りつぶし表現

Canvasでは領域を塗りつぶすのに方向性のあるパス形式の図形で表現する。単純な図形を塗りつぶすくらいなら問題ないが、細かな地図やアニメ画など多数の領域に分割された図形を塗りつぶす場合には、隣接した領域の境界となる線は一本では不十分であり、それぞれの領域に属する2本の線が必要になる。

一方、Flashは1本の線で進行方向に右と左で別々に塗りつぶす色を指定できる。これは、領域の境となる線分が共有されるため1つで済むという利点がある。さらに線の方向は重要ではなく、結果的に閉領域ができればよい。ちょうど塗り絵などのように、線画を書いてから線で囲まれた領域を塗ることができるという方式である。これは、領域分割された複雑な図形を塗りつぶすときのデータ量がFlashの方が遙かに少なくて済むということを意味する。

交わらない領域

Flashでは同じレイヤーの中では、図形同士は決して交わらない。これは図形をどのような順番で描画しても結果が同じということであり、並列実行が可能ということでもある。

このことはオーサリングツールで吸収できるとも考えられるが、その場合には図形が交わらないように分割が必要ということであり、データ量がそれだけ増えることになる。前述したように、Flashでは線分を効率よく共有できるが、Canvasでは分割した分だけ線データが増えることになる。

イメージのαプレーン

FlashではSWF中に埋め込めるイメージとしてJPEGに対応したものはあるが、PNGには対応していない。その代わり、独立したαプレーンが表現できる。JPEGに対してそのαプレーンを適用してPNG相当のイメージを動的に効率よく合成することが可能だ。

ビデオの再生

HTML5ではビデオのコーデックは仕様では決めないという方針になってしまったため、再生できる/できななどがブラウザごとに変わってしまう。ストリーミングについてもRTMPのようなものは定義されおらず、HTTP GETで単純に再生することぐらいしかできない。

組込みフォント

FlashではSWF中にフォントデータを組み込むことができる。OSのシステムフォントに依存しないため、どのブラウザで表示しても見た目が全く同じになる。これはデザイナーにとっては非常に重要なことだ。

文字の描画

Flashの文字列表示ではHTMLが使えるが、Canvasの文字描画系APIは単なる文字描画である。そのため、修飾文字を表示するのが面倒。ブラウザの中で実行しているのであるからHTML(のサブセット)をCanvasの中で利用できても良さそうであるが、それができない。

ハードウェアアクセラレーションを利用しやすい構造

HTML5でもハードウェアアクセラレーションを利用した実装が増えてくると思うが、Flashの方がそれを最大限に活用できる構造になっている。

Flashでは静的な図形は図形辞書に事前に登録しておき、描画するときに各レイヤーにコピーするというモデルである。各レイヤーではアフィン変換とカラー変換のためのマトリックスを定義こすることができる。

図形辞書があるということは、図形の頂点データを事前にGPU側に登録することが可能というとであり、GPUのDisplay Listと相性がよいことを意味する。何度も利用される頂点データをGPUに転送しておき、CPUからは図形を表示するレイヤーを指定するだけでよい、という最適化が可能である。

一方、Canvasではベタなベクトルデータがあるだけであり、GPUの機能を最大限に活用するための情報を抽出できるような仕様にはなっていない。WebGLやO3Dという手段もあるが、どこまで浸透するかは未知数である。

Flashの進化

確かにFlashをベースにしている動画共有サイトの大部分のことはHTML5でも実現できると思う。しかし、HTML5が現在のFlashに追いつく頃にはFlashはその先を行っていることであろう。

ActionScriptJavaScriptについて (Flashの優れた点ではないが)

ActionScript3はECMAScript 4th(ES4)を先取りした言語だった。ES4の規格策定に失敗したとき、当初は非常に残念なことだと思ったが、今ではそれでよかったと思っている。ECMAScriptに型があるのは非常にカタ苦しいと感じる。型やクラスが明示的に文法上定義される言語では、発想が無意識的にそれに縛られてしまい、新たなフレームワークというかコーディングパターンを排除する力が働くようにも思える。本当に必要なもの以外は規定しないシンプルで自由なところがJavaScriptの良いところなのではないか。


以上、とりとめもないことを書いたが、GoogleAdobeの動き、それに対するAppleの反応など今後が面白そうだ。