プログレッシブエンハンスメント

「プログレッシブエンハンスメント」という用語は、オースティンで2003年3月11日に開催されたSXSWインタラクティブカンファレンスと、^[1] 2003年3月から6月にかけて発行されたWebmonkeyの連載記事を通じて、スティーブン・チャンピオンとニック・フィンクによって形成された。^[2]

様々な画面解像度に対応する柔軟なページレイアウトを実現するCSSテクニックは、レスポンシブウェブデザインの手法として知られる。.net Magazineは、プログレッシブエンハンスメントを2012年ウェブデザイントレンドランキングの第1位に選んだ (レスポンシブデザインは第2位だった)^[3]。Googleは、「我々のシステム (およびより多くのブラウザー) が、ウェブデザイン上の特定の機能がまだサポートされていない場合に、使用できるコンテンツと基本的な機能性を理解できる」よう支援するため、プログレッシブエンハンスメントの採用を奨励した。^[4]

この戦略は、古いバージョンのブラウザーソフトウェアでも動作する最新ブラウザー向けウェブページをデザイナーが制作するという点で、グレイスフルデグラデーション (Graceful Degradation)として知られている従来のウェブデザイン戦略の進化版であると言える。グレイスフルデグラデーションではページが「退化 (degradation)」、つまりデザイン上想定されたテクノロジーが存在しない場合でも表示できるとされていた。しかし実際には、エンドユーザーは「とにかくアップグレード」すべきだという考え方に取って代わられた。

プログレッシブエンハンスメント (以下、PE) では、熟慮の末、戦略が逆転された。最小公分母となるブラウザーソフトウェアの機能性に合わせて基本となるマークアップ文書を作成し、デザイナーがCSSやJavaScript (またはFlash、Javaアプレット、SVG等、他の高度なテクノロジー) を用いてページのプレゼンテーションや振る舞いに機能性または拡張内容を追加するのである。そのような拡張内容はすべて外部リンクとするので、特定のブラウザーで使用できないデータが不必要にダウンロードされることはない。

PE手法は、チャンピオンがHTMLまたは他のウェブプレゼンテーション言語に取り組む前に行ったSGMLに関する初期の実験 (1993～1994年頃)、またその後ブラウザーのバグに対処するためのCSSに取り組んだ際の経験に由来している。その初期のSGMLの文脈においては、セマンティックなマークアップが重要とされ、プレゼンテーションはマークアップ自体に組み込まれず、ほぼ必ず別途検討されていた。このコンセプトは、マークアップ界隈では「プレゼンテーションとコンテンツの分離」の原則、「コンテンツとスタイルの分離」の原則、あるいは「セマンティクスとプレゼンテーションの分離」の原則等、様々に呼ばれていた。1990年代半ば、CSSの導入と普及の前、ウェブが進化するにつれてSGMLの根本規則はHTML拡張派が度々破るところとなった。その結果、ウェブデザイナーは新しい破壊的技術とタグを採用してデザインせざるを得なくなった。誰もが最新のブラウザーを使っているわけではないということが認知され、グレイスフルデグラデーションに賛同が集まったが、最新、または1つ前のメジャーリリースのブラウザーでしかサポートされていないデザイン方法やテクノロジーが使われることが多くなり始めた。数年間、大半のウェブは最新の、最も人気のあるブラウザーでしか利用できなくなった。これはCSSの登場、採用、そして普及、ならびにウェブデザイナーにCSSを使ったレイアウトのしかたを教える (エリック・コステロ、オーウェン・ブリッグス、デイブ・シェア^[5]らによる) 人道主義的な草の根の教育活動が起こるまで続いた。

PEの根拠は、「グレイスフルデグラデーション」の背後にある根本的な仮定——ブラウザーは必ずより高速かつ強力になるということ——が、低機能なブラウザーと深刻な帯域制限を有するハンドヘルド機器とPDAの台頭によって誤りだったと証明されたという認識にある。さらに、ウェブの黎明期におけるHTMLと関連技術の急激な進化が減速したこと、また非常に古いブラウザーが使われなくなったことで、デザイナーは、CSS等の強力なテクノロジーを使ってプレゼンテーション作業をすべて行い、JavaScript等でクライアントサイドの複雑な振る舞いを拡張することが自由にできるようになった。

当初、PEは「文書構造とコンテンツのセマンティクス、プレゼンテーション、そして振る舞いからの分離」という繊細な技術を説明するための幾分使いやすいキャッチオールなフレーズとして提案された。また、特定のブラウザーのレンダリングバグに対処するための、当時広く使われていたCSSハックをベースにしていた。新人デザイナーがPEのコンセプトを受け入れ、PEの手法の拡張と修正を行うにつれて、PEの戦略は形成されていった。

PEの戦略は以下の基本方針で構成されている。

• 基本となるコンテンツはすべてのウェブブラウザからアクセスできる
• 基本となる機能性はすべてのウェブブラウザからアクセスできる
• 疎なセマンティクスですべてのコンテンツがマークアップされる
• 拡張レイアウトは外部リンクされたCSSで提供する
• 拡張された振る舞いは外部リンクされた控えめなJavaScriptで提供する
• エンドユーザーのウェブブラウザーの好みを尊重する

• 2003年8月、ジム・ウィルキンソンはPEのウィキページを作って秘訣やコツを収載し、かつ全体的な戦略を説明した。^[6]
• ジェレミー・キース等のデザイナーは、PEを他のモダンなウェブデザイン (Ajax等) の手法と調和させることで、柔軟かつ強力なユーザー体験を提供できることを示した。^[7]
• アーロン・グスタフソンは、根底にある哲学に始まってCSSのアプローチにJavaScriptの扱い方に至るまでを含む、プログレッシブエンハンスメントの基礎を網羅した連載をA List Apartのために執筆した。^[8][9][10]
• デイブ・シェア等はCSSベースのデザイン戦略を指す用語の採用を普及させる支援を行った。
• Acid2テストとAcid3テストを作成したウェブスタンダードプロジェクト (WaSP) を始め、各組織はPEを教育上の取り組みの基礎として組み込んだ。
• 2006年、Yahoo!のネイト・コエチリーはウェブデザインとブラウザーサポートに関する独自の取り組みであるグレイデッドブラウザーサポート (Graded Browser Support, GBS) においてPEに詳細に言及した。^[11]
• AOLのスティーブ・チップマンは、自身のウェブデザイン戦略の基礎として (DOMスクリプティングによる) PEに言及した。^[12]
• AOL最適化チームのリーダーであるデイビッド・アーツは、アクセッシブルレンダリングテクノロジー (Accessible Rendering Technologies) 一式の開発と「拡張 (enhancement)」の分解をオンザフライで行う技術の考案を行い、ユーザーの好みを守れるようにした。
• クリス・ハイルマンは、CSSの標的化導入によってブラウザーがそれぞれ扱えるコンテンツ (と拡張内容) だけを取得できるようにすることの重要性を議論した。^[13]
• フィラメントグループのスコット・ジェールは、「テスト駆動プログレッシブエンハンスメント」を提案し、^[14] デバイスの機能を (検出されたユーザーエージェントから推測するのではなく) テストしてから拡張内容を提供することを推奨した。
• Wtはオープンソースのサーバーサイドウェブアプリケーションフレームワークで、ブートストラップ時にプログレッシブエンハンスメントを透過的に実装し、プレーンなHTMLから完全なAjaxにまで展開する。

PEの原則に従って作られたウェブページはその性質上アクセシビリティが高くなる。これは、PEの戦略によってコンテンツが必ず利用可能であることと、通常サポートされないか、または容易に無効化されるスクリプティングによって妨害されないということが要求されるためである。さらに、疎なマークアップの原則によって、読み上げツールがその内容を探しやすくなる。ただし、テーブルレイアウトや「タグスープ」等に対応できるよう設計された古いツールがPEサイトでどの程度使用できるかは定かではない。

SEO対策に繋がることも、PEベースのウェブデザイン戦略の副次的作用である。基本となるコンテンツは必ずサーチエンジンスパイダーからアクセスできるので、PEの手法で作られたページでは、サーチエンジンのインデクシングを妨げる恐れのある問題が回避される。^[15]

ギャレット・ダイモン等の懐疑派の一部は、あるユーザーインターフェースプレゼンテーションまたは振る舞いを達成するためにJavaScriptに重度に依存しているような状況ではPEは機能できないとする懸念を表明したが、^[16] これに対しては控えめなJavaScriptが1つの答えとなっている。あるいは情報を含んだページはスパイダーによるインデクシングを受けるためにPEでコーディングすべきだと反論し、^[17] あるいはFlashを多用したページでもPEでコーディングすべきだと反論した。^[18] 関連する分野では、コンテンツとプレゼンテーションの分離の原則に関する疑念を絶対的に表明する者が多く、この2つは緊密に連結しているという現実的認識を主張した。^[19][20]