どのWebブラウザをサポートするべきか? 「プログレッシブ・エンハンスメント」という考え方

2009年7月7日

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 Apart: Articles: Understanding Progressive Enhancement

プログレッシブ・エンハンスメントを詳しく解説した「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つほど情報源を紹介しておきます。

これからのWebアプリケーションは、より多くのWebブラウザを段階的にサポートする、このプログレッシブ・エンハンスメントという考え方に沿って開発されるものが増えていくのではないかと予想しています。また、Webアプリケーション開発の側も、これを差別化の一要因として用いるのではないでしょうか。

関連記事 on Publickey

参照記事 on the Web

あわせて読みたい

Web技術 Web標準 Webブラウザ




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本