レポート

最近の「HTMLとかCSSとかAPIとか」,CSSがより便利に使える「実践Sass」~HTML5 Conference 2012 セッションレポート

この記事を読むのに必要な時間:およそ 6 分

9月8日,慶応義塾大学日吉キャンパス協生館にてHTML5 Conference 2012が開催されました。4トラック20セッションの講演が行われたのですが,本稿では次のセッションを中心に本イベントをレポートします。

  • 「HTMLとかCSSとかAPIとか -2012秋編-」
  • 「実践Sass -10を超えるプロジェクト運用で得たノウハウ-」

画像

公式レポートは@ITにて順次掲載されていますのでそちらをご覧ください。イベントの公式サイトでは,本イベントに関する記事を収集しているので,こちらを確認してみると良いでしょう。また,各登壇者の発表資料もイベントの公式サイトに掲載されています。

基調講演

昨年開催されたChrome+HTML5 Conferenceに引き続き,今年も基調講演には及川卓也さんと白石俊平さんが登壇しました。基調講演については後日掲載予定のレポートをご覧ください。

画像

HTMLとかCSSとかAPIとか -2012秋編-

ミツエーリンクスに勤める矢倉眞隆さんによる,最新のHTMLやCSS,APIに関するまとめの発表が行われました。昨年末のHTML5とか勉強会での白石さんによるHTML5&API総まくりが好評だったことを受けて,矢倉さんが今回このようなタイトルで話すことになったそうです。

画像

HTML関連 - HTML5,WHATWG HTML,HTML.next

HTML5は,2011年5月に最終草案が出され,2012年3月に最新の草案に更新されており,現在も更新作業が行われています。今年に入ってからは勧告に向けた動きを本格化したとのことです。

その際,HTML5の勧告に向けた作業をするにあたり,Ian Hickson氏がWHATWG HTMLの編集者として専念するために,HTML5(W3C HTML)の編集者から離れたのですが,日本ではW3C HTMLとWHATWG HTMLが対立しているかのような誤解が一部で広まったと言います。HTML5はWHATWG HTMLからほとんど切りだされている形になっており,HTML5はスナップショット,WHTWG HTMLはLiving Standardであるとし,WHATWG HTMLのブランチを切ったものがHTML5のような感じで今後も共存していくことになるだろうと説明しました。

今年7月には,HTML5の新しい編集者のチームを発表しており(Microsoft,Adobe,Apple,Googleに所属している人も参加),おおよそ今年末~来年春頃の勧告候補の公開に向けて動き出しているそうです。また勧告については,W3Cとしては勧告を早めたいが互換性が重要であるため,実装条件について話し合われているところだと言います。

そしてHTML5の次であるHTML.next(仮称でそう呼ばれている)を検討するためにHTML Working Groupを組織改編中とのことです。WHATWG HTMLはもちろん,他からも提案を募り,策定していくことになります。

HTML.nextとして現在,ポップアップやモーダルダイアログなどの様々なダイアログを定義する

タグ(HTML5のEditor's Draftにすでに入っている),解像度/ピクセル密度ごとに画像を出しわける仕組みとしてのResponsive Images(WHAWG HTML案の<img>タグのsrcset属性,Community Group提案の<picture>タグなどが現在提案中),仮想キーボードの種類などの入力モードを指定する<input>タグのinputmode属性(数字用のキーボードなどを指定できるのでモバイルでは便利になる。Firefox17で多少実装済み)などが検討されていると示しました。

CSS関連 - CSS3,CSS4,FX

CSSは2011年にCSS 2.1Selectors 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にも導入されようとしていると述べていました。

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

著者プロフィール

高橋和道

gihyo.jp編集部 所属。

URL:https://twitter.com/k_taka

コメント

コメントの記入