dotFes 2013 KYOTOのセッションのスライドです。 Slides from my session on Edge tools and HTML5/CSS development at dotFes Kyoto 2013.

1. Web標準にEdgeを利かそう
dotFes 2013 KYOTO ・ アンディ ホール ・ アドビジャパン
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

2. だれだこいつ
@fenomas
http://aphall.com
§
日本在住歴もWeb開発歴も十ん年
§
物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々
§
現在の肩書がテクニカルエバンジェリスト
§
カタコトでゴメンね
§
ゲーム好き、などなど
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

4. HTML
§ CSS
§ SVG
§ DHTML
§
過去のウェブ：
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

5. 現在の
ウェブ
© 2012 Adobe Systems Incorporated. All Rights Reserved.
github.com/SirPepe/SpecGraph Adobe Confidential.

6. Adobeとしての活躍
contribute to a better web
bring innovations to the web
better tools for the web
better web experience
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

8. 詳細情報：
html.adobe.com/jp
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

11. アニメ
を作る
コード
を書く
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
レスポンシブ
デザイン
何でも屋さん

12. ツールの紹介：
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

13. ツールの紹介：
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

14. ツールの紹介：
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

15. ツールの紹介：
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

16. ツールの入手はCreative Cloudから
creative.adobe.com/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

18. Webの進化の事例：
CSS フィルター
現状の対応： Chrome, Safari, iOS, Opera
（プレフィックス）
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

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

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

22. Webの進化の事例：
カスタム フィルター
現状の対応： Chrome, Opera（有効に設定する必要がある）
Webkit （ナイトリービルド）
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

24. カスタムフィルターのデモ
git.io/zxtapw
（ chrome://flags でCSS シェーダを有効にしよう）
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

25. CSS FilterLab
github.com/adobe/cssfilterlab
（ chrome://flags でCSS シェーダを有効にしよう）
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

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

28. github.com/adobe-webplatform/
Demo-for-National-Geographic-Orphan-Elephants
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

30. github.com/adobe-webplatform/
Demo-for-Alice-s-Adventures-in-Wonderland
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

31. Follow us!
html.adobe.com/jp
github.com/adobe-webplatform
質問など：
@fenomas
andhall@adobe.com
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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