adc meetup round 03 adobe new tools

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

太田禎一 | アドビシステムズ株式会社テクニカルエバンジェリスト

Adobe new tools : Introduction of Edge, Muse and Proto

ADC MEETUP ROUND 03 | 2011.11.12

Photo: Toshi Island Paddy http://www.flickr.com/photos/15173654@N02/


アジェンダ

§  AdobeとHTML5 §  Adobe Edge §  Adobe Muse §  Touch Apps：Adobe Proto

2

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3

ADOBE

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4

HTML5に賭け金倍額！

DOUBLE DOWN

Photo: O Palsson http://www.flickr.com/people/opalsson/


http://beta.theexpressiveweb.com/

5


http://adobe-html5.jp/

6


HTML5：Can I Use Now？

7

Element Browser Support

Canvas 67.13%

WebGL 42.92%

Embedded OpenType fonts 37.55%

SVG fonts 30.8%

Inline SVG in HTML5 51.99%

Web Storage 87.95%

Web Sockets 47.88%

H.264 39.43%

Source: 1 http://caniuse.com/ 2 http://gs.statcounter.com/#mobile_vs_desktop-JP-weekly-200827-201142

95.7%

4.3%

PC Mobile

生活者へのリーチ2

HTML5要素の普及率1

モバイルではすでにOK！


ブラウザの世代交代スピード

8 Source: http://arstechnica.com/web/news/2011/08/july-browser-stats-windows-xp-loses-its-majority-share-of-web-users.ars

モダンブラウザの自動更新機能で HTML5の普及は

加速


Web標準へのAdobeのコミットメント

Creative Suite 5

2010年4月

CSS Regions

WebKit Contributions

jQuery Contributions

HTML5 Support in Dreamweaver CS5.5

Wallaby Preview

HTML5 video publishing in Scene7

HTML5-tagged video in Dreamweaver CS5

Digital Publishing Suite with HTML5 support

HTML5 Pack for Illustrator CS5

HTML5 Pack for Dreamweaver CS5 CSS Shaders

Adobe MAX 2011

PhoneGap

TypeKit (WebFonts)

9


CSS Regions & CSS Shaders DEMO

10


Adobe Edge

11 Link: http://labs.adobe.com/technologies/edge/


Adobe Edge DEMO

12


Adobe Edgeのゴール：ユーザー視点の開発ロードマップ

インタラクション &

Web標準

使いやすい表現力

& 先進性

モバイル &

ユビキタスプロの技をカンタンに

§  直感的なUI

•  高速 & 軽快

§  新規コンポジションの作成

§  既存HTMLのアニメーション化

§  SVG/JPG/PNG/GIFファイルの配置

§  クロスプラットフォーム： Mac OS X & Win7

ビジョン現在達成していること


Adobe Edge：パブリックプレビューとフィードバック前提の開発

みなさんのフィードバックを反映しながらEdgeを完成させる

Q410 ‒ Q211 2012

パブリックプレビュー期間

アニメーションインタラクション Adobe MAX デモ表現力

シェイプ描画・編集

コード編集

グラフィックス

1.0 リリース

14


Adobe Muse

15 Link: http://muse.adobe.com/


Muse (codename) DEMO

16


Touch Apps：Adobe Proto

17 Link: http://www.adobe.com/products/proto.html


Adobe Proto DEMO

18


Creative Cloudのビジョン

19

a a

Client Engagement Create Deploy Ideation Measure

Adobe Debut Adobe Ideas

Adobe Collage

Iteration

Adobe Proto

PS Touch

Creative Cloud

Adobe Debut

Adobe Kuler


つまり… ADOBE & カフェでお仕事！

20

ADOBE


まとめ

AdobeもHTML5ツール＆クラウドという激戦区で

スタンダードを目指しがんばってます♡

21


告知！

22


Canvas/WebGL対応のthree.jsライブラリを使った超先端HTML5実験

23

Three Dreams of Black http://www.ro.me/ 技術解説 http://www.ro.me/tech/

The Wilderness Downtown http://www.thewildernessdowntown.com/ Cannes Lions 2011 Cyber Grand Prix


FITC Tokyo 2011：12/3～4開催。失禁レベル！

24 Link: http://www.fitc.ca/events/speakers/?event=126

three.jsの父 Mr.doobついに来日！

adc meetup round 03 adobe new tools

Technology