• Like
インタラクティブコンテンツにおけるHTML5とFlash
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

  • 6,020 views
Published

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

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

Published in Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,020
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
43
Comments
0
Likes
16

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 制作事例から学ぶHTML58. まとめ
  • 5. Chapter. 1HTML5について
  • 6. HTML5の定義?
  • 7. 本日の講演の前提• HTML5 の利用用途 – セマンティックなマークアップ – スマートフォンでの実装 – リッチコンテンツ • ゲーム • インタラクティブサイト (プロモーションサイト) • RIA – アプリケーション – etc…• 今日はインタラクティブサイトと ゲームを対象とした話をします
  • 8. HTML5でのインタラクティブサイトモーグリのTweetキャッチ The Shodohttp://www.ff13-2-ie9.com http://www.theshodo.com
  • 9. Chapter. 2HTML5を取り巻くブラウザの現状
  • 10. ブラウザ別機能詳細 IE6/7/8 IE9 Chrome 18 Safari 5 Firefox 11Canvas × ○ ○ ○ ○WebGL × × ○ △ ○CSS3 × △ ○ (※) ○ (※) ○ (※)(グラデ・角丸etc)CSS3 3D × × ○ (※) ○ (※) ○ (※)CSS3 × × ○ (※) ○ (※) ○ (※)AnimationVideo/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. 3FLASHと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 Sprites60504030 AIR HTML52010 0 iPhone4S iPad2 XOOM http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air
  • 22. パフォーマンスの差• 描画APIの違い (Ex. Flashはスクリプト実行中に 描画をロックするような機構がある)• ActionScriptはコンパイル済み、 JavaScriptはインタプリタ• ブラウザ毎の開発の状況 ▶将来的にパフォーマンスが向上する可能性あり
  • 23. Chapter. 4FLASHと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. 5FLASHと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. 4HTML5と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 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. 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/