Contenu connexe
Similaire à 更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012) (20)
Plus de Keisuke Todoroki (17)
更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)
- 1. 更に進化するCSSの表現力と
新しいWebツール
轟 啓介 / Adobe Systems
HTML5 Conference 2012, Sep 8
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 2. Who?
• 轟 啓介(とどろき けいすけ)
• twitter: @keisuke322
• アドビのデベロッパーマーケティング
• 担当製品
• 前職は開発者
• Java/J2EE(7年)、AS3/Flex/AIR(2年)
• HTML/JS/PHPなどは必要な範囲で
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 3. Adobe & HTML
http://html.adobe.com/jp
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 4. Open Source Projects
jQuery Mobile Brackets
WebKit Apache Cordova
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 5. CSS Regions
雑誌のようなレイアウトをシンプルなCSSで表現
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 6. CSS Regions
• レイアウトとコンテンツ(文字)を切り
離して考えるDTP(出版)のような手法
をCSSで実現
• 複数のDivなどで作られたRegion(領
域)に対して、別途用意した文字列を
流し込む
• 各Region(領域)の配置に制約は無い
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 7. 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>
<div id=”region2” class=”region”></div>
<div id=”region3” class=”region”></div>
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 8. 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でもトライ可能
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 9. CSS Regions
解説記事
http://www.adobe.com/jp/devnet/html5/articles/css3-regions.html
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 10. CSS Exclusions
自由なレイアウトに沿ってテキストを流し込む
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 11. CSS Exclusions
• コンテンツ(文字)をフローさせる
レイアウトを自由に設定する
• shape-inside と shape-outside プロ
パティを使って、指定の領域の内外
に文字をフロー
• 複雑な図形にもSVGフォーマットで
対応可能
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 12. CSS Exclusions
CSS
.circle {
shape-inside: polygon(0px, 150px /* ...more points */);
}
.heart{
shape-inside: polygon(150px, 32px /* ...more points */);
}
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 13. CSS Exclusions
CSS
.circle_exclusion {
shape-outside: polygon(0px, 150px /* ...more points */);
}
.heart_exclusion {
shape-outside: polygon(150px, 32px /* ...more points */);
}
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 14. CSS Exclusions
雑誌のようなレイアウトにCSS RegionsとCSS
Exclusionsを採用した例。複雑な形状もSVG
フォーマットで定義できる。
CSS Regionsは、2012年9月の段階で80%の仕
様策定段階。CSS Exclusionsは50%くらい?
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 15. CSS Custom Filters
映画のような視覚効果をWebで手軽に実現
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 16. Brackets
オープンソース コードエディター
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 17. Brackets
オープンソース コードエディター
• HTML/CSS/JavaScriptで作られた、オープンソースの超軽量
なコードエディター
• Web制作者の作業効率を一気に上げる2つの機能
• QUICK EDIT(クイック編集)
• Cmd + E (Mac) / Ctrl + E (Win)
• カーソルのあるHTMLタグやJSのプロパティ、メソッ
ドの定義をファイル切り替えせずにダイレクトに表示
• LIVE FILE PREVIEW(ライブプレビュー)
• Chromeブラウザと連携して、CSSの変更を保存する
前にライブプレビュー
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 18. Brackets
オープンソース コードエディター
• 2012年中にプレビュー版を出すべく開発中
• 現在の開発ビルド【sprint 13】はそこそこ使える
• 日本語の入力も可
• 【お詫び】セッション中に日本語入力がまだ
出来ないと言いましたが、sprint 13では修正さ
れていました。
• GitHubから開発ビルドはDL可
• https://github.com/adobe/brackets/downloads
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 19. Adobe Shadow
モバイルサイトのリモート検証ツール
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 20. Adobe Shadow
モバイルサイトのリモート検証ツール
• スマホやタブレット向けのWebサイトを母艦PCからリモートで
検証する超便利ツール
• モバイルサイト検証者の作業効率を一気に上げる2つの機能
• リモートで画面遷移
• 母艦PCの画面遷移が接続されたデバイス上でも追従
• リモートで Web インスペクト
• 母艦PCからデバイス上のHTML画面に対して、Webインス
ペクトが可能(Developer Tools)
• リモートでスクリーンショット
• 母艦PCからボタン一発で全デバイスのHTML画面のスク
リーンショットを撮影し、母艦PCに保存
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 21. Adobe Shadow
モバイルサイトのリモート検証ツール
• 近日中に正式リリースするべく開発中
• 必要なもの
• 母艦PC(Mac / Win)+ Chromeブラウザ
• 検証対象デバイス(iOS / Android)
• 上記にインストールするShadowアプリ(現在は全て無
償)
• 母艦PCとデバイスはパスコード(デバイスにインストールし
たShadowアプリが最初に表示)を使ってコネクションを作る
• DLはこちらから。
• http://html.adobe.com/jp/toolsandservices/shadow/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 22. Adobe & HTML
http://html.adobe.com/jp
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 23. HTML5 特設サイト
http://adobe-html5.jp
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 24. ADC
Adobe Developer Connection
http://www.adobe.com/jp/devnet/
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 25. ADC OnAir
http://onair.adclounge.jp
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 26. CREATE THE WEB TOUR
EdgeからBrackets、PhoneGap、Shadowなど
一挙に解説する無償イベント。10/9開催。
http://adobe.ly/adcmeetup06
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
- 27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.