Eビジネス推進連合会 HTML5ワーキンググループ (第3回) | 2012.03.19      「職人技」では未来が見えない!みんなが使えるAdobeの      HTML5関連ツールとソリューション。      太田禎一 | アドビ シス...
    マルチデバイス対応のWebサイトやアプリの実装技術としてHTML5とそ       の関連技術は欠かせないものとなっていますが、厳然と存在するブラウ       ザ実装の差異や開発ツールの不在といった理由により、往々にしてデキ    ...
おまえダレ?      テクニカルエバンジェリストです。正式な肩書きなのですごめんなさい      放送・出版・デジタルメディアを中心に、いろいろなお客様に最新       Adobeテクノロジーや、そのよさをお伝えする仕事      直...
DIGITAL MARKETING                    DIGITAL MEDIA© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidenti...
HTML5 & Flashでデジタルメディアをトータルにカバー  HTML   ブラン                                                インタラク                   デジタル   ...
直近のブラウザバージョン別インターネット利用シェア (国内)                                                                                            ...
ブラウザバージョン別インターネット利用シェア推移 (国内)                               この推移を見てると                                IE8が5%以下に            ...
PCでのHTML5は                                                      注意が必要(Polyfillsとかね)。© 2011 Adobe Systems Incorporated. All...
html5please.us        要素・     プロパティごとに    オススメのPolyfillsも      教えてくれます© 2011 Adobe Systems Incorporated. All Rights Reserv...
ただし、モバイルを考えれば                                           HTML5にはいますぐとりかかるべし!© 2011 Adobe Systems Incorporated. All Rights R...
caniuse.com                                   http://caniuse.com/#agents=desktop                                   http://...
とはいえ…市場の成長とともにさらに深刻化する分断化問題                                                                              OS               ...
で…「HTML5」って                                                                      どーやってつくるの?© 2011 Adobe Systems Incorporat...
「HTML5」時代のコンテンツ開発                                                                              ブラウザ内蔵の機能                  ...
「HTML5」時代のコンテンツ開発                                                                              ブラウザ内蔵の機能                  ...
現時点でHTML+CSS+JavaScript開発ワークフローに使える  “HTML5”ツールたち                                                      Flash (by Adobe)   ...
技術が混在している                                                                      だけでなく、ツールも                                 ...
だからこそツールの選択には                                                                  将来の開発体制も含めた                                ...
Adobeがきっちりカバーして                                                                              いままでと同様                      ...
ADOBE© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   20
DOUBLE DOWN                                        HTML5に賭け金                             倍額!© 2011 Adobe Systems Incorpora...
Adobeの総合力  HTML   ブラン                                                インタラク               デジタル          カジュアル   プレミアム   ハイエ...
typekit解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.      23
typekit© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   24Link: https://typekit.com/
typekit利用例:The New Yorker© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   25Link: http://www....
typekitの代替ソリューション  CSS3 @font-face                                                                                        ...
typekit民主化ポイント                                                きちんと権利クリアされた高品質な                                            ...
PhoneGap解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.       28
PhoneGap© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   29Link: http://phonegap.com/
PhoneGapによるアプリのクロスプラットフォーム対応       HTML (& Dreamweaver) & PhoneGap                                              ソリューション  ...
PhoneGap© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   31Link: http://www.youtube.com/watch...
PhoneGapのデバイス機能アクセス© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   32Source: http://en.wikip...
PhoneGap Build© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   33Link: http://build.phonegap....
iOS/AndroidにおけるPhoneGap&Adobe AIRアプリの構造比較                                                                                 ...
PhoneGapの代替ソリューション  AppCloud (Brightcove)                                                            Sencha Touch 2  http:...
PhoneGap民主化ポイント                                                    HTML/CSS/JSだけでアプリ開発、                              つまり膨大...
Dreamweaver解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.        37
ツール:Adobe Dreamweaver CS5.5      デザイナー向けWebサイト・アプリ開発ツール            jQuery等のコードヒント            作業環境内で動作確認 (ライブビュー=WebKit)...
Dreamweaverの代替ツール    Aptana                                                                         TextMate    http://apt...
Dreamweaver民主化ポイント                                                   つねに結果 (ライブビュー) を確認                                   ...
Adobe Muse解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.        41
Adobe Muse      HTML5ページ作成ツール            DTPデザインのメタファー            コーディング不要 (Dreamweaverでさえも苦手な人向け)© 2011 Adobe Systems ...
Muse民主化ポイント                                                            HTML/CSSの知識がゼロでも                                   ...
Adobe Edge解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.        44
Adobe Edge© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   45
モバイルアプリへのEdgeアニメーション組み込み例                                                                                  Edgeなら位置・      ...
Adobe Edge Runtime API = JavaScript連携が容易                                                                                  ...
Edgeの代替ツール      Tumult Hype (DOMアニメ)                                                             Sencha Animator (DOMアニメ) ...
Edge民主化ポイント                                                       HTML/CSS/JSの知識がゼロでも                                     ...
Adobe Shadow解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.     50
リモート                                                                                   インスペクション                           ...
Shadow民主化ポイント                                               開発機と (何台もの) 実機を行ったり                                     来たりしない...
Touch Apps解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.        53
Adobe Touch Apps© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   54Link: http://www.adobe.com...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   55Link: http://www.youtube.com/watch?v=nlZTc...
Creative Cloudのビジョン                                                                                     a                 ...
HTML5ツールを含めたAdobeの総合力                                                +制作ワークフローの進化 (タッチ)                                   ...
で…Flashは?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.      58
Flashテクノロジーの今後10年を見据えた進化                                                                                     PC           ...
Adobe AIRによるアプリのクロスプラットフォーム対応       Adobe Flash Professional/Flash Builder &                                     ソリューション  ...
Stage 3D on Mobileデモ (ビデオ)© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   61Link: http://www...
クロスプラットフォームアプリ開発ソリューションそれぞれの特徴                                                      特徴                           適した用途    ...
【参考】Mobile Performance Tests: HTML5 vs. AIR                                                                              F...
今後のサービス・コンテンツビジネス成功のカギ      インタラクティブ      アーティスト・                                                                     グラフィ...
Flashアニメーションのマルチアウトプット (次期CSから)                                                                                   Canvasベー...
CreateJS© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.   66Link: http://createjs.com/
まとめ                                                                      まだまだ発表できない                                    開発中...
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Upcoming SlideShare
Loading in...5
×

「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。

11,667

Published on

eビジネス推進連合会 HTML5ワーキンググループ(第3回)資料
http://jeba.jp/activity/report55.html

Published in: Technology
0 Comments
50 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,667
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
141
Comments
0
Likes
50
Embeds 0
No embeds

No notes for slide

「職人技」では未来が見えない!みんなが使えるAdobeのHTML5関連ツールとソリューション。

  1. 1. Eビジネス推進連合会 HTML5ワーキンググループ (第3回) | 2012.03.19 「職人技」では未来が見えない!みんなが使えるAdobeの HTML5関連ツールとソリューション。 太田禎一 | アドビ システムズ 株式会社 テクニカルエバンジェリスト© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2.  マルチデバイス対応のWebサイトやアプリの実装技術としてHTML5とそ の関連技術は欠かせないものとなっていますが、厳然と存在するブラウ ザ実装の差異や開発ツールの不在といった理由により、往々にしてデキ る個人の「職人技」に頼る場合が多いようです。そんななかいくつか登 場しはじめた、HTML5開発技術を「民主化」するツールやソリューショ ンをご紹介します。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 2
  3. 3. おまえダレ?  テクニカルエバンジェリストです。正式な肩書きなのですごめんなさい  放送・出版・デジタルメディアを中心に、いろいろなお客様に最新 Adobeテクノロジーや、そのよさをお伝えする仕事  直接お伺いしたり、イベント・カンファレンスでお話したり© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
  4. 4. DIGITAL MARKETING DIGITAL MEDIA© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  5. 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. 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. 6Source: http://gs.statcounter.com/#browser_version-JP-monthly-201202-201203-bar
  7. 7. ブラウザバージョン別インターネット利用シェア推移 (国内) この推移を見てると IE8が5%以下に なるのにあと2年近く かかりそう© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 7Source: http://gs.statcounter.com/#browser_version-JP-daily-20080701-20120319
  8. 8. PCでのHTML5は 注意が必要(Polyfillsとかね)。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
  9. 9. html5please.us 要素・ プロパティごとに オススメのPolyfillsも 教えてくれます© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9Link: http://html5please.us/
  10. 10. ただし、モバイルを考えれば HTML5にはいますぐとりかかるべし!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 10
  11. 11. caniuse.com http://caniuse.com/#agents=desktop http://caniuse.com/#agents=mobile モバイルだけだと HTML5/CSS3 実装が進んでるのが 確認できる© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 11Link: http://caniuse.com/#agents=mobile
  12. 12. とはいえ…市場の成長とともにさらに深刻化する分断化問題 OS 画面サイズ CPU アプリストア マウス/タッチ ブラウザ 画面解像度 ブラウザ バージョン© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
  13. 13. で…「HTML5」って どーやってつくるの?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
  14. 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. 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. 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. 17. 技術が混在している だけでなく、ツールも 未成熟?だと!?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
  18. 18. だからこそツールの選択には 将来の開発体制も含めた 総合力が重要。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
  19. 19. Adobeがきっちりカバーして いままでと同様 「職人技」を「民主化」いたします。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
  20. 20. ADOBE© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
  21. 21. DOUBLE DOWN HTML5に賭け金 倍額!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 21Photo: O Palsson http://www.flickr.com/people/opalsson/
  22. 22. Adobeの総合力 HTML ブラン インタラク デジタル カジュアル プレミアム ハイエンド デザイン ディング ティブコン 書籍 ゲーム ビデオ 3Dゲーム&エフェクト &リッチ広告 テンツ HTML 今後続々ツール・ ソリューションを サーバー 出していきます。 & サービス これが総合力! ツール フレーム ワーク 映像配信 Web JavaScript モバイル フォント ライブラリ アプリ HTML5 (Web標準&ブラウザ)© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 22
  23. 23. typekit解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 23
  24. 24. typekit© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24Link: https://typekit.com/
  25. 25. typekit利用例:The New Yorker© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 25Link: http://www.newyorker.com/
  26. 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. 27. typekit民主化ポイント きちんと権利クリアされた高品質な フォントを安心して使える。 使い方はコードをコピペして埋め込むだけ。 フォント形式 (EOTとか) を意識せず 旧いブラウザ (IE) にも対応できる© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 27
  28. 28. PhoneGap解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 28
  29. 29. PhoneGap© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 29Link: http://phonegap.com/
  30. 30. PhoneGapによるアプリのクロスプラットフォーム対応 HTML (& Dreamweaver) & PhoneGap ソリューション  Web技術 (HTML/CSS/JavaScript) だけでクロスプ ラットフォームアプリケーションを開発  アドレス帳やカメラ等のネイティブ機能への直接 コールも可能  クラウド側でマルチプラットフォーム対応コンパ イルが可能な”PhoneGap Build”も ファイル形式 対応プラットフォーム© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 30Link: http://www.phonegap.com/
  31. 31. PhoneGap© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 31Link: http://www.youtube.com/watch?v=E0UV5i5jY50
  32. 32. PhoneGapのデバイス機能アクセス© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 32Source: http://en.wikipedia.org/wiki/PhoneGap
  33. 33. PhoneGap Build© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33Link: http://build.phonegap.com/
  34. 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. 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. 36. PhoneGap民主化ポイント HTML/CSS/JSだけでアプリ開発、 つまり膨大なJSライブラリがそのまま使える。 さらにPhoneGap BuildならマルチPF対応が容易。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
  37. 37. Dreamweaver解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
  38. 38. ツール:Adobe Dreamweaver CS5.5  デザイナー向けWebサイト・アプリ開発ツール  jQuery等のコードヒント  作業環境内で動作確認 (ライブビュー=WebKit) 内蔵してます!© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
  39. 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. 40. Dreamweaver民主化ポイント つねに結果 (ライブビュー) を確認 しながら作業でき、HTML/CSS/jQuery うろ覚えでもコードを補完してくれる。 マルチスクリーンWebサイトも モバイルWebアプリも ハイブリッドアプリも このツールひとつで完結。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 40
  41. 41. Adobe Muse解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41
  42. 42. Adobe Muse  HTML5ページ作成ツール  DTPデザインのメタファー  コーディング不要 (Dreamweaverでさえも苦手な人向け)© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 42Link: http://muse.adobe.com/
  43. 43. Muse民主化ポイント HTML/CSSの知識がゼロでも DTPツールのノリでWebページ制作。 スライドショーもドラッグ&ドロップ だけで追加できちゃう。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 43
  44. 44. Adobe Edge解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 44
  45. 45. Adobe Edge© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45
  46. 46. モバイルアプリへのEdgeアニメーション組み込み例 Edgeなら位置・ サイズ・色・形状のアニ メーションをコードを書かずに 簡単に実現できます。 タイミングの微調整をし、Web やアプリとして複数プラット フォームに配布するのも、他の ゲーム開発ワークフローに 比べてほんの僅かな時間 しかかかりません。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46Link: Adobe Success Story http://www.adobe.com/cfusion/showcase/index.cfm?event=casestudydetail&casestudyid=1694931
  47. 47. Adobe Edge Runtime API = JavaScript連携が容易 jQueryのセレクタを利用 Adobe独自のアニメーション エンジン (CSS3+JavaScript)© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47Link: http://labs.adobe.com/technologies/edge/resources/jsapi.html
  48. 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. 49. Edge民主化ポイント HTML/CSS/JSの知識がゼロでも FlashのようなHTMLアニメーション と簡単なインタラクションを容易に作成できる。 しかも別ツールを使わずにファイルサイズを最小化。 IE8等非対応環境のための代替画像設定もカンタン。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
  50. 50. Adobe Shadow解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 50
  51. 51. リモート インスペクション (DOM確認・編集) モバイルデバイスに 直接URLを送信し確認 (Bonjour接続)© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 51Link: http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow/
  52. 52. Shadow民主化ポイント 開発機と (何台もの) 実機を行ったり 来たりしないでもサイトの確認ができる。 しかも実行中のコードを手元で確認 できたりして。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 52
  53. 53. Touch Apps解説© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 53
  54. 54. Adobe Touch Apps© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 54Link: http://www.adobe.com/products/touchapps.html
  55. 55. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 55Link: http://www.youtube.com/watch?v=nlZTc8jre6E
  56. 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. 57. HTML5ツールを含めたAdobeの総合力 +制作ワークフローの進化 (タッチ) =Adobe Creative Cloud© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 57
  58. 58. で…Flashは?© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 58
  59. 59. Flashテクノロジーの今後10年を見据えた進化 PC ブラウザ スマートフォン ブラウザ スマートフォン アプリ© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 59
  60. 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. 60Link: http://www.flash-3d.net/2011/03/air-2-6-game-development/
  61. 61. Stage 3D on Mobileデモ (ビデオ)© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 61Link: http://www.youtube.com/watch?v=c1w_5ghL91o
  62. 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. 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. 63Source: http://esdot.ca/site/2011/mobile-performance-tests-html5-vs-air
  64. 64. 今後のサービス・コンテンツビジネス成功のカギ インタラクティブ アーティスト・ グラフィック デザイナー アニメーター デザイナー C++/Java イラスト レーター Director Flash ゲーム (Shockwave) クリエイター (Timeline & ActionScript) Flashの 膨大なクリエイ ティブプールを HTML5や どれだけビジネスに スマートフォン 活かせるかどうかが アプリ開発を含む チャレンジ あらたなビジネス チャンス© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 64
  65. 65. Flashアニメーションのマルチアウトプット (次期CSから) CanvasベースのJSアニメーション フレームワーク”easelJS” [スプライトシートを作成] コマンド© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 65Link: http://easeljs.com/
  66. 66. CreateJS© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 66Link: http://createjs.com/
  67. 67. まとめ まだまだ発表できない 開発中のHTML5ツールやソリューションが 今年以降続々登場します。ご期待ください。© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 67
  68. 68. © 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×