どのWebブラウザをサポートするべきか？ 「プログレッシブ・エンハンスメント」という考え方
Webアプリケーションを開発、運用する側にとって、どのWebブラウザのどのバージョンをサポートするのかを決めることは非常に重要です。サポートするWebブラウザを絞り込んでしまえば開発は容易になりますが、利用者には狭い選択肢を強いることとなります。サポート対象を広げるほど利用者には便利になりますが、開発時に各Webブラウザの互換性の問題に気をつけなければならず、またテストの工数もねずみ算的に膨らみ、開発工数の増大からコストの増大へとつながります。
いま業務アプリケーションも含めて多くのアプリケーションがWebアプリケーション化しています。社内のスタッフだけが使うことを想定するのならば、Webブラウザの種類とバージョンを限定してもいいでしょう。
しかし今後は社内に複数のベンダから調達したWebアプリケーションが混在することになるでしょう。そのときに、それぞれのWebアプリケーションがサポートするWebブラウザが異なった場合、WebアプリケーションごとにWebブラウザを使い分ける、などという状況が発生しかねません。そしてクラウドやSaaSの利用が進めば、こうした自体はさらに複雑化していきます。
どう考えるべきなのでしょうか？ Yahoo!の例を参考に見てみましょう。
Yahoo!が採用するプログレッシブ・エンハンスメント
Yahoo!が開発しているJavaScriptライブラリ「Yahoo! User Interface Library」（YUI）。YUIはYahoo!のWebサイトのユーザーインターフェイスを支えている技術でもあります。そのため、もっとも多くのWebブラウザで動作することを配慮したJavaScriptライブラリの1つだといってよいでしょう。
そのYUIは7月2日、優先的にサポートする対象のWebブラウザを変更した、とブログで表明しました。
そして現在の優先サポート対象となるWebブラウザは以下のようになりました。上記のWebページから引用します。
| Win XP | Win Vista | Mac 10.4.† | Mac 10.5.† | |
|---|---|---|---|---|
| Firefox 3.0.† | A-grade | A-grade | ||
| Firefox 3.5.† | A-grade | A-grade | A-grade | |
| Opera 9.6.† | A-grade | |||
| IE 8.0 | A-grade | A-grade | ||
| IE 7.0 | A-grade | A-grade | ||
| IE 6.0 | A-grade | |||
| Safari 3.2.† | A-grade | |||
| Safari 4.0.† | A-grade | A-grade |
（†は、そのバージョンの中の最新バージョンだけをサポートする、という意味です）
「A-grade support」を、ここでは「優先的にサポートするWebブラウザ」としましたが、実は、Yahoo!はWebブラウザを「A-grade」「C-grade」「X-grade」の3つに分けています。
A-gradeは、ここで訳したとおり優先的にサポートするWebブラウザです。品質管理テスト（QAテスト）では、A-gradeのすべてのWebブラウザを対象として行われ、バグは最優先で解決されます。
C-gradeは、基本的なコンテンツと機能が利用できるようなレベルのサポートを行います。品質管理テストではこのWebブラウザのいくつかをサンプリングして行われます。発見されたバグは最優先で解決されます。
X-gradeは、A-gradeでもC-gradeでもないWebブラウザです。X-gradeのWebブラウザを対象とした品質管理テストは行われず、バグ対応もしません。
この分類は、YUIのWebブラウザのサポートポリシーを説明した以下のWebページに記されています。
このWebページでも説明されていますが、Yahoo!は従来の「サポート対象として完全な動作を保証をするか、さもなくば対象としせず動作を保証しないか」という単純な方式ではなく、A-grade、C-grade、X-gradeというグレードに沿った段階的なサポートを行うことで、すべてのWebブラウザをサポートする、という考え方を採用しています。
これは「プログレッシブ・エンハンスメント」と呼ばれる、最近のWebデザインのトレンドに沿った考え方です。
Yahoo!が採用する「プログレッシブ・エンハンスメント」とは何か
プログレッシブ・エンハンスメントとは、どのようなWebブラウザでも情報が欠けることなく参照でき、操作もできるようにHTMLとCSSで基本デザインを構築した上に、さらに最新のWebブラウザの新しいテクノロジを積極的に導入することで、よりよいユーザーエクスペリエンスを構築することをいいます。
プログレッシブ・エンハンスメントを詳しく解説した「A List aprart」の記事「A List Apart: Articles: Understanding Progressive Enhancement」では、プログレッシブ・エンハンスメントは、しっかりとHTMLでマークアップすることでコンテンツをどのWebブラウザでも参照できるようにし、それに対してCSSで整形することでJavaScriptをサポートしていないWebブラウザでもちゃんと見られるようにして、最後にJavaScriptでインタラクティブなエクスペリエンスを構築するとよい、という説明がされています。
Webブラウザの種類は増えており、と同時にWeb標準の進化が速くなるにつれて、以前よりも利用者のWebブラウザ環境は機能面でも種類面でも大きく広がっていくことは明らかです。こうした利用環境に対応したWebデザインを行っていくためには、プログレッシブ・エンハンスメントという考え方は今後さらに重要さを増していくでしょう。
そしてこれは、いわゆるWebデザインを担当するデザイナーだけでなく、Webアプリケーションを開発するプログラマにとっても無視できない考え方になっていくことは間違いないと思います。
プログレッシブ・エンハンスメントは、昨年後半あたりからWebデザイナーの間などで語られるようになった比較的新しい考え方です。そのため、デザイナーやプログラマ向けの資料はまだ十分でないのが実情です。すでに紹介したWebページも含めて、3つほど情報源を紹介しておきます。
- Yahoo! UI Library: Graded Browser Support
- A List Apart: Articles: Understanding Progressive Enhancement
- Pragmatic Progressive Enhancement
これからのWebアプリケーションは、より多くのWebブラウザを段階的にサポートする、このプログレッシブ・エンハンスメントという考え方に沿って開発されるものが増えていくのではないかと予想しています。また、Webアプリケーション開発の側も、これを差別化の一要因として用いるのではないでしょうか。
関連記事 on Publickey
- いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
- 10年ぶりにJavaScriptがついにバージョンアップへ、年内承認の見通し
- 「アドビ vs Web標準」の決着はどうなる
- 今夜公開のFirefox 3.5について、めったに聞かれない質問とその答え
- jQueryの用途広がる、次期バージョンのThunderbirdにも搭載
- リリースされたばかりのIE8で表示確認、しかし互換性に問題発生
参照記事 on the Web
あわせて読みたい
