Adobe セッションスライド for HTML5 開発ツール天下一武道会 (IDE+α編 : 初夏の陣)

1. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe Web 統合開発環境のご紹介
仲尾 毅 ｜ Adobe Creative Cloud エバンジェリスト

2. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
自己紹介
 電気電子工学専攻 → Pro Video SE → Product Marketing → Evangelist
 興味は、ユーザーと創り手 (エンジニア) のクロスポイント
 Creative Cloud 道場ブログ http://blogs.adobe.com/tnakao/
 Creative Cloud 道場 on USTREAM 毎週木曜夜8時
 趣味は、バンド、ビデオ、Mac
@tsuyo
n仲尾 毅
Tsuyoshi Nakao
Adobe Creative Cloud エバンジェリスト

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

4. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -

5. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
DIGITAL CREATIVE TOOLS

6. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
DIGITAL CREATIVE TOOLS

7. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
新 Web 標準と Adobe の取り組み
- ツール・貢献 -
DIGITAL CREATIVE TOOLS

8. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

9. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

10. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
情報設計/画面設計
リッチコンテンツ
制作
実装
テスト

11. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

12. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Dreamweaver CC
CSS デザイナー 可変グリッドレイアウト
設定の同期 WebKit プレビュー

13. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
メディアクエリーによるレスポンシブデザインを直感的な操作で定義。
CSS パネルでスタイル設定も思いのまま。
Edge Inspect 連携によるスマホ上でのリアルタイムプレビューも強力。
Edge Reflow CC
レスポンシブ デザイン ツール
プレビュー版

14. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate CC
HTML5 アニメーション制作ツール
HTML5 / CSS3 / JavaScript によるアニメーションやインタラクティブコン
テンツを直感的なタイムライン操作で制作。

15. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Code CC
超軽量コードエディター
プレビュー版
HTML / CSS / JavaScript を効率よくコーディングしていくための、
全く新しいコードエディター。

16. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Inspect CC
モバイルサイトのリモート検証ツール
PC上のブラウザから、コネクションを張った全てのデバイスのブラウジン
グ、Webインスペクト、スクリーンショットをリモート操作。

17. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Inspect CC
モバイルサイトのリモート検証ツール
PC上のブラウザから、コネクションを張った全てのデバイスのブラウジン
グ、Webインスペクト、スクリーンショットをリモート操作。

18. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe & HTML5
- 新しい Web 標準と Adobe の取り組み -

19. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe の活動
contribute to a better web
better web experience
bring innovations to the web better tools for the web
ウェブのためのより良いツールウェブへの革新を提供
より良いウェブに貢献
より良いウェブ体験を

20. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Contributing to the web ウェブへの貢献
表示
ブレンドモード
カスタムフィルター
Clip Paths
レイアウト
CSS Regions
CSS Shapes
プラットフォー
ム
Apache Cordova
(PhoneGap)
コミュニティー ＆ テスト
Test the Web Forward
Web Platform ドキュメンテーション

21. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Webの進化の事例：

22. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Webの進化の事例：
filter:
sepia(0.8);

23. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
カスタム フィルター
Webの進化の事例：

24. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS シェイプ
Webの進化の事例：
現状の対応： Chrome, Opera（有効に設定する必要がある）
Webkit （ナイトリービルド）

25. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Regions
Webの進化の事例：
現状の対応： iOS7 （標準対応！）
IE、Safari （プレフィックス）
Chrome, Opera（有効に設定する必要がある）
Webkit （ナイトリービルド）

26. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate、Reflow でビジュアルに作る

27. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Reflow でビジュアルに作る

28. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe & HTML5
contribute to a better web
better web experience
bring innovations to the web better tools for the web
ウェブのためのより良いツールウェブへの革新を提供
より良いウェブに貢献
より良いウェブ体験を

29. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

30. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの入手はCreative Cloudから
30日間無償体験
Edge Reflow CC Preview と Edge Code CC Preview
は
その後も無償!
creative.adobe.com

31. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
リソース
Adobe Pinch In
www.adobe.com/jp/jos/pinchin.html
Creative Cloud 道場ブログ
http://blogs.adobe.com/tnakao/
仲尾 毅 Tsuyoshi Nakao
@tsuyon | tnakao@adobe.com

32. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.