更に進化するcssの表現力と新しいwebツール [reloaded]

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

更に進化するCSSの表現力と新しいWebツール轟啓介 / Adobe Systems

HTML5とか勉強会 - Oct 23, 2012


Who?• 轟啓介（とどろきけいすけ）

• twitter: @keisuke322

• アドビのデベロッパーマーケティング

• 担当製品

• 前職は開発者

• Java/J2EE（7年）、AS3/Flex/AIR（2年）

• HTML/JS/PHPなどは必要な範囲で

http://www.adobe.com/jp/devnet/author_bios/keisuke_todoroki.html

http://www.adobe.com/jp/devnet/author_bios/keisuke_todoroki.html

https://twitter.com/keisuke322

https://twitter.com/keisuke322


Adobe & HTMLhttp://html.adobe.com/jp

http://html.adobe.com/jp



Open Source Projects

jQuery Mobile Brackets

CreateJS Apache Cordova


Open Source Projects

Web Platform Docs

WebKit

Web Platform Docshttp://www.webplatform.org/

W3C、Adobe、Apple、Facebook、Google、HP、Microsoft、Mozilla、Nokia、Opera

WebKithttp://html.adobe.com/jp/webstandards/

CSSによるレイアウトや視覚効果の取り組み

http://www.webplatform.org

http://www.webplatform.org

http://html.adobe.com/jp/webstandards/

http://html.adobe.com/jp/webstandards/


CSS Regions雑誌のようなレイアウトをシンプルなCSSで表現


• レイアウトとコンテンツ（文字）を切り離して考えるDTP（出版）のような手法をCSSで実現

• 複数のDivなどで作られたRegion（領域）に対して、別途用意した文字列を流し込む

• 各Region（領域）の配置に制約は無い

CSS Regions


CSS

HTML

article {flow-into: main-thread;

}.region {flow-from: main-thread;

}

<article><p>HTML5 Conferenceにご参加のみなさん、こんにちは。私は、轟というものです。どーぞ、よろしくお願い…</p>

</article>

<div id=”region1” class=”region”></div><div id=”region2” class=”region”></div><div id=”region3” class=”region”></div>

CSS Regions


3つのRegion（領域）を定義した例。このRegionに文字列を流し込んでいる。画面サイズが変化すると、先頭Region（この場合は一番左のカラム）から文字列がオーバーフローして、次のRegion（この場合は真ん中のカラム）へと文字がフローしている。

http://adobe.github.com/web-platform/samples/css-regions/basic/single-flow.html※Chromeブラウザで「chrome://flags」から「CSS領域を有効にする」でトライ可能※Webkit Nightly Buildでもトライ可能

CSS Regions

http://adobe.github.com/web-platform/samples/css-regions/basic/single-flow.html

http://adobe.github.com/web-platform/samples/css-regions/basic/single-flow.html


http://www.adobe.com/jp/devnet/html5/articles/css3-regions.html

CSS Regions

解説記事




CSS Exclusions自由なレイアウトに沿ってテキストを流し込む


CSS Exclusions

• コンテンツ（文字）をフローさせるレイアウトを自由に設定する

• shape-inside と shape-outside プロパティを使って、指定の領域の内外に文字をフロー

• 複雑な図形にもSVGフォーマットで対応可能


.circle {shape-inside: polygon(0px, 150px /* ...more points */);

}.heart{shape-inside: polygon(150px, 32px /* ...more points */);

}

CSS Exclusions

CSS


.circle_exclusion {shape-outside: polygon(0px, 150px /* ...more points */);

}.heart_exclusion {shape-outside: polygon(150px, 32px /* ...more points */);

}

CSS Exclusions

CSS


CSS Exclusions

雑誌のようなレイアウトにCSS RegionsとCSS Exclusionsを採用した例。複雑な形状もSVGフォーマットで定義できる。

CSS Regionsは、2012年9月の段階で80%の仕様策定段階。CSS Exclusionsは50%くらい？


CSS Custom Filters映画のような視覚効果をWebで手軽に実現


Adobe Edge ツール & サービス

Edge Animate Edge Reflow Edge Code Edge Inspect

PhoneGap BuildTypekitEdge Web Fonts

洗練された最先端のWebサイトを構築できる新しいツール&サービス


Adobe Edge AnimateHTMLアニメーションツール


Adobe Edge CodeHTML / CSS / JavaScript コードエディター

プレビュー版公開中


Adobe Edge CodeHTML / CSS / JavaScript コードエディター

プレビュー版公開中

• HTML/CSS/JavaScriptで作られた、オープンソースの超軽量なコードエディター

• Web制作者の作業効率を一気に上げる2つの機能

• QUICK EDIT（クイック編集）

• Cmd + E (Mac) / Ctrl + E (Win)

• カーソルのあるHTMLタグやJSのプロパティ、メソッドの定義をファイル切り替えせずにダイレクトに表示

• LIVE PREVIEW（ライブプレビュー）

• Chromeブラウザと連携して、CSSの変更を保存する前にライブプレビュー


Adobe Edge Inspectモバイルサイトのリモート検証ツール



• スマホやタブレット向けのWebサイトを母艦PCからリモートで検証する超便利ツール

• モバイルサイト検証者の作業効率を一気に上げる2つの機能

• リモートで画面遷移

• 母艦PCの画面遷移が接続されたデバイス上でも追従

• リモートで Web インスペクト

• 母艦PCからデバイス上のHTML画面に対して、Webインスペクトが可能（Developer Tools）

• リモートでスクリーンショット

• 母艦PCからボタン一発で全デバイスのHTML画面のスクリーンショットを撮影し、母艦PCに保存



• 必要なもの

• 母艦PC（Mac / Win）+ Chromeブラウザ

• 検証対象デバイス（iOS / Android）

• 上記にインストールするInspectアプリ

• 母艦PCとデバイスはパスコード（デバイスにインストールしたInspectアプリが最初に表示）を使ってコネクションを作る


Adobe Edge ReflowレスポンシブWebデザイン専用ツール

近日プレビュー版公開


Adobe Edge Web Fonts無料のWebフォントサービス


Adobe PhoneGap Buildモバイルアプリのパッケージサービス


Adobe & HTMLhttp://html.adobe.com/jp




HTML5 特設サイトhttp://adobe-html5.jp

http://adobe-html5.jp

http://adobe-html5.jp


ADCAdobe Developer Connection

http://www.adobe.com/jp/devnet/




ADC OnAirhttp://onair.adclounge.jp

http://onair.adclounge.jp

http://onair.adclounge.jp


CREATE THE WEB TOUREdge AnimateからCode、PhoneGap、Inspectなど紹介するイベント。全セッション録画公開中。http://adobe.ly/adcmeetup06

http://adobe.ly/adcmeetup06

http://adobe.ly/adcmeetup06

更に進化するcssの表現力と 新しいwebツール [reloaded]

Documents

更に進化するcssの表現力と新しいwebツール [reloaded]