Adobe&HTML 札幌 - HTML5 Caravan

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

Adobe & HTML HTML5 Caravan 札幌、1.14.2014 ｜ アンディ ホール

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

だれだこいつ

§  日本在住歴もFlash歴も十ん年

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

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

§  興味はデザインとコードをまたぐところ

§  カタコトでゴメンね

§  ゲーム好き、などなど

@fenomas

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

過去のウェブ：

§  HTML §  CSS §  SVG §  DHTML

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

現在の ウェブ

© 2012 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

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

詳細情報：

html.adobe.com/jp

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

Tools

© 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.

Improving the web

© 2012 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 ドキュメンテーション

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

CSS フィルター

Webの進化の事例：

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

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

CSS フィルター

Webの進化の事例：

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

CSS フィルター

Webの進化の事例：

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 Reserved. Adobe Confidential.

カスタム フィルター

Webの進化の事例：

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

r

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

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

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

r

CSS FilterLab

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

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

CSS シェイプ

Webの進化の事例：

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

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

CSS Regions

Webの進化の事例：

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

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

Reflow でビジュアルに作る

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

Helping creators make the web better

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

コミュニティ！

testthewebforward.org

webplatform.org

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

フリー・オープンソース HTML5モバイルアプリ開発フレームワーク

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

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

クラウド上でパッケージを生成 build.phonegap.com

PhoneGap Build

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

ツールの入手はCreative Cloudから

creative.adobe.com/

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

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

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

Follow us! html.adobe.com/jp

github.com/adobe-webplatform codepen.io/adobe

質問など： @fenomas

andhall@adobe.com

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