※一部、ネット掲載のためテキスト・ページを省略していますのでご了承ください。

1. インタラクティブコンテンツ
におけるHTML5とFlash
ClockMaker 池田泰延
2012/04/13 @ まにフェス

2. 自己紹介
• 名前 : 池田泰延
• 仕事 : インタラクティブデベロッパー
• 書籍 :
– 「Flash ではじめるAndroidアプリ開発入門」
– 「ActionScript Beatifl Code」等
• Twitter ID : clockmaker
• ブログ: ClockMaker Blog

3. HTML5での活動 - jsdo.it

4. アジェンダ
1. HTML5について
2. HTML5を取り巻くブラウザの現状
3. FlashとHTML5の比較(パフォーマンス)
4. FlashとHTML5の比較(容量)
5. FlashとHTML5の比較(GPU)
6. HTML5とFlashでの実装手順
7. 制作事例から学ぶHTML5
8. まとめ

5. Chapter. 1
HTML5について

6. HTML5の定義?

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

8. HTML5でのインタラクティブサイト
モーグリのTweetキャッチ The Shodo
http://www.ff13-2-ie9.com http://www.theshodo.com

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

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

11. 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 一部のブラウザ

12. 直近のブラウザバージョン別
インターネット利用シェア(国内)
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

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

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

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

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

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

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

19. 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/

20. Flashのデバイス上での安定したパフォーマンス
http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air

21. Flashのデバイス上での安定したパフォーマンス
FPS for 350 Sprites
60
50
40
30 AIR
HTML5
20
10
0
iPhone4S iPad2 XOOM
http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air

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

23. Chapter. 4
FLASHとHTML5の比較
(容量)

24. Flash IDEから出力するHTML5
• Flash Professionalで作成したコンテンツは、ツール
やサービスを利用すればHTML5(一部のブラウザ対
象)に出力することが可能
– Google Swiffy
– Adobe Wallaby
– Adobe Toolkit for CreateJS (将来)
– IMJ Multi Device Lab - SWF Animation
Converter

25. 変換後の容量(KB)
350
バナーレベルの簡易アニ
74
メーション
30
Wallaby変換
Swiffy変換
469 SWFオリジナル
FlashLite1.1のキャラアニ
65
メーション
22
0 100 200 300 400 500

26. HTML5とFlashの容量比較
• FlashLite1.1のキャラアニメーション
– 元のswf：22KB
– Swiffy変換：65KB（+90KBのランタイムjs）
– Wallaby変換：469KB
• バナーレベルの簡易アニメーション
– 元のswf : 30KB
– Swiffy変換 : 74KB （+90KBのランタイムjs）
– Wallaby変換 : 350KB

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

28. リクエスト数の違い
HTML5版 Flash版

29. Chapter. 5
FLASHとHTML5の比較
(GPU)

30. WebGLとFlash Stage3Dの作成
http://clockmaker.jp/labs/
http://clockmaker.jp/blog/2011/11/adc-meetup-round3/
http://workshop.chromeexperiments.com/globe-search

31. GPU比較
• Flash - Stage3D
– ブラウザ・OS問わず利用可能※
– ソフトウェアフォールバック付き
• HTML - WebGL
– 一部のブラウザで利用可能
(Chrome, Firefox, 設定をONにしたSafari) ※
– Chromeのみソフトウェアフォールバック付き
• ※両者とも対応するグラフィックボード/ドライバがある場合のみ
GPUによるハードウェアアクセラレーションが可能

32. GPU比較
• パフォーマンスはそれほど大差はない
• Stage3DだとIEでも閲覧できる
(WebGLはIEで動作しない)
• Stage3DはAIRアプリとしてiPhone/Androidでも
利用可。高パフォーマンスで動作する
• Flash Player だと60fps制限、
WebGLだと無制限(?)

33. Flash Playerのプレミアム機能
• 物理演算等やGPUを活用したグラフィックス描画な
ど、ハイパフォーマンスな表現が可能になる
• ただしプレミアム機能の対象になるので、有償利用
となる(予定)
• Stage3Dとドメインメモリー(Alchemyを利用)を同
時に利用した場合のみ該当
▶既存のコンテンツには全く影響しない

34. Unreal Engine 3
http://www.unrealengine.com/flash/
http://www.youtube.com/watch?v=UQiUP2Hd60Y

35. Chapter. 4
HTML5とFLASHでの実装手順

36. Flashサイトの実装手順
1. デザインデータを作成
2. 技術検証
3. デザインデータから素材を切り出してflaファイル
に移行/PSDインポーターを使って自動的に移動
4. アニメーションをつけたり、ActionScriptでシーン
制御やギミック、ローディングを作る
5. 検証
6. テストアップ

37. HTML5サイトの実装手順
1. デザインデータを作成
2. 技術検証
3. デザインデータから素材を切り出して
pngやjpg, gifに展開
4. JavaScriptでシーン制御やギミックを作る
5. 必要ならばフォールバック方法を作成
(ビデオプレイヤーのFlash/Silverlight版を作成)
6. 検証(バリデートチェック、ブラウザ別の対応)
7. テストアップ

38. HTML5とFlash、それぞれのメリット
• HTML5
– やりたいことにマッチしたフレームワーク・ライブラリが数多く揃っ
ている
– CSS/DOM/JSを組み合わせれば、少ないコードで実装が可能
– 情報をマシンリーダブルに掲載できる▶SEOに有利
• Flash
– GUIのツールが充実している
– 自由自在に作れる/オリジナルの表現が作りやすい
– マスク表現/フィルタ効果やブレンドモードの種類が豊富
– 基本的にどのブラウザでも同じ挙動

39. HTML5とFlash、それぞれのデメリット
• Flash
– スマートフォン/タブレットは動作対象外
– ActionScript 3.0の難易度の高さ (ライトユーザー向きではない)
– 画像の外部データの読み込み管理が煩雑
– フレームワークを使えばある程度できるものの、ゼロスクラッチすることが多い
– SEOに不利
• HTML5
– GUIのツールが十分でないので、スクリプト必須が場合が多い
– ブラウザ毎に検証し、差異を調整
– 旧式ブラウザの考慮
– バリデートチェックでタグの整合性などの検証が必要
▶HTML5では検証にかける時間がかさみがち

40. 現時点で開発ワークフローに使えるツール
Flash HTML
画像作成 Photoshop, Illustrator Photoshop, Illustrator
画像最適化 Photoshop, Fireworks Photoshop, Fireworks
アニメーション Flash Pro Adobe Edge
IDE Flash Pro, DreamWeaver
Flash Builder, WebStorm,
FlashDevelop Aptana, Adobe Muse
UIコンポーネント Flex Components jQuery UI
フレームワーク Flex, Progression jQuery, ExtJS, Dojo
動作テスト Flash Builder Adobe Shadow, Chrome
Dev Tools, Firebug
将来的にツールも揃ってくるはず…

41. Chapter. 7
制作事例から学ぶHTML5

42. 制作事例1:スペシャルサイト
• クライアント「HTML5でやりたい」
• IE6も対応して欲しい (クライアントがIE6なので…)
• 3D表現の実装
• WebGLは普及率やブラウザ互換の点で非採用
• Canvasタグで制作することに
• Polyfill用にFlash版も用意

43. 制作のフロー
• 制作手法を熟知しているFlashでプロトタイプを
制作し、HTML5+JS(three.js)に移植
• 2日間でFlash版プロトタイプを制作し、
その後4日間でCanvas版に移植。
• 学習コストもあったが、ASとJS、フレームワー
クが似ていたので、同じ設計方法で実装が可能

44. polyfill
• PC版ではFlashとCanvasのどちらかで再生
– 実際はFlash版のほうが演出上細かい表現があった。
一部表現できていない演出もあったが、Safariや
Firefox, Chromeでは優先してCanvas版を再生。
• タッチデバイスでのパフォーマンス(Canvas版)
– PCとのパフォーマンスの違いが大きかった
– iPadとiPhoneではフレームレートは5～10fps程度
– iPhoneでは、静止画に変更して欲しいというオー
ダーが…

45. 当時のパフォーマンス比較結果
http://clockmaker.jp/blog/2010/10/canvas_js_demo/

46. 制作事例2: 製品サイト
• 代理店「最新のテクノロジーとして
HTML5でやりたい」
• 静的サイト
• インタラクションやアニメーションを
組み込みたい

47. 対象ブラウザの選定
• IE7/8/9
• Chrome 最新版
• Firefox 最新版
• Safari 5
• iPad (iOS 4/5)
• iPhone (iOS 4/5)
• Android 2.3 (Galaxy S/Xperia Acro)
• ※新しいブラウザやバージョンが出てきた場合は別途料金

48. ブラウザ表現の整理
ブラウザ 表示
IE7/8 一部、ダウングレードした見え方
モダンブラウザ フルで機能
iPad モダンブラウザとほぼ同等の見え方
+タッチ対応
iPhone/Android スマフォ用の見え方
+タッチ対応

49. 実装時の留意点
ブラウザの種類 現実 対策
IE7/8 透過画像のアニメーショ 透過画像のものはアニ
ンに不具合が発生 メーションさせない
モダンブラウザ 基本的に問題なし -
iPad ・CSS2の書き換えによ ・translate3dやtransition
るアニメーションが遅い を使って、描画
・iframeの挙動が怪しい ・iframeを使わず画像を
表示
iPhone/Android ・ズームしないと字が小 ・ズームのためにiScroll
さくて見えない を撤廃
・iframeの挙動が怪しい ・iframeの代替表示

50. JavaScriptの分岐例

51. JavaScriptの分岐例
本当に必要なのはこの部分だけ

52. 実装時に注意した点
• 旧式ブラウザ、モダンブラウザ、タッチデバイ
スでそれぞれのモーション制御の分岐
• PCとタッチデバイスで、マウスとタッチの2通
りの実装が必要
• ビデオプレイヤーなど、HTML5対応状況に合わ
せてpolyfill用のモジュールを実装

53. Chapter. 8
まとめ

54. まとめ
• 厳然と存在するブラウザ実装の差異には、
個人の「職人技」で対応する部分が現時点では大きい
• 時間経過で解決するだろうHTML5の課題
– 旧式ブラウザ(IE 6/7/8)のシェアの低下
– フレームワーク/GUIツールの充実
– 各機能の標準化
– ビデオコーデック問題の解決
• 制作する前の要件定義は細かく整理し、
クライアントと十分にシェアする

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

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