Download - Adobe&HTML 札幌 - HTML5 Caravan
![Page 1: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/1.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe & HTML HTML5 Caravan 札幌、1.14.2014 | アンディ ホール
![Page 2: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/2.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
だれだこいつ
§ 日本在住歴もFlash歴も十ん年
§ 物理学専攻 → ウェブ制作 → Flash開発 → アドビで色々
§ 現在の肩書がテクニカルエバンジェリスト
§ 興味はデザインとコードをまたぐところ
§ カタコトでゴメンね
§ ゲーム好き、などなど
@fenomas
![Page 3: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/3.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
過去のウェブ:
§ HTML § CSS § SVG § DHTML
![Page 4: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/4.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. github.com/SirPepe/SpecGraph
現在の ウェブ
![Page 5: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/5.jpg)
© 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
![Page 6: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/6.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
詳細情報:
html.adobe.com/jp
![Page 7: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/7.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Tools
![Page 8: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/8.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
![Page 9: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/9.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの紹介:
![Page 10: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/10.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの紹介:
![Page 11: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/11.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの紹介:
![Page 12: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/12.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Improving the web
![Page 13: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/13.jpg)
© 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 ドキュメンテーション
![Page 14: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/14.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Webの進化の事例:
現状の対応: Chrome, Safari, iOS, Opera (プレフィックス)
![Page 15: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/15.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Webの進化の事例:
![Page 16: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/16.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS フィルター
Webの進化の事例:
filter: sepia(0.8);
![Page 17: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/17.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate、Reflow でビジュアルに作る
![Page 18: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/18.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
カスタム フィルター
Webの進化の事例:
現状の対応: Chrome, Opera(有効に設定する必要がある) Webkit (ナイトリービルド)
![Page 19: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/19.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
カスタム フィルター
Webの進化の事例:
![Page 20: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/20.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
r
カスタムフィルターのデモ
git.io/zxtapw ( chrome://flags でCSS シェーダを有効にしよう)
![Page 21: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/21.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
r
CSS FilterLab
github.com/adobe/cssfilterlab ( chrome://flags でCSS シェーダを有効にしよう)
![Page 22: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/22.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS シェイプ
Webの進化の事例:
現状の対応: Chrome, Opera(有効に設定する必要がある) Webkit (ナイトリービルド)
![Page 23: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/23.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CSS Regions
Webの進化の事例:
現状の対応: iOS7 (標準対応!) IE、Safari (プレフィックス) Chrome, Opera(有効に設定する必要がある) Webkit (ナイトリービルド)
![Page 24: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/24.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Reflow でビジュアルに作る
![Page 25: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/25.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Helping creators make the web better
![Page 26: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/26.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
コミュニティ!
testthewebforward.org
webplatform.org
![Page 27: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/27.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
フリー・オープンソース HTML5モバイルアプリ開発フレームワーク
![Page 28: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/28.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
![Page 29: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/29.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
クラウド上でパッケージを生成 build.phonegap.com
PhoneGap Build
![Page 30: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/30.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ツールの入手はCreative Cloudから
creative.adobe.com/
![Page 31: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/31.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
github.com/adobe-webplatform/ Demo-for-Alice-s-Adventures-in-Wonderland
![Page 32: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/32.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Follow us! html.adobe.com/jp
github.com/adobe-webplatform codepen.io/adobe
質問など: @fenomas
![Page 33: Adobe&HTML 札幌 - HTML5 Caravan](https://reader034.vdocuments.pub/reader034/viewer/2022050921/554bb8d7b4c9053a298b4b37/html5/thumbnails/33.jpg)
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.