Flashユーザーが今覚えておきたいHTML5  ClockMaker 池田泰延   2012/05/19 @ F-site
自己紹介• 名前 : 池田泰延• 所属 : ICS• 仕事 : インタラクティブデベロッパー• 書籍 :   – 「Stage3D プログラミング」   – 「ActionScript Beatifl Code」等• Twitter ID : ...
Chapter. 1HTML5について
HTML5の定義?
本日の講演の前提•   HTML5 の利用用途    – セマンティックなマークアップ    – スマートフォンでの実装    – リッチコンテンツ       • ゲーム       • インタラクティブサイト       • RIA    ...
Chapter. 2HTML5を取り巻くブラウザの現状
ブラウザ別機能詳細              IE6/7/8   IE9   Chrome 18   Safari 5   Firefox 11Canvas          ×       ○        ○           ○    ...
HTML5の現状と将来                             全てのブラウザ                 CSS3 Animation                                 CSS3     CS...
直近のブラウザバージョン別              インターネット利用シェア(国内)                                                                 26%           ...
ブラウザバージョン別        インターネット利用シェア推移(国内)この推移を見てるとIE8が5%以下になるまであと2年近くかかりそう(XPのサポート終了は   2014年4月8日)     http://gs.statcounter.co...
HTML5でインタラクティブ       コンテンツを作るには                IE6も                                  OK                      CSS2で制御      ...
設計方法     特長                             フレームワークDOM      •   マウスイベントの管理が行い易い            jQueryエレメント    •   CSS2系を使うのであれば古いブ...
HTML5とFlashのできることの違い ※HTML5は一部のブラウザ、バージョンに限られても、 Flash Playerではほぼ全ブラウザで機能が使える
Chapter. 3FLASHとHTML5の比較(パフォーマンス)
HTML5とFlashの描画パフォーマンス    http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/
HTML5とFlashの描画パフォーマンス                    Max Objects with keeping 60fps               Flash           (BitmapData)        ...
パフォーマンスの差• 描画APIの違い (Ex. Flashはスクリプト実行中に 描画をロックするような機構がある)• ActionScriptはコンパイル済み、 JavaScriptはインタプリタ• ブラウザ毎の開発の状況 ▶将来的にパフォー...
Chapter. 4FLASHからHTML5への書き出し
Flash Proから出力するHTML5• Flash Professionalで作成したコンテンツは、 ツールやサービスを利用すればHTML5(一部のブ ラウザ対象)に出力することが可能 – Google Swiffy – Adobe Too...
変換後の容量(KB)                                           205ビットマップを用いたアニ                                         180    メーション ...
なぜ容量が大きくなるのか          SWF               HTML5+CSS+JS透過画像      PNG→JPEGと透過チャンネ   PNGを未圧縮のまま展開          ルに分離して展開ベクターデータ   圧縮...
リクエスト数の違いHTML5版             Flash版  HTML5のほうが多数のリクエストが発生するため、  この点でも読み込みに時間がかかる
Chapter. 4HTML5のオーサリング
Adobe Edge Preview 6• 直感的なインターフェース• キーフレームを用いたアニメーション• JavaScriptを使った拡張• シンボル(ネスト可能)• モバイル向け
まとめ• 現時点で制作コスト/実現したい表現の バランスをとって最適な技術を選択し、 品質の高いコンテンツをエンドユーザーに!
ご清聴ありがとうございました Thank you for your attention     ClockMaker 池田泰延         Twitter ID : clockmaker     Blog : http://clockmak...
Upcoming SlideShare
Loading in …5
×

F-site発表資料「Flashユーザーが今覚えておきたいHTML5」

3,836 views
3,764 views

Published on

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,836
On SlideShare
0
From Embeds
0
Number of Embeds
1,410
Actions
Shares
0
Downloads
17
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

F-site発表資料「Flashユーザーが今覚えておきたいHTML5」

  1. 1. Flashユーザーが今覚えておきたいHTML5 ClockMaker 池田泰延 2012/05/19 @ F-site
  2. 2. 自己紹介• 名前 : 池田泰延• 所属 : ICS• 仕事 : インタラクティブデベロッパー• 書籍 : – 「Stage3D プログラミング」 – 「ActionScript Beatifl Code」等• Twitter ID : clockmaker• ブログ: ClockMaker Blog
  3. 3. Chapter. 1HTML5について
  4. 4. HTML5の定義?
  5. 5. 本日の講演の前提• HTML5 の利用用途 – セマンティックなマークアップ – スマートフォンでの実装 – リッチコンテンツ • ゲーム • インタラクティブサイト • RIA – アプリケーション – etc…• 今日はインタラクティブサイトとゲームを対象とした話をします
  6. 6. Chapter. 2HTML5を取り巻くブラウザの現状
  7. 7. ブラウザ別機能詳細 IE6/7/8 IE9 Chrome 18 Safari 5 Firefox 11Canvas × ○ ○ ○ ○WebGL × × ○ △ ○CSS3 × △ ○ (※) ○ (※) ○ (※)(グラデ・角丸etc)CSS3 3D × × ○ (※) ○ (※) ○ (※)CSS3 × × ○ (※) ○ (※) ○ (※)AnimationVideo/Audio × ○ ○ ○ ○SVG × ○ ○ ○ ○ ※ベンダープレフィックスが必要
  8. 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. 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. 10. ブラウザバージョン別 インターネット利用シェア推移(国内)この推移を見てるとIE8が5%以下になるまであと2年近くかかりそう(XPのサポート終了は 2014年4月8日) http://gs.statcounter.com/#browser_version-JP-monthly-200807-201204
  11. 11. HTML5でインタラクティブ コンテンツを作るには IE6も OK CSS2で制御 DOMエレメントで 制御 CSS3で制御 Canvasで制御どうしよう? SVGで制御 ※組み合わせも可
  12. 12. 設計方法 特長 フレームワークDOM • マウスイベントの管理が行い易い jQueryエレメント • CSS2系を使うのであれば古いブラウザでも 動作する(IE6でも) ▶シンプルなインタラクティブコンテンツ向きCanvas • パフォーマンスがいい CreateJS • ブラウザのデフォルトの挙動(選択など)を受けない Arctic.js • ローレベルのAPIなので、マウスの管理等を Three.js 自前でしなければならない ▶ゲームなど複雑なインタラクティブコンテンツ向きSVG • ベクターデータを扱える Swiffy • 拡大縮小に強い • 自前でグラフィックスを作成するのは難しい
  13. 13. HTML5とFlashのできることの違い ※HTML5は一部のブラウザ、バージョンに限られても、 Flash Playerではほぼ全ブラウザで機能が使える
  14. 14. Chapter. 3FLASHとHTML5の比較(パフォーマンス)
  15. 15. HTML5とFlashの描画パフォーマンス http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/
  16. 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. 17. パフォーマンスの差• 描画APIの違い (Ex. Flashはスクリプト実行中に 描画をロックするような機構がある)• ActionScriptはコンパイル済み、 JavaScriptはインタプリタ• ブラウザ毎の開発の状況 ▶将来的にパフォーマンスが向上する可能性あり
  18. 18. Chapter. 4FLASHからHTML5への書き出し
  19. 19. Flash Proから出力するHTML5• Flash Professionalで作成したコンテンツは、 ツールやサービスを利用すればHTML5(一部のブ ラウザ対象)に出力することが可能 – Google Swiffy – Adobe Toolkit for CreateJS
  20. 20. 変換後の容量(KB) 205ビットマップを用いたアニ 180 メーション 30 CreateJS変換 Swiffy変換 78 SWFオリジナルシンプルなアニメーション 110 3 0 50 100 150 200 250 ※ランタイムJSを含む
  21. 21. なぜ容量が大きくなるのか SWF HTML5+CSS+JS透過画像 PNG→JPEGと透過チャンネ PNGを未圧縮のまま展開 ルに分離して展開ベクターデータ 圧縮 SVG等、未圧縮スクリプト コンパイル済みの そのままスクリプトで展開 データに変換 データ容量の点で SWFのほうが有利
  22. 22. リクエスト数の違いHTML5版 Flash版 HTML5のほうが多数のリクエストが発生するため、 この点でも読み込みに時間がかかる
  23. 23. Chapter. 4HTML5のオーサリング
  24. 24. Adobe Edge Preview 6• 直感的なインターフェース• キーフレームを用いたアニメーション• JavaScriptを使った拡張• シンボル(ネスト可能)• モバイル向け
  25. 25. まとめ• 現時点で制作コスト/実現したい表現の バランスをとって最適な技術を選択し、 品質の高いコンテンツをエンドユーザーに!
  26. 26. ご清聴ありがとうございました Thank you for your attention ClockMaker 池田泰延 Twitter ID : clockmaker Blog : http://clockmaker.jp/blog/

×