狠狠撸

更に进化する颁厂厂の表现力と
新しいWebツール
轟啓介 / Adobe Systems

HTML5とか勉強会 - Oct 23, 2012
? 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

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

? twitter: @keisuke322

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

? 担当製品

? 前職は開発者

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

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


Adobe & HTML
http://html.adobe.com/jp

Open Source Projects

jQuery Mobile Brackets

CreateJS Apache Cordova


Open Source Projects
Web Platform Docs
Web Platform Docs
http://www.webplatform.org/

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

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

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


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


CSS Regions

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

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

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


CSS Regions
CSS
article {
flow-into: main-thread;
}
.region {
flow-from: main-thread;
}

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

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

CSS Regions

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

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

CSS Regions

解説記事
http://www.adobe.com/jp/devnet/html5/articles/css3-regions.html

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


CSS Exclusions

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

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

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


CSS Exclusions

CSS
.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 RegionsとCSS
Exclusionsを採用した例。複雑な形状もSVG
フォーマットで定義できる。

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


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


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

Edge Animate Edge Re?ow Edge Code Edge Inspect

Edge Web Fonts Typekit PhoneGap Build


Adobe Edge Animate
HTMLアニメーションツール


Adobe Edge Code プレビュー版公開中

HTML / CSS / JavaScript コードエディター


Adobe Edge Code プレビュー版公開中

HTML / CSS / JavaScript コードエディター

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

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

? QUICK EDIT（クイック編集）

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

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

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

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


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


Adobe Edge Inspect

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

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

? リモートで画面遷移

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

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

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

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

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


Adobe Edge Inspect

? 必要なもの

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

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

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

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


Adobe Edge Re?ow 近日プレビュー版公開

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


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


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


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

ADC
Adobe Developer Connection
http://www.adobe.com/jp/devnet/

ADC OnAir
http://onair.adclounge.jp

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

狠狠撸

更に进化する颁厂厂の表现力と新しいWebツール [Reloaded]

More Related Content

更に进化する颁厂厂の表现力と新しいWebツール [Reloaded]

狠狠撸

更に进化する颁厂厂の表现力と 新しいWebツール [Reloaded]

More Related Content

更に进化する颁厂厂の表现力と 新しいWebツール [Reloaded]

更に进化する颁厂厂の表现力と新しいWebツール [Reloaded]

更に进化する颁厂厂の表现力と新しいWebツール [Reloaded]