2008年8月22日 「おまけつき」からはじめる新しいWeb標準

“Progressive Enhancement”とは、2003年にSteven Champeonが“Progressive Enhancement: Paving the Way for Future Web Design”などで発表した概念で、直訳すると「漸進的な機能拡張」となります。ターゲットブラウザーの中で、一番機能の低いものに対して最低限実現すべき機能を「ベースライン」として定義・実装し、その上で高機能なブラウザーに対し、機能拡張を施していくという手法です。

しかし、実際のWeb製作においては、このアプローチはそのままでは利用しづらいものと考えています。現在の製作手法は、すべてのターゲットブラウザーに対し、同じ機能を実現するという要件をまず定義することがほとんどであるため、ブラウザーごとに大きな機能の違いがあることを許容することはないように感じるからです。

しかしながら、古いブラウザーにあまり大きな影響を与えることのない機能や表示であれば、さほど抵抗なく受け入れられていくのではないかとも考えています。「機能拡張」と大掛かりなものではなく、「おまけつき」くらいのイメージでしょうか。

さて、「おまけ」として使えそうな新しいWeb標準仕様の中から、注目している仕様を2つほどピックアップしてみました。

メディアクエリーとは、現在CSS WGが策定している仕様のひとつであり、画面解像度やウインドウサイズなど媒体がもつ性質や条件に対してスタイルシートを適用するための仕組みです。

デバイスの高解像度化や大画面化、またiPhoneのSafariやOpera Mobileといったパワフルなモバイルブラウザーの登場により、特定の画面サイズに最適化するというWebサイトの設計が問題になってきています。メディアクエリーによって、「ウインドウサイズが1000ピクセル以下」や「画面解像度が480×320ピクセルのデバイス」という条件を指定することにより、この問題をある程度解消することができるでしょう。使い方によっては「おまけ」を超えてしまう表現力をもつものですが、たとえばウインドウ幅が狭い場合は、サイドバーをフッターにし、横スクロールバーを表示しないようにするといった少しの対処で、ユーザビリティの改善を図ることができるのではないかと思います。

メディアクエリーは主に見た目上の「おまけ」による部分が大きいですが、このセレクターAPIはDOMスクリプティングにおける、処理の効率化と記述の簡略化を実現することのできる仕様です。

既にSafari 3.1で実装され、また開発版のFirefox、Opera、そしてIE8のベータ版がサポートしています。IE8では特に、特定のclass名をもつ要素を選択するなどといった処理に対して、Selectors APIのほうが他の方法よりも高速に動作するといった結果がでています。

さて、これらの新しい仕様は、ブラウザーで利用可能とはいえ、まだ策定中の段階にあります。このような状態で、これらの機能を「使ってもいいの？　問題はないの？」と疑問に思う方もいらっしゃるのではないかと思います。なにをもって「利用可能」と判断するのかは、少し難しいところです。

たとえば、「CSS2の10年」というコラムでお伝えしたとおり、現在幅広く利用されているCSS仕様も、実は正式版ではなく、策定中の段階にあるのです。「正式版として仕様が公開されているか」という判断では、現実的に利用可能なものでも使えなくなってしまう問題が発生するおそれがあります。

Webはちょっと前まで「新しい」とされていたものが「当たり前」になる、とても流れの速いものです。CSSやJavaScriptによるWeb開発も、今ではすっかり当たり前の手法になっています。

また、ここ2、3年のブラウザーのWeb標準への取り組みには目覚ましいものがあり、「現時点で利用できない」という短期的な判断をしてしまうのは少しもったいないように思います。また、ブラウザー間での互換性を高めようという取り組みも積極的におこなっており、新しい機能だからといって挙動が異なるといった問題も減っているように感じます。

なにより、“progressive”という単語には「前進的な」という意味があります。過去を顧みないというわけではありませんが、古いものにも目を配る一方で、これからもきちんと見ていこうというメッセージなのではないでしょうか。

とはいえ、いきなり新しい機能を利用するというのも難しい話です。遊んでみながらノウハウを得る一方、それらの実利用を「前向きに」検討しながら、少しずつ進んでいくというアプローチが、Progressive Enhancementの真髄であるのかなと思っています。