インタラクティブコンテンツにおけるHTML5とFlash

6,792 views
6,638 views

Published on

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

Published in: Business

インタラクティブコンテンツにおけるHTML5とFlash

  1. 1. インタラクティブコンテンツ におけるHTML5とFlash ClockMaker 池田泰延 2012/04/13 @ まにフェス
  2. 2. 自己紹介• 名前 : 池田泰延• 仕事 : インタラクティブデベロッパー• 書籍 : – 「Flash ではじめるAndroidアプリ開発入門」 – 「ActionScript Beatifl Code」等• Twitter ID : clockmaker• ブログ: ClockMaker Blog
  3. 3. HTML5での活動 - jsdo.it
  4. 4. アジェンダ1. HTML5について2. HTML5を取り巻くブラウザの現状3. FlashとHTML5の比較(パフォーマンス)4. FlashとHTML5の比較(容量)5. FlashとHTML5の比較(GPU)6. HTML5とFlashでの実装手順7. 制作事例から学ぶHTML58. まとめ
  5. 5. Chapter. 1HTML5について
  6. 6. HTML5の定義?
  7. 7. 本日の講演の前提• HTML5 の利用用途 – セマンティックなマークアップ – スマートフォンでの実装 – リッチコンテンツ • ゲーム • インタラクティブサイト (プロモーションサイト) • RIA – アプリケーション – etc…• 今日はインタラクティブサイトと ゲームを対象とした話をします
  8. 8. HTML5でのインタラクティブサイトモーグリのTweetキャッチ The Shodohttp://www.ff13-2-ie9.com http://www.theshodo.com
  9. 9. Chapter. 2HTML5を取り巻くブラウザの現状
  10. 10. ブラウザ別機能詳細 IE6/7/8 IE9 Chrome 18 Safari 5 Firefox 11Canvas × ○ ○ ○ ○WebGL × × ○ △ ○CSS3 × △ ○ (※) ○ (※) ○ (※)(グラデ・角丸etc)CSS3 3D × × ○ (※) ○ (※) ○ (※)CSS3 × × ○ (※) ○ (※) ○ (※)AnimationVideo/Audio × ○ ○ ○ ○SVG × ○ ○ ○ ○ ※ベンダープレフィックスが必要
  11. 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. 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. 13. ブラウザバージョン別 インターネット利用シェア推移(国内)この推移を見てるとIE8が5%以下になるまであと2年近くかかりそう(XPのサポート終了は 2014年4月8日) http://gs.statcounter.com/#browser_version-JP-monthly-200807-201204
  14. 14. HTML5でインタラクティブ コンテンツを作るには IE6も OK DOMエレメントで CSS2で制御 制御 CSS3で制御どうしよう? Canvasで制御 ※組み合わせも可
  15. 15. 設計方法 特長 フレームワークDOM • マウスイベントの管理が行い易い jQueryエレメント • CSS2系を使うのであれば古いブラウザでも 動作する(IE6でも) ▶シンプルなインタラクティブコンテンツ向きCanvas • パフォーマンスがいい CreateJS • ブラウザのデフォルトの挙動(選択など)を受けない Arctic.js • ローレベルのAPIなので、マウスの管理等を 自前でしなければならない ▶ゲームなど複雑なインタラクティブコンテンツ向き
  16. 16. HTML5とFlashのできることの違い ※HTML5は一部のブラウザ、バージョンに限られても、 Flash Playerではほぼ全ブラウザで機能が使える
  17. 17. Chapter. 3FLASHとHTML5の比較(パフォーマンス)
  18. 18. HTML5とFlashの描画パフォーマンス http://clockmaker.jp/blog/2012/02/html5-flash-draw_performance/
  19. 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. 20. Flashのデバイス上での安定したパフォーマンス http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air
  21. 21. Flashのデバイス上での安定したパフォーマンス FPS for 350 Sprites60504030 AIR HTML52010 0 iPhone4S iPad2 XOOM http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air
  22. 22. パフォーマンスの差• 描画APIの違い (Ex. Flashはスクリプト実行中に 描画をロックするような機構がある)• ActionScriptはコンパイル済み、 JavaScriptはインタプリタ• ブラウザ毎の開発の状況 ▶将来的にパフォーマンスが向上する可能性あり
  23. 23. Chapter. 4FLASHとHTML5の比較(容量)
  24. 24. Flash IDEから出力するHTML5• Flash Professionalで作成したコンテンツは、ツール やサービスを利用すればHTML5(一部のブラウザ対 象)に出力することが可能 – Google Swiffy – Adobe Wallaby – Adobe Toolkit for CreateJS (将来) – IMJ Multi Device Lab - SWF Animation Converter
  25. 25. 変換後の容量(KB) 350バナーレベルの簡易アニ 74 メーション 30 Wallaby変換 Swiffy変換 469 SWFオリジナルFlashLite1.1のキャラアニ 65 メーション 22 0 100 200 300 400 500
  26. 26. HTML5とFlashの容量比較• FlashLite1.1のキャラアニメーション – 元のswf:22KB – Swiffy変換:65KB(+90KBのランタイムjs) – Wallaby変換:469KB• バナーレベルの簡易アニメーション – 元のswf : 30KB – Swiffy変換 : 74KB (+90KBのランタイムjs) – Wallaby変換 : 350KB
  27. 27. なぜ容量が大きくなるのか SWF HTML5+CSS+JS透過画像 PNG→JPEGと透過チャンネ PNGを未圧縮のまま展開 ルに分離して展開ベクターデータ 圧縮 SVG等、未圧縮スクリプト コンパイル済みの そのままスクリプトで展開 データに変換 データ容量の点で SWFのほうが有利
  28. 28. リクエスト数の違いHTML5版 Flash版
  29. 29. Chapter. 5FLASHとHTML5の比較(GPU)
  30. 30. WebGLとFlash Stage3Dの作成 http://clockmaker.jp/labs/ http://clockmaker.jp/blog/2011/11/adc-meetup-round3/ http://workshop.chromeexperiments.com/globe-search
  31. 31. GPU比較• Flash - Stage3D – ブラウザ・OS問わず利用可能※ – ソフトウェアフォールバック付き• HTML - WebGL – 一部のブラウザで利用可能 (Chrome, Firefox, 設定をONにしたSafari) ※ – Chromeのみソフトウェアフォールバック付き• ※両者とも対応するグラフィックボード/ドライバがある場合のみ GPUによるハードウェアアクセラレーションが可能
  32. 32. GPU比較• パフォーマンスはそれほど大差はない• Stage3DだとIEでも閲覧できる (WebGLはIEで動作しない)• Stage3DはAIRアプリとしてiPhone/Androidでも 利用可。高パフォーマンスで動作する• Flash Player だと60fps制限、 WebGLだと無制限(?)
  33. 33. Flash Playerのプレミアム機能• 物理演算等やGPUを活用したグラフィックス描画な ど、ハイパフォーマンスな表現が可能になる• ただしプレミアム機能の対象になるので、有償利用 となる(予定)• Stage3Dとドメインメモリー(Alchemyを利用)を同 時に利用した場合のみ該当 ▶既存のコンテンツには全く影響しない
  34. 34. Unreal Engine 3 http://www.unrealengine.com/flash/ http://www.youtube.com/watch?v=UQiUP2Hd60Y
  35. 35. Chapter. 4HTML5とFLASHでの実装手順
  36. 36. Flashサイトの実装手順1. デザインデータを作成2. 技術検証3. デザインデータから素材を切り出してflaファイル に移行/PSDインポーターを使って自動的に移動4. アニメーションをつけたり、ActionScriptでシーン 制御やギミック、ローディングを作る5. 検証6. テストアップ
  37. 37. HTML5サイトの実装手順1. デザインデータを作成2. 技術検証3. デザインデータから素材を切り出して pngやjpg, gifに展開4. JavaScriptでシーン制御やギミックを作る5. 必要ならばフォールバック方法を作成 (ビデオプレイヤーのFlash/Silverlight版を作成)6. 検証(バリデートチェック、ブラウザ別の対応)7. テストアップ
  38. 38. HTML5とFlash、それぞれのメリット• HTML5 – やりたいことにマッチしたフレームワーク・ライブラリが数多く揃っ ている – CSS/DOM/JSを組み合わせれば、少ないコードで実装が可能 – 情報をマシンリーダブルに掲載できる▶SEOに有利• Flash – GUIのツールが充実している – 自由自在に作れる/オリジナルの表現が作りやすい – マスク表現/フィルタ効果やブレンドモードの種類が豊富 – 基本的にどのブラウザでも同じ挙動
  39. 39. HTML5とFlash、それぞれのデメリット• Flash – スマートフォン/タブレットは動作対象外 – ActionScript 3.0の難易度の高さ (ライトユーザー向きではない) – 画像の外部データの読み込み管理が煩雑 – フレームワークを使えばある程度できるものの、ゼロスクラッチすることが多い – SEOに不利• HTML5 – GUIのツールが十分でないので、スクリプト必須が場合が多い – ブラウザ毎に検証し、差異を調整 – 旧式ブラウザの考慮 – バリデートチェックでタグの整合性などの検証が必要▶HTML5では検証にかける時間がかさみがち
  40. 40. 現時点で開発ワークフローに使えるツール Flash HTML画像作成 Photoshop, Illustrator Photoshop, Illustrator画像最適化 Photoshop, Fireworks Photoshop, Fireworksアニメーション Flash Pro Adobe EdgeIDE Flash Pro, DreamWeaver Flash Builder, WebStorm, FlashDevelop Aptana, Adobe MuseUIコンポーネント Flex Components jQuery UIフレームワーク Flex, Progression jQuery, ExtJS, Dojo動作テスト Flash Builder Adobe Shadow, Chrome Dev Tools, Firebug 将来的にツールも揃ってくるはず…
  41. 41. Chapter. 7制作事例から学ぶHTML5
  42. 42. 制作事例1:スペシャルサイト• クライアント「HTML5でやりたい」• IE6も対応して欲しい (クライアントがIE6なので…)• 3D表現の実装• WebGLは普及率やブラウザ互換の点で非採用• Canvasタグで制作することに• Polyfill用にFlash版も用意
  43. 43. 制作のフロー• 制作手法を熟知しているFlashでプロトタイプを 制作し、HTML5+JS(three.js)に移植• 2日間でFlash版プロトタイプを制作し、 その後4日間でCanvas版に移植。• 学習コストもあったが、ASとJS、フレームワー クが似ていたので、同じ設計方法で実装が可能
  44. 44. polyfill• PC版ではFlashとCanvasのどちらかで再生 – 実際はFlash版のほうが演出上細かい表現があった。 一部表現できていない演出もあったが、Safariや Firefox, Chromeでは優先してCanvas版を再生。• タッチデバイスでのパフォーマンス(Canvas版) – PCとのパフォーマンスの違いが大きかった – iPadとiPhoneではフレームレートは5~10fps程度 – iPhoneでは、静止画に変更して欲しいというオー ダーが…
  45. 45. 当時のパフォーマンス比較結果 http://clockmaker.jp/blog/2010/10/canvas_js_demo/
  46. 46. 制作事例2: 製品サイト• 代理店「最新のテクノロジーとして HTML5でやりたい」• 静的サイト• インタラクションやアニメーションを 組み込みたい
  47. 47. 対象ブラウザの選定• IE7/8/9• Chrome 最新版• Firefox 最新版• Safari 5• iPad (iOS 4/5)• iPhone (iOS 4/5)• Android 2.3 (Galaxy S/Xperia Acro)• ※新しいブラウザやバージョンが出てきた場合は別途料金
  48. 48. ブラウザ表現の整理ブラウザ 表示IE7/8 一部、ダウングレードした見え方モダンブラウザ フルで機能iPad モダンブラウザとほぼ同等の見え方 +タッチ対応iPhone/Android スマフォ用の見え方 +タッチ対応
  49. 49. 実装時の留意点ブラウザの種類 現実 対策IE7/8 透過画像のアニメーショ 透過画像のものはアニ ンに不具合が発生 メーションさせないモダンブラウザ 基本的に問題なし -iPad ・CSS2の書き換えによ ・translate3dやtransition るアニメーションが遅い を使って、描画 ・iframeの挙動が怪しい ・iframeを使わず画像を 表示iPhone/Android ・ズームしないと字が小 ・ズームのためにiScroll さくて見えない を撤廃 ・iframeの挙動が怪しい ・iframeの代替表示
  50. 50. JavaScriptの分岐例
  51. 51. JavaScriptの分岐例 本当に必要なのはこの部分だけ
  52. 52. 実装時に注意した点• 旧式ブラウザ、モダンブラウザ、タッチデバイ スでそれぞれのモーション制御の分岐• PCとタッチデバイスで、マウスとタッチの2通 りの実装が必要• ビデオプレイヤーなど、HTML5対応状況に合わ せてpolyfill用のモジュールを実装
  53. 53. Chapter. 8まとめ
  54. 54. まとめ• 厳然と存在するブラウザ実装の差異には、 個人の「職人技」で対応する部分が現時点では大きい• 時間経過で解決するだろうHTML5の課題 – 旧式ブラウザ(IE 6/7/8)のシェアの低下 – フレームワーク/GUIツールの充実 – 各機能の標準化 – ビデオコーデック問題の解決• 制作する前の要件定義は細かく整理し、 クライアントと十分にシェアする
  55. 55. まとめ• 現時点で制作コスト/実現したい表現の バランスをとって最適な技術を選択し、 品質の高いコンテンツをエンドユーザーに!
  56. 56. ご清聴ありがとうございました Thank you for your attention ClockMaker 池田泰延 Twitter ID : clockmaker Blog : http://clockmaker.jp/blog/

×