Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,468 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
  • Be the first to comment

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.

×