CSS関連 - CSS3，CSS4，FX

CSSは2011年にCSS 2.1やSelectors Level 3が勧告され，Selectors Level 4が登場しました。今年2012年にはメディアクエリーが勧告され，他にも安定した勧告候補などがいくつか出ています。この流れから，仕様としては「CSS3やCSS4の時代」になってきたと言えると述べました。そしてCSSの最近の仕様について，いくつか紹介しました。

グラデーションなどを定義したモジュールのImage Values Level 3が4月に勧告候補になりました。グラデーション（liner-gradient()）はモダンブラウザ（IE10，Firefox16，Opera12.5）でも実装が進んでいるのですが，接頭辞つき実装と互換性がなく，角度の解釈も変わったことに注意が必要だと指摘しました。このLevel 3の仕様では他にも，フォールバックのためのimage()などがあるとし，さらにLevel 4の仕様ではResponsive ImagesのCSS版であるimage-set()，複数画像をクロスフェードで合成するcross-fade()などがあると挙げていました。

そろそろ勧告候補になるFlexboxのモジュールを使うことで，ボックスの配置を縦から横に配置したり，ボックスの順番を変えたり，と自由にボックスを配置できます。ただしFlexboxはこれまでの紆余曲折した経緯で，現在の実装状況がブラウザによってマチマチであるため，使うにはもう少し待ったほうが良いかもとしました。

Selectors Level 4では親セレクタを指定できるなど，夢が広がる機能が入っていると言います。具体的には次の例を参照してください。なお，!の付け方などはまだ議論が進んでいるところだそうです。

/ * <a>を子に持つ<li>を選択 */
ul > !li > a {
  color: #C00;
}

/* articleかsectionか，どちらでもいい */
:matches(article, section) > h1 {
  font-size: 220%;
}

Cascading Variablesという次のような変数（カスタムプロパティ）の仕様も提案されています。各ブラウザでも実装される予定で，仕様の完成を待っているところだと言います（Chromeではフラグつきで利用可能⁠）⁠。

/* 色を定義 */
:root {
  var-myBlue: #09C;
}

/* つかう */
:link {
  color: var(myBlue);
}

なお，Sassなどでは変数は$fooという書き方をしていますが，これは仕組み的にはマクロで変数として利用するにはオーバースペックであり，かつ上記の書き方のほうがCSSのエンジンにも負荷がないとのことで，$fooという書き方は不採用になったそうです（Sassの@extend的なものを提供する機能はアイデアとして提案済み⁠）⁠。

雑誌のようなレイアウトを実現するために，テキストの流れる方向を指定するRegions，丸や矩形の中にテキストを流し込むExclusions and Shapes，グリッドライクなレイアウトができる（グリッドの線を引いてそこにスナップさせる）Grid Layout（もう少し仕様を練り直す必要があるとのことで保留中）などの仕様が提案されているとのことです。

条件分岐するためのConditional Rulesでは，あるプロパティがサポートされているかどうかで条件分岐するFeature Queriesである@supportsが提案されています（Firefox 17で実装。しかし無効になるかもとのこと⁠）⁠。またMedia Queries Level 4では，スクリプトの有効無効での振り分けやタッチデバイスの検出ができるようになると示しました。

CSS Maskingでは，iPhoneで使われているマスキングをするプロパティの標準化を行っていると言及しました。

API関連 - DOM，Web Platform APIs，Web Components

講演時間が残り短くなってきたところで，DOM＆API関連の紹介に移りました。まずはDOM周りについてです。

DOM3の上にあるWeb寄りのDOM4では，様々な便利な機能が追加されていると言います。例えば，イベントがコンストラクタになったため，カスタムイベントを投げるときにオブジェクトを中に入れることで，次のように見通しが良くコードが書けることを示しました。また，負荷が高かったMutation Eventsに変わってMutation Observersができたことで，効率よくDOMの変化を監視できるようになったとのことです。

var eventDetail = { dom: 4 };
var ev = new CustomEvent('anevent',
  { detail: eventDetail }
);
obj.dispatchEvent(ev);

9月6日に最終草案になったDOM3 Eventsのイベントはすでに実装されているものが多くあまり特筆することはないとしながらも，WheelEventが標準化されて実装されたことを取り上げました（Firefox17でも実装⁠）⁠。また，モバイルでは必要なタッチイベントの標準化であるTouch Eventsで基本的なタッチイベントが定義されたけれども，マルチタッチやジェスチャーイベントなどはないので，もう少し進んでほしいところと述べました。

続いて，Web Platform APIを紹介しました。

XMLHttpRequestでは，これまでは基本的にTXTやXMLくらいしか取れなかったけれども，HTMLやJSON，Blobなどを取得できるようになったとのことです。

今年仕様的には大きめの変更があったFile APIでは，Blob()コンストラクタがサポートされたたため，BlobBuilderが将来的になくなるかもと言うwarningが出るようになったそうです。

データベース関連ではWeb SQL Databaseの標準化の道が閉ざされたため，Indexed Databaseの策定が進み，今年5月に最終草案になったとのことです（Firefox16とIE10で実装されている⁠）⁠。

さらに，次のAPIについて言及しました。

• Fullscreeen API - 任意の要素をフルスクリーン表示する。
• Pointer Lock - マウスポインタを消したりする。
• Screee Orientation API - デバイスの向きを固定したり，検知する。
• Selectors API Level 2 - セレクタから要素を取得する。jQueryにあるようなfind()やfindAll()が提案中。
• Web Notifications - SafariのNotification Centerで実装されていた通知に関するもの。
• Web Intents - 複数のWebアプリをまたいでデータ連携する際の中核となる仕様。デバイスとの連携も視野に。HTML5の融合が検討されている（プロトコルハンドラとの統合が検討中⁠）⁠。

また，パフォーマンス関連のAPIはだいぶ地味だと言うことで割愛しました。Web Rerformance Working Groupのページを参照してみてください。

メディア関連APIでは，Web Audio APIがハイレベルなオーディオ関連のAPIで，ミキシングなどができるとのことです（Safari6で対応したのでiOS6でも搭載されるだろうとのこと。Chromeも対応済み⁠）⁠。また，Media Capture and StreamsはWebカメラなどからデータを取得することができるAPIで，取得した映像データはCanvasを利用して描画しているため，いろいろと遊べることをデモしました。

最後に，アプリ開発に便利なWeb Componentsを紹介しました。

より洗練されたアプリ開発では，コンポーネントを定義して，HTML側ではコンポーネントを含めて全部書かずに必要に応じて呼び出す機能が必要になっていくとのことでShadow DOMがGoogleから提案されており，WebKitで実装されているとのことです（Chromeでフラグを有効にすることで使用可能⁠）⁠。実際にChromeの<input type="date">や<input type="time">などではShadow DOMが利用されているとのことで，デベロッパーツールを使ってその部分で#shadow-rootという名前でShadow DOMが呼び出されていることを示しました。Shadow DOMを使うことで，セキュリティにも多少安全になり，アプリをつくる際にも依存がないようにつくれるので，便利ではないかということです。

コンポーネントは自分でつくりたいときがあります。そういった用途のためにCusutom DOM Elementsが提案されています。これによりx-fooといった要素を定義して，それに対してAPIを付加することができると言います。ウェブサイトで使えるかは分からないけれども，実装されると，ChromeのアプリやFirefox OS等のアプリの開発で楽になるだろうと指摘しました。また，テンプレートという仕組みがあり，Shadow DOMと組み合わせるとより強力になるそうです。このように洗練されたやり方がWebにも導入されようとしていると述べていました。

以上がセッション中に紹介されたものです。矢倉さんは「まとめとしてまとめられるセッションではないけれども新しい機能を様々紹介したとおり，追いかける側や使う側にとっては今後はよりカオスな状態になるかもしれません。しかしながら，皆さんも自分で面白いと感じたものがあればぜひ追いかけていただき，ブログ等を通して知識共有が進んでいけば嬉しい」とし，本セッションを結びました。