スマートフォンのFlashの代替について、2012年7月現在のsonicmoov的見解をまとめます。 元Flashチーム、現フロントエンドグループのエンジニアbobbyと申します。 sonicmoovでは”Adobe Flash”を用いた既存のワークフローを変えることなくコンテンツを世に出す仕組みづくりを進めています。 特に弊社ではソーシャルゲームコンテンツの需要が多くスマートフォン対応は急務です。
Flash代替に求められる要件は?
Flashの代替として求められる要件としては、以下が考えられます。
- HTML内でのインライン展開ができる
- ベクター、ラスター画像両方に対応できる
- 描画更新コストが低い
- コンテンツの内容を動的に変えられる
これらの要件を満たし、現在のスマートフォンのブラウザ上で動く描画APIの中で汎用性を考慮すると Cavnas, SVG の二択になります。
Canvasの特徴
Canvasの主な特徴は以下の通りです。
- 低レベルAPIとして設計されておりHTML上の扱いは<img alt=””>タグとほぼ同じ
- 表現に制限が少なくパフォーマンス調整しやすい
- 挙動のデバイス差が少なく設計しやすい
- 実装の手間が大きい
- 世に出回っているほとんどのスマートフォンで稼働する
続きを読む
SVGの特徴
SVGの主な特徴は、以下の通りです。
- HTML5 inlineSVGによりHTMLの一部として利用可能になった
- XML形式のフォーマットで実装の敷居が低い
- オーサリングツールが充実
- 描画の構造体が定義できる
- アニメーション用の拡張(SMIL)が備わっている
- InlineSVG iOS4系,Android2系が対応不完全
Canvasはブラウザ内の依存関係が少なく構造もシンプルなため、SVGより早い段階で安定した実装がされているようです。 一方、SVGは描画構造体とアニメーション管理の仕組みが内包されており、GPUアクセラレーションが対応してくれればかなりのパフォーマンスが期待できます。 弊社のソリューションjavascriptでSWFを再生する”JswfPlayer“では端末シェアと安定性を優先しCanvasを採用しています。しかしブラウザのSVG対応が進めば描画先を切り替えることになるかもしれません。 以上、簡単なまとめでしたが、今後も手が追い付き次第比較やらサンプルやら上げていきたいと思います。
