More Related Content
Similar to 「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。 (20)
More from Teiichi Ota (15)
「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。
- 1. Eビジネス推進連合会 HTML5ワーキンググループ (第3回) | 2012.03.19
「職人技」では未来が見えない!みんなが使えるAdobeの
HTML5関連ツールとソリューション。
太田禎一 | アドビ システムズ 株式会社 テクニカルエバンジェリスト
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 2. マルチデバイス対応のWebサイトやアプリの実装技術としてHTML5とそ
の関連技術は欠かせないものとなっていますが、厳然と存在するブラウ
ザ実装の差異や開発ツールの不在といった理由により、往々にしてデキ
る個人の「職人技」に頼る場合が多いようです。そんななかいくつか登
場しはじめた、HTML5開発技術を「民主化」するツールやソリューショ
ンをご紹介します。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
- 3. おまえダレ?
テクニカルエバンジェリストです。正式な肩書きなのですごめんなさい
放送・出版・デジタルメディアを中心に、いろいろなお客様に最新
Adobeテクノロジーや、そのよさをお伝えする仕事
直接お伺いしたり、イベント・カンファレンスでお話したり
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
- 4. DIGITAL MARKETING
DIGITAL MEDIA
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 5. HTML5 & Flashでデジタルメディアをトータルにカバー
HTML ブラン インタラク デジタル カジュアル プレミアム ハイエンド
デザイン ディング ティブコン 書籍 ゲーム ビデオ 3Dゲーム
&エフェクト &リッチ広告 テンツ
現在 HTML Flash/Adobe AIR
数年後 HTML Flash/Adobe AIR
サーバー
& サービス
ツール
フレーム
ワーク
映像配信 Web JavaScript モバイル
フォント ライブラリ アプリ
HTML5 Flash Playerプラグイン
(Web標準&ブラウザ) &AIRアプリ
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
- 6. 直近のブラウザバージョン別インターネット利用シェア (国内)
26%
22.7%
11.97%
11.27%
4.66%
4.16%
IE6/7/8
3.88% 32.28%
2.58%
2.12%
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 6
Source: http://gs.statcounter.com/#browser_version-JP-monthly-201202-201203-bar
- 7. ブラウザバージョン別インターネット利用シェア推移 (国内)
この推移を見てると
IE8が5%以下に
なるのにあと2年近く
かかりそう
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7
Source: http://gs.statcounter.com/#browser_version-JP-daily-20080701-20120319
- 8. PCでのHTML5は
注意が必要(Polyfillsとかね)。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
- 9. html5please.us
要素・
プロパティごとに
オススメのPolyfillsも
教えてくれます
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Link: http://html5please.us/
- 10. ただし、モバイルを考えれば
HTML5にはいますぐとりかかるべし!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
- 11. caniuse.com
http://caniuse.com/#agents=desktop
http://caniuse.com/#agents=mobile
モバイルだけだと
HTML5/CSS3
実装が進んでるのが
確認できる
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11
Link: http://caniuse.com/#agents=mobile
- 12. とはいえ…市場の成長とともにさらに深刻化する分断化問題
OS
画面サイズ
CPU
アプリストア
マウス/タッチ ブラウザ
画面解像度
ブラウザ
バージョン
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
- 13. で…「HTML5」って
どーやってつくるの?
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
- 14. 「HTML5」時代のコンテンツ開発
ブラウザ内蔵の機能
のみですべてを実現
Audio/Video グラフィック
HTML5 Video SVG
HTML5 Audio HTML5 Canvas
H.264 WebGL
アプリケーション
WebM Web Fonts
Theora
Web Storage
Web Sockets
File API
アニメーション Offline Web Apps UI
DOM+JavaScript HTML5 Forms
DOM+CSS3 Transforms Drag and Drop
HTML5 Canvas Touch Events
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 14
- 15. 「HTML5」時代のコンテンツ開発
ブラウザ内蔵の機能
のみですべてを実現
Audio/Video グラフィック
HTML5だけじゃなくて
HTML5 Video いろんな技術の SVG
HTML5 Audio HTML5 Canvas
組み合わせ♡
H.264 WebGL
アプリケーション
WebM Web Fonts
Theora
Web Storage
Web Sockets
File API
アニメーション Offline Web Apps UI
DOM+JavaScript HTML5 Forms
DOM+CSS3 Transforms Drag and Drop
HTML5 Canvas Touch Events
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 15
- 16. 現時点でHTML+CSS+JavaScript開発ワークフローに使える
“HTML5”ツールたち
Flash (by Adobe) HTML5 (by Adobe) HTML5 (by 3rd Party)
画像作成 Photoshop, Illustrator Photoshop, Illustrator Any tools
画像最適化 Photoshop, Fireworks Photoshop, Fireworks Any tools
アニメーション Flash Pro Adobe Edge Tumult Hype/Sencha
Animator/jQuery/Eas
el.js/etc.,
IDE Flash Pro/Flash Builder Dreamweaver WebStorm/TextMate/
Aptana/etc.,
UIコンポーネント Flex Components None jQuery UI/etc.,
アプリケーション Flex None jQuery/Dojo, Ext JS,
フレームワーク SproutCore,
Backbone.js/etc.,
動作テスト Flash Builder Adobe Shadow Chrome Dev Tools,
Firebug, Weinre
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 16
- 17. 技術が混在している
だけでなく、ツールも
未成熟?だと!?
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
- 18. だからこそツールの選択には
将来の開発体制も含めた
総合力が重要。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
- 19. Adobeがきっちりカバーして
いままでと同様
「職人技」を「民主化」いたします。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
- 21. DOUBLE DOWN
HTML5に賭け金 倍額!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21
Photo: O Palsson http://www.flickr.com/people/opalsson/
- 22. Adobeの総合力
HTML ブラン インタラク デジタル カジュアル プレミアム ハイエンド
デザイン ディング ティブコン 書籍 ゲーム ビデオ 3Dゲーム
&エフェクト &リッチ広告 テンツ
HTML 今後続々ツール・
ソリューションを
サーバー 出していきます。
& サービス これが総合力!
ツール
フレーム
ワーク
映像配信 Web JavaScript モバイル
フォント ライブラリ アプリ
HTML5
(Web標準&ブラウザ)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
- 24. typekit
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
Link: https://typekit.com/
- 25. typekit利用例:The New Yorker
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25
Link: http://www.newyorker.com/
- 26. typekitの代替ソリューション
CSS3 @font-face こっち側は
日本語フォント対応
(自分でがんばる方式) (Typekitは現在未対応)
http://www.w3.org/TR/css3-webfonts/ デコもじ (有償)
http://decomoji.jp/
Google Web Fonts (無償)
http://www.google.com/webfonts/ フォントプラス (有償)
http://webfont.fontplus.jp/
Fonts.com (有償)
http://webfonts.fonts.com/ タイプスクウェア (有償)
http://typesquare.com/
FontDeck (有償) アマナイメージズWEBフォント (有償)
http://fontdeck.com/ http://amanaimages.com/font/web/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 26
- 27. typekit民主化ポイント
きちんと権利クリアされた高品質な
フォントを安心して使える。
使い方はコードをコピペして埋め込むだけ。
フォント形式 (EOTとか) を意識せず
旧いブラウザ (IE) にも対応できる
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
- 29. PhoneGap
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29
Link: http://phonegap.com/
- 30. PhoneGapによるアプリのクロスプラットフォーム対応
HTML (& Dreamweaver) & PhoneGap ソリューション
Web技術 (HTML/CSS/JavaScript) だけでクロスプ
ラットフォームアプリケーションを開発
アドレス帳やカメラ等のネイティブ機能への直接
コールも可能
クラウド側でマルチプラットフォーム対応コンパ
イルが可能な”PhoneGap Build”も
ファイル形式
対応プラットフォーム
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30
Link: http://www.phonegap.com/
- 31. PhoneGap
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31
Link: http://www.youtube.com/watch?v=E0UV5i5jY50
- 33. PhoneGap Build
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
Link: http://build.phonegap.com/
- 34. iOS/AndroidにおけるPhoneGap&Adobe AIRアプリの構造比較
■ Obj-C/Native
■ Web標準
■ Flash/Flex
■ Middleware
Native Wrapper (PhoneGap) Adobe AIR Runtime
compiled as native code
iOS built-in (Captive Runtime)
WebKit
Native API ActionScript 3 (Optional)
JavaScript HTML/CSS Access from (Flex Framework) Native
interpreted
JavaScript compiled down Extension
by WebKit
to native code written in
JavaScript (not interpreted) C++/Obj-C
Native API
Access via
Native
Extension
iOS/Android iOS/Android
iPhone/iPad/Android Hardware iPhone/iPad/Android Hardware
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 34
- 35. PhoneGapの代替ソリューション
AppCloud (Brightcove) Sencha Touch 2
http://www.brightcove.com/ja/%E3%82% http://www.sencha.com/products/touch/
B3%E3%83%B3%E3%83%86%E3%83%B
3%E3%83%84%E3%82%A2%E3%83%97
%E3%83%AA%E3%83%97%E3%83%A9
%E3%83%83%E3%83%88%E3%83%95%
E3%82%A9%E3%83%BC%E3%83%A0
Appspresso Rhodes
http://appspresso.com/ http://www.rhomobile.com/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
- 36. PhoneGap民主化ポイント
HTML/CSS/JSだけでアプリ開発、
つまり膨大なJSライブラリがそのまま使える。
さらにPhoneGap BuildならマルチPF対応が容易。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
- 38. ツール:Adobe Dreamweaver CS5.5
デザイナー向けWebサイト・アプリ開発ツール
jQuery等のコードヒント
作業環境内で動作確認 (ライブビュー=WebKit)
内蔵してます!
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
- 39. Dreamweaverの代替ツール
Aptana TextMate
http://aptana.com/ http://macromates.com/
WebStorm Visual Studio
http://www.jetbrains.com/webstorm/ http://www.microsoft.com/japan/m
sdn/vstudio/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
- 40. Dreamweaver民主化ポイント
つねに結果 (ライブビュー) を確認
しながら作業でき、HTML/CSS/jQuery
うろ覚えでもコードを補完してくれる。
マルチスクリーンWebサイトも
モバイルWebアプリも
ハイブリッドアプリも
このツールひとつで完結。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
- 41. Adobe Muse解説
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41
- 42. Adobe Muse
HTML5ページ作成ツール
DTPデザインのメタファー
コーディング不要 (Dreamweaverでさえも苦手な人向け)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42
Link: http://muse.adobe.com/
- 43. Muse民主化ポイント
HTML/CSSの知識がゼロでも
DTPツールのノリでWebページ制作。
スライドショーもドラッグ&ドロップ
だけで追加できちゃう。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
- 44. Adobe Edge解説
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
- 45. Adobe Edge
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45
- 46. モバイルアプリへのEdgeアニメーション組み込み例
Edgeなら位置・
サイズ・色・形状のアニ
メーションをコードを書かずに
簡単に実現できます。
タイミングの微調整をし、Web
やアプリとして複数プラット
フォームに配布するのも、他の
ゲーム開発ワークフローに
比べてほんの僅かな時間
しかかかりません。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
Link: Adobe Success Story http://www.adobe.com/cfusion/showcase/index.cfm?event=casestudydetail&casestudyid=1694931
- 47. Adobe Edge Runtime API = JavaScript連携が容易
jQueryのセレクタを利用
Adobe独自のアニメーション
エンジン (CSS3+JavaScript)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
Link: http://labs.adobe.com/technologies/edge/resources/jsapi.html
- 48. Edgeの代替ツール
Tumult Hype (DOMアニメ) Sencha Animator (DOMアニメ)
http://tumultco.com/hype/ http://extjs.co.jp/products/animator/
Radi (HTML5 Canvas)
http://radiapp.com/
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48
- 49. Edge民主化ポイント
HTML/CSS/JSの知識がゼロでも
FlashのようなHTMLアニメーション
と簡単なインタラクションを容易に作成できる。
しかも別ツールを使わずにファイルサイズを最小化。
IE8等非対応環境のための代替画像設定もカンタン。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
- 51. リモート
インスペクション
(DOM確認・編集)
モバイルデバイスに
直接URLを送信し確認
(Bonjour接続)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51
Link: http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow/
- 52. Shadow民主化ポイント
開発機と (何台もの) 実機を行ったり
来たりしないでもサイトの確認ができる。
しかも実行中のコードを手元で確認
できたりして。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
- 53. Touch Apps解説
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
- 54. Adobe Touch Apps
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54
Link: http://www.adobe.com/products/touchapps.html
- 55. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 55
Link: http://www.youtube.com/watch?v=nlZTc8jre6E
- 56. Creative Cloudのビジョン
a a
Creative Cloud
クライアン
アイデア出 デザイン
ト 制作 配信 計測・解析
し 検討
打ち合わせ
Adobe Debut Adobe Ideas Adobe Collage PS Touch
Adobe Proto Adobe Kuler
Adobe Debut
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 56
- 57. HTML5ツールを含めたAdobeの総合力
+制作ワークフローの進化 (タッチ)
=Adobe Creative Cloud
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 57
- 59. Flashテクノロジーの今後10年を見据えた進化
PC
ブラウザ
スマートフォン
ブラウザ
スマートフォン
アプリ
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 59
- 60. Adobe AIRによるアプリのクロスプラットフォーム対応
Adobe Flash Professional/Flash Builder & ソリューション
Adobe AIR SDK
Flash/Flex (AS3) 技術でクロスプラットフォーム
なアプリを開発。ネイティブ機能連携 (ANE) も
Woven Interactive社の場合
ネイティブと遜色のない描画スピード (40fps)
ネイティブ開発に比べ45%のコストカット
メンテやサポートを考慮すればトータル50%〜60%のコ ファイル形式
スト削減
Mac
Android 対応プラットフォーム
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 60
Link: http://www.flash-3d.net/2011/03/air-2-6-game-development/
- 61. Stage 3D on Mobileデモ (ビデオ)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 61
Link: http://www.youtube.com/watch?v=c1w_5ghL91o
- 62. クロスプラットフォームアプリ開発ソリューションそれぞれの特徴
特徴 適した用途 タイプ
Adobe AIR Flash開発資産と経 汎用的だがビジュ クロスコンパイル
験をそのまま活か アル系が得意 型
せる (2D・3Dゲーム等)
Corona 優れたアニメー 汎用的だがビジュ
ション性能 アル系が得意 (2D
ゲーム等)
Titanium ネイティブUIパー 汎用的
ツとAPIを活用でき
る
Unity ゲーム開発に特化 高度な3Dゲーム
PhoneGap HTML+CSS+ 汎用的 HTML5ハイブリッ
JavaScriptだけで開 ド型
発可能
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 62
- 63. 【参考】Mobile Performance Tests: HTML5 vs. AIR
FPS for 350 sprites
60%
54% Flash (Adobe AIR)
はモバイルアプリ
50% になってもHTML5
44% 43% より安定して高速
40% 36%
31%
30% Adobe AIR
Canvas 2D
20%
10%
3%
0%
iPhone 4S iPad 2 XOOM
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 63
Source: http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air
- 64. 今後のサービス・コンテンツビジネス成功のカギ
インタラクティブ
アーティスト・ グラフィック
デザイナー アニメーター デザイナー
C++/Java イラスト
レーター
Director Flash ゲーム
(Shockwave) クリエイター
(Timeline & ActionScript)
Flashの
膨大なクリエイ
ティブプールを HTML5や
どれだけビジネスに スマートフォン
活かせるかどうかが アプリ開発を含む
チャレンジ あらたなビジネス
チャンス
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64
- 65. Flashアニメーションのマルチアウトプット (次期CSから)
CanvasベースのJSアニメーション
フレームワーク”easelJS”
[スプライトシートを作成] コマンド
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65
Link: http://easeljs.com/
- 66. CreateJS
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 66
Link: http://createjs.com/
- 67. まとめ
まだまだ発表できない
開発中のHTML5ツールやソリューションが
今年以降続々登場します。ご期待ください。
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
- 68. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.