Web標準にEdgeを利かそう
dotFes 2013 KYOTO ・ アンディ ホール ・ アドビジャパン

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confi...
だれだこいつ

@fenomas
http://aphall.com
§ 

日本在住歴もWeb開発歴も十ん年

§ 

物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々

§ 

現在の肩書がテクニカルエバンジェリスト
...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
HTML
§  CSS
§  SVG
§  DHTML
§ 

過去のウェブ:

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
現在の
ウェブ

© 2012 Adobe Systems Incorporated. All Rights Reserved.
github.com/SirPepe/SpecGraph Adobe Confidential.
Adobeとしての活躍
contribute to a better web

bring innovations to the web

better tools for the web

better web experience

© 2...
Contributing to the web

表示

レイアウト

プラットフォーム

ブレンドモード
カスタムフィルター
Clip Paths

CSS Regions
CSS Shapes

Apache Cordova
(PhoneG...
詳細情報:

html.adobe.com/jp

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
アニメ
を作る

コード
を書く

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

レスポンシブ
デザイン

何でも屋さん
ツールの紹介:

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

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

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

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

creative.adobe.com/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Contributing to the web

表示

レイアウト

プラットフォーム

ブレンドモード
カスタムフィルター
Clip Paths

CSS Regions
CSS Shapes

Apache Cordova
(PhoneG...
Webの進化の事例:

CSS フィルター

現状の対応: Chrome, Safari, iOS, Opera
(プレフィックス)
© 2012 Adobe Systems Incorporated. All Rights Reserved....
Webの進化の事例:

CSS フィルター

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Webの進化の事例:

CSS フィルター
filter:
sepia(0.8);


© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate、Reflow でビジュアルに作る
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Webの進化の事例:

カスタム フィルター

現状の対応: Chrome, Opera(有効に設定する必要がある)
Webkit (ナイトリービルド)
© 2012 Adobe Systems Incorporated. All Rights...
Webの進化の事例:

カスタム フィルター

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
カスタムフィルターのデモ

git.io/zxtapw
( chrome://flags でCSS シェーダを有効にしよう)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adob...
CSS FilterLab

github.com/adobe/cssfilterlab
( chrome://flags でCSS シェーダを有効にしよう)
© 2012 Adobe Systems Incorporated. All Right...
Webの進化の事例:

CSS Regions

現状の対応: iOS7 (標準対応!)
IE、Safari (プレフィックス)
Chrome, Opera(有効に設定する必要がある)
Webkit (ナイトリービルド)
© 2012 Adob...
Reflow でビジュアルに作る
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
github.com/adobe-webplatform/
Demo-for-National-Geographic-Orphan-Elephants
© 2012 Adobe Systems Incorporated. All Rights ...
Webの進化の事例:

CSS シェイプ

現状の対応: Chrome, Opera(有効に設定する必要がある)
Webkit (ナイトリービルド)
© 2012 Adobe Systems Incorporated. All Rights R...
github.com/adobe-webplatform/
Demo-for-Alice-s-Adventures-in-Wonderland
© 2012 Adobe Systems Incorporated. All Rights Rese...
Follow us!
html.adobe.com/jp
github.com/adobe-webplatform
質問など:

@fenomas
andhall@adobe.com
© 2012 Adobe Systems Incorpora...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Upcoming SlideShare
Loading in …5
×

dotFes - Web標準にEdgeを利かそう

1,369 views

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,369
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

dotFes - Web標準にEdgeを利かそう

  1. 1. Web標準にEdgeを利かそう dotFes 2013 KYOTO ・ アンディ ホール ・ アドビジャパン © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. だれだこいつ @fenomas http://aphall.com §  日本在住歴もWeb開発歴も十ん年 §  物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々 §  現在の肩書がテクニカルエバンジェリスト §  カタコトでゴメンね §  ゲーム好き、などなど © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  3. 3. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  4. 4. HTML §  CSS §  SVG §  DHTML §  過去のウェブ: © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  5. 5. 現在の ウェブ © 2012 Adobe Systems Incorporated. All Rights Reserved. github.com/SirPepe/SpecGraph Adobe Confidential.
  6. 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. 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. 8. 詳細情報: html.adobe.com/jp © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  9. 9. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  10. 10. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  11. 11. アニメ を作る コード を書く © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. レスポンシブ デザイン 何でも屋さん
  12. 12. ツールの紹介: © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  13. 13. ツールの紹介: © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  14. 14. ツールの紹介: © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  15. 15. ツールの紹介: © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  16. 16. ツールの入手はCreative Cloudから creative.adobe.com/ © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  17. 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. 18. Webの進化の事例: CSS フィルター 現状の対応: Chrome, Safari, iOS, Opera (プレフィックス) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  19. 19. Webの進化の事例: CSS フィルター © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  20. 20. Webの進化の事例: CSS フィルター filter: sepia(0.8); © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  21. 21. Edge Animate、Reflow でビジュアルに作る © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  22. 22. Webの進化の事例: カスタム フィルター 現状の対応: Chrome, Opera(有効に設定する必要がある) Webkit (ナイトリービルド) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  23. 23. Webの進化の事例: カスタム フィルター © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  24. 24. カスタムフィルターのデモ git.io/zxtapw ( chrome://flags でCSS シェーダを有効にしよう) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  25. 25. CSS FilterLab github.com/adobe/cssfilterlab ( chrome://flags でCSS シェーダを有効にしよう) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  26. 26. Webの進化の事例: CSS Regions 現状の対応: iOS7 (標準対応!) IE、Safari (プレフィックス) Chrome, Opera(有効に設定する必要がある) Webkit (ナイトリービルド) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  27. 27. Reflow でビジュアルに作る © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  28. 28. github.com/adobe-webplatform/ Demo-for-National-Geographic-Orphan-Elephants © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  29. 29. Webの進化の事例: CSS シェイプ 現状の対応: Chrome, Opera(有効に設定する必要がある) Webkit (ナイトリービルド) © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  30. 30. github.com/adobe-webplatform/ Demo-for-Alice-s-Adventures-in-Wonderland © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  31. 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. 32. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×