Downloaded 17 times
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
- 1. Flashユーザーが 今覚えておきたいHTML5 ClockMaker池田泰延 2012/05/19 @ F-site
- 2. 自己紹介 • 名前 :池田泰延 • 所属 : ICS • 仕事 : インタラクティブデベロッパー • 書籍 : – 「Stage3D プログラミング」 – 「ActionScript Beatifl Code」等 • Twitter ID : clockmaker • ブログ: ClockMaker Blog
- 3.
- 4.
- 5. 本日の講演の前提 • HTML5 の利用用途 – セマンティックなマークアップ – スマートフォンでの実装 – リッチコンテンツ • ゲーム • インタラクティブサイト • RIA – アプリケーション – etc… • 今日はインタラクティブサイトとゲームを対象とした話をします
- 6.
- 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は一部のブラウザ、バージョンに限られても、 FlashPlayerではほぼ全ブラウザで機能が使える
- 14.
- 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.
- 19. Flash Proから出力するHTML5 • FlashProfessionalで作成したコンテンツは、 ツールやサービスを利用すれば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.
- 24. Adobe Edge Preview6 • 直感的なインターフェース • キーフレームを用いたアニメーション • JavaScriptを使った拡張 • シンボル(ネスト可能) • モバイル向け
- 25. まとめ • 現時点で制作コスト/実現したい表現の バランスをとって最適な技術を選択し、 品質の高いコンテンツをエンドユーザーに！
- 26. ご清聴ありがとうございました Thank youfor your attention ClockMaker 池田泰延 Twitter ID : clockmaker Blog : http://clockmaker.jp/blog/