More Related Content Similar to F-site発表資料「Flashユーザーが今覚えておきたいHTML5」 Similar to F-site発表資料「Flashユーザーが今覚えておきたいHTML5」 (20) More from Yasunobu Ikeda (11) F-site発表資料「Flashユーザーが今覚えておきたいHTML5」2. 自己紹介
• 名前 : 池田泰延
• 所属 : ICS
• 仕事 : インタラクティブデベロッパー
• 書籍 :
– 「Stage3D プログラミング」
– 「ActionScript Beatifl Code」等
• Twitter ID : clockmaker
• ブログ: ClockMaker Blog
5. 本日の講演の前提
• HTML5 の利用用途
– セマンティックなマークアップ
– スマートフォンでの実装
– リッチコンテンツ
• ゲーム
• インタラクティブサイト
• RIA
– アプリケーション
– etc…
• 今日はインタラクティブサイトとゲームを対象とした話をします
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
• 拡大縮小に強い
• 自前でグラフィックスを作成するのは難しい
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はインタプリタ
• ブラウザ毎の開発の状況
▶将来的にパフォーマンスが向上する可能性あり
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のほうが有利
24. Adobe Edge Preview 6
• 直感的なインターフェース
• キーフレームを用いたアニメーション
• JavaScriptを使った拡張
• シンボル(ネスト可能)
• モバイル向け
26. ご清聴ありがとうございました
Thank you for your attention
ClockMaker 池田泰延
Twitter ID : clockmaker
Blog : http://clockmaker.jp/blog/