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

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

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


だれだこいつ

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

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

§  現在の肩書がテクニカルエバンジェリスト

§  カタコトでゴメンね

§  ゲーム好き、などなど

@fenomas http://aphall.com



過去のウェブ：

§  HTML §  CSS §  SVG §  DHTML

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. github.com/SirPepe/SpecGraph

現在のウェブ


Adobeとしての活躍

contribute to a better web

better web experience

bring innovations to the web better tools for the web


Contributing to the web

表示ブレンドモードカスタムフィルター

Clip Paths

レイアウト CSS Regions CSS Shapes

プラットフォーム Apache Cordova (PhoneGap)

コミュニティー＆テスト Test the Web Forward

Web Platform ドキュメンテーション


詳細情報：

html.adobe.com/jp




アニメを作る

コードを書く

レスポンシブデザイン

何でも屋さん


ツールの紹介：








ツールの入手はCreative Cloudから

creative.adobe.com/


Contributing to the web

表示ブレンドモードカスタムフィルター

Clip Paths

レイアウト CSS Regions CSS Shapes

プラットフォーム Apache Cordova (PhoneGap)

コミュニティー＆テスト Test the Web Forward

Web Platform ドキュメンテーション


CSS フィルター

Webの進化の事例：

現状の対応： Chrome, Safari, iOS, Opera （プレフィックス）


CSS フィルター



CSS フィルター


filter: sepia(0.8);


Edge Animate、Reflow でビジュアルに作る


カスタムフィルター


現状の対応： Chrome, Opera（有効に設定する必要がある） Webkit （ナイトリービルド）


カスタムフィルター



カスタムフィルターのデモ

git.io/zxtapw （ chrome://flags でCSS シェーダを有効にしよう）


CSS FilterLab

github.com/adobe/cssfilterlab （ chrome://flags でCSS シェーダを有効にしよう）


CSS Regions


現状の対応： iOS7 （標準対応！） IE、Safari （プレフィックス） Chrome, Opera（有効に設定する必要がある） Webkit （ナイトリービルド）


Reflow でビジュアルに作る


github.com/adobe-webplatform/ Demo-for-National-Geographic-Orphan-Elephants


CSS シェイプ


現状の対応： Chrome, Opera（有効に設定する必要がある） Webkit （ナイトリービルド）


github.com/adobe-webplatform/ Demo-for-Alice-s-Adventures-in-Wonderland


Follow us! html.adobe.com/jp

github.com/adobe-webplatform

質問など： @fenomas

[email protected]


Technology

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