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

プログレッシブエンハンスメント は、核となるコンテンツを最重要視するウェブデザイン戦略である。この戦略では、エンドユーザーのブラウザーやインターネット接続に合わせて、プレゼンテーション面や機能面で微妙に異なる内容や技術的に困難な内容をコンテンツに漸次追加していく。この戦略の利点として挙げられるのは、すべてのユーザーが任意のブラウザーまたはインターネット接続を用いてウェブページの基本的なコンテンツと機能性にアクセスできることと、より高度なブラウザーソフトウェアまたはより広帯域の接続を有するユーザーには同じページの拡張バージョンを提供できることである。

1. 歴史
-----

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

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

2. 導入と背景
--------

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

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

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

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

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

3. 基本方針
-------

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

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

4. 支持と採用
--------

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

5. アクセシビリティ上の利点
---------------

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

6. SEO上の利点
----------

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

7. 批判と反応
--------

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

8. 脚注
-----

9. 参考文献
-------

Bowman, Doug  [1] Retrieved April 14, 2006.
Edwards, James & Adams, Cameron  [2] Retrieved April 14, 2006.
Heilmann, Christian  [3] Retrieved April 14, 2006.
Koechley, Nate  [4] Retrieved April 14, 2006.
Malicoat, Todd  [5] Retrieved April 14, 2006.
Nyman, Robert  [6] Retrieved April 14, 2006.
Olsson, Tommy  for Accessites.org [7] Retrieved April 2, 2007.
Shea, Dave  [8] Retrieved April 14, 2006.
Stearns, Geoff  [9] Retrieved April 14, 2006.
van der Sluis, Bobby  [10] Retrieved April 14, 2006.
[11] Retrieved April 14, 2006.

10. 関連文献
--------

記事

Gustafson, Aaron  [12] Retrieved July 7, 2011
Gustafson, Aaron  [13] Retrieved July 7, 2011.
Gustafson, Aaron  [14] Retrieved July 7, 2011
Gustafson, Aaron  [15] Retrieved May 7, 2007.
hesketh.com, September 12, 2003 [16]
Keith, Jeremy  [17] Retrieved May 7, 2007.
Olsson, Tommy  [18]

書籍

Briggs, Owen; Champeon, Steven; Costello, Eric; Patternson, Matthew  //[19]// . San Francisco: Apress.
Gustafson, Aaron  //[20]//. Chattanooga: Easy Readers. 978-0-9835895-0-1}}.
Keith, Jeremy  //[21]//. Berkeley: New Riders.
Keith, Jeremy  //[22]//. Berkeley: friends of ED.
Parker, Todd; Toland, Patty; Jehl, Scott; Costello Wachs, Maggie   //[24]// Peachpit/New Riders.

11. 関連項目
--------

Ajax
コンテンツアダプテーション 
フォールトトレラントシステム
jQuery Mobile
フルードレイアウト
セマンティックHTML
控えめなJavaScript

12. 外部リンク
---------

[25], by Cal Henderson
The W3C [26]