更に進化するCSSの表現力と                         新しいWebツール                          轟 啓介 / Adobe Systems                            ...
Who?                                •              轟 啓介(とどろき けいすけ)                                •              twitter: ...
Adobe & HTML                                                                     http://html.adobe.com/jp© 2012 Adobe Syst...
Open Source Projects                                                                              jQuery Mobile      Brack...
CSS Regions                                            雑誌のようなレイアウトをシンプルなCSSで表現© 2012 Adobe Systems Incorporated. All Right...
CSS Regions                                •              レイアウトとコンテンツ(文字)を切り                                              ...
CSS Regions                       CSS                                       article {                                     ...
CSS Regions      3つのRegion(領域)を定義した例。このRegionに文字列を流し込んでいる。画面サイ      ズが変化すると、先頭Region(この場合は一番左のカラム)から文字列がオーバーフ      ローして、次の...
CSS Regions                                                                                解説記事                           ...
CSS Exclusions                                                自由なレイアウトに沿ってテキストを流し込む© 2012 Adobe Systems Incorporated. All ...
CSS Exclusions                                            • コンテンツ(文字)をフローさせる                                              ...
CSS Exclusions                      CSS                                      .circle {                                    ...
CSS Exclusions                      CSS                                      .circle_exclusion {                          ...
CSS Exclusions              雑誌のようなレイアウトにCSS RegionsとCSS              Exclusionsを採用した例。複雑な形状もSVG              フォーマットで定義できる。...
CSS Custom Filters                                                          映画のような視覚効果をWebで手軽に実現© 2012 Adobe Systems Incor...
Brackets                                                                              オープンソース コードエディター© 2012 Adobe Systems...
Brackets                                                                              オープンソース コードエディター                    ...
Brackets                                                                              オープンソース コードエディター                    ...
Adobe Shadow                                                                    モバイルサイトのリモート検証ツール© 2012 Adobe Systems Inco...
Adobe Shadow                                                                    モバイルサイトのリモート検証ツール                         ...
Adobe Shadow                                                                    モバイルサイトのリモート検証ツール                         ...
Adobe & HTML                                                                     http://html.adobe.com/jp© 2012 Adobe Syst...
HTML5 特設サイト                                                                              http://adobe-html5.jp© 2012 Adobe...
ADC                                                                      Adobe Developer Connection                       ...
ADC OnAir                                                                       http://onair.adclounge.jp© 2012 Adobe Syst...
CREATE THE WEB TOUR                                                                              EdgeからBrackets、PhoneGap、S...
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Upcoming SlideShare
Loading in …5
×

更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)

4,286 views

Published on

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,286
On SlideShare
0
From Embeds
0
Number of Embeds
585
Actions
Shares
0
Downloads
34
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

更に進化するCSSの表現力と新しいWebツール (アドビセッション @HTML5 Conference 2012)

  1. 1. 更に進化するCSSの表現力と 新しいWebツール 轟 啓介 / Adobe Systems HTML5 Conference 2012, Sep 8© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. Who? • 轟 啓介(とどろき けいすけ) • twitter: @keisuke322 • アドビのデベロッパーマーケティング • 担当製品 • 前職は開発者 • Java/J2EE(7年)、AS3/Flex/AIR(2年) • HTML/JS/PHPなどは必要な範囲で© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  3. 3. Adobe & HTML http://html.adobe.com/jp© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  4. 4. Open Source Projects jQuery Mobile Brackets WebKit Apache Cordova© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  5. 5. CSS Regions 雑誌のようなレイアウトをシンプルなCSSで表現© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  6. 6. CSS Regions • レイアウトとコンテンツ(文字)を切り 離して考えるDTP(出版)のような手法 をCSSで実現 • 複数のDivなどで作られたRegion(領 域)に対して、別途用意した文字列を 流し込む • 各Region(領域)の配置に制約は無い© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  7. 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. 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. 9. CSS Regions 解説記事 http://www.adobe.com/jp/devnet/html5/articles/css3-regions.html© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  10. 10. CSS Exclusions 自由なレイアウトに沿ってテキストを流し込む© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  11. 11. CSS Exclusions • コンテンツ(文字)をフローさせる レイアウトを自由に設定する • shape-inside と shape-outside プロ パティを使って、指定の領域の内外 に文字をフロー • 複雑な図形にもSVGフォーマットで 対応可能© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  12. 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. 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. 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. 15. CSS Custom Filters 映画のような視覚効果をWebで手軽に実現© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  16. 16. Brackets オープンソース コードエディター© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  17. 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. 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. 19. Adobe Shadow モバイルサイトのリモート検証ツール© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  20. 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. 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. 22. Adobe & HTML http://html.adobe.com/jp© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  23. 23. HTML5 特設サイト http://adobe-html5.jp© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  24. 24. ADC Adobe Developer Connection http://www.adobe.com/jp/devnet/© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  25. 25. ADC OnAir http://onair.adclounge.jp© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  26. 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. 27. © 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×