1. Flashユーザーが
今覚えておきたいHTML5
ClockMaker 池田泰延
2012/05/19 @ F-site

2. 自己紹介
• 名前 : 池田泰延
• 所属 : ICS
• 仕事 : インタラクティブデベロッパー
• 書籍 :
– 「Stage3D プログラミング」
– 「ActionScript Beatifl Code」等
• Twitter ID : clockmaker
• ブログ: ClockMaker Blog

3. Chapter. 1
HTML5について

4. HTML5の定義?

5. 本日の講演の前提
• HTML5 の利用用途
– セマンティックなマークアップ
– スマートフォンでの実装
– リッチコンテンツ
• ゲーム
• インタラクティブサイト
• RIA
– アプリケーション
– etc…
• 今日はインタラクティブサイトとゲームを対象とした話をします

6. Chapter. 2
HTML5を取り巻くブラウザの現状

7. ブラウザ別機能詳細
IE6/7/8 IE9 Chrome 18 Safari 5 Firefox 11
Canvas × ○ ○ ○ ○
WebGL × × ○ △ ○
CSS3 × △ ○ (※) ○ (※) ○ (※)
(グラデ・
角丸etc)
CSS3 3D × × ○ (※) ○ (※) ○ (※)
CSS3 × × ○ (※) ○ (※) ○ (※)
Animation
Video/Audio × ○ ○ ○ ○
SVG × ○ ○ ○ ○
※ベンダープレフィックスが必要

8. HTML5の現状と将来
全てのブラウザ CSS3 Animation
CSS3 CSS3 3D Web Workers
CSS2.1
Canvas Web Sockets IndexedDB
XHTML
Drag&Drop SVG Geolocation
HTML4 WebFont
Audio Video File API
現在 WebGL Web Sockets WebGL 将来
CSS3 Web Workers
IndexedDB Drag&Drop
Canvas CSS3 3D
CSS3 Animation SVG
File API Geolocation
Audio Video 一部のブラウザ

9. 直近のブラウザバージョン別
インターネット利用シェア(国内)
26%
22%
8.7%
7.9%
6.1%
5.1%
4.1% IE6/7/8
32.1%
2.0%
http://gs.statcounter.com/#browser_version-JP-monthly-201103-201203-bar

10. ブラウザバージョン別
インターネット利用シェア推移(国内)
この推移を見てるとIE8
が5%以下になるまであ
と2年近くかかりそう
(XPのサポート終了は
2014年4月8日)
http://gs.statcounter.com/#browser_version-JP-monthly-200807-201204

11. HTML5でインタラクティブ
コンテンツを作るには IE6も
OK
CSS2で制御
DOMエレメントで
制御
CSS3で制御
Canvasで制御
どうしよう？
SVGで制御
※組み合わせも可

12. 設計方法 特長 フレームワーク
DOM • マウスイベントの管理が行い易い jQuery
エレメント • CSS2系を使うのであれば古いブラウザでも
動作する(IE6でも)
▶シンプルなインタラクティブコンテンツ向き
Canvas • パフォーマンスがいい CreateJS
• ブラウザのデフォルトの挙動(選択など)を受けない Arctic.js
• ローレベルのAPIなので、マウスの管理等を Three.js
自前でしなければならない
▶ゲームなど複雑なインタラクティブコンテンツ向き
SVG • ベクターデータを扱える Swiffy
• 拡大縮小に強い
• 自前でグラフィックスを作成するのは難しい

13. HTML5とFlashのできることの違い
※HTML5は一部のブラウザ、バージョンに限られても、
Flash Playerではほぼ全ブラウザで機能が使える

14. Chapter. 3
FLASHとHTML5の比較
(パフォーマンス)

15. HTML5とFlashの描画パフォーマンス
http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/

16. HTML5とFlashの描画パフォーマンス
Max Objects with keeping 60fps
Flash
(BitmapData)
Flash
(DisplayObject)
HTML5
(Canvas)
HTML5
描画に関し
(DOM + webkitTransform) て、Flashが3倍
HTML5 高速
(DOM + CSS2)
0 2000 4000 6000 8000 10000 12000 14000 16000
http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/

17. パフォーマンスの差
• 描画APIの違い (Ex. Flashはスクリプト実行中に
描画をロックするような機構がある)
• ActionScriptはコンパイル済み、
JavaScriptはインタプリタ
• ブラウザ毎の開発の状況
▶将来的にパフォーマンスが向上する可能性あり

18. Chapter. 4
FLASHからHTML5への書き出し

19. Flash Proから出力するHTML5
• Flash Professionalで作成したコンテンツは、
ツールやサービスを利用すればHTML5(一部のブ
ラウザ対象)に出力することが可能
– Google Swiffy
– Adobe Toolkit for CreateJS

20. 変換後の容量(KB)
205
ビットマップを用いたアニ
180
メーション
30
CreateJS変換
Swiffy変換
78 SWFオリジナル
シンプルなアニメーション 110
3
0 50 100 150 200 250
※ランタイムJSを含む

21. なぜ容量が大きくなるのか
SWF HTML5+CSS+JS
透過画像 PNG→JPEGと透過チャンネ PNGを未圧縮のまま展開
ルに分離して展開
ベクターデータ 圧縮 SVG等、未圧縮
スクリプト コンパイル済みの そのままスクリプトで展開
データに変換
データ容量の点で
SWFのほうが有利

22. リクエスト数の違い
HTML5版 Flash版
HTML5のほうが多数のリクエストが発生するため、
この点でも読み込みに時間がかかる

23. Chapter. 4
HTML5のオーサリング

24. Adobe Edge Preview 6
• 直感的なインターフェース
• キーフレームを用いたアニメーション
• JavaScriptを使った拡張
• シンボル(ネスト可能)
• モバイル向け

25. まとめ
• 現時点で制作コスト/実現したい表現の
バランスをとって最適な技術を選択し、
品質の高いコンテンツをエンドユーザーに！

26. ご清聴ありがとうございました
Thank you for your attention
ClockMaker 池田泰延
Twitter ID : clockmaker
Blog : http://clockmaker.jp/blog/