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

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

歴史

[編集]

「プログレッシブエンハンスメント」という用語は、オースティンで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上の利点

[編集]

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

批判と反応

[編集]

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

脚注

[編集]
  1. ^ Champeon, Steven & Finck, Nick (2003) Inclusive Web Design for the Future, SxSWi presentation
  2. ^ Champeon, Steven (2003), Progressive Enhancement and the Future of Web Design, Webmonkey
  3. ^ “15 top web design and development trends for 2012”. 9 January 2012閲覧。
  4. ^ Pierre Far (2014), Updating our technical Webmaster Guidelines, Webmaster Central Blog
  5. ^ “Zen and the Art of Web Improvement”. 14 April 2006閲覧。
  6. ^ Wilkinson, Jim (2003), Progressive Enhancement - CSS Discuss
  7. ^ Jeremy Keith's Adactio blog (2005), Progressive Enhancement with Ajax
  8. ^ Aaron Gustafson (2008), Understanding Progressive Enhancement, A List Apart
  9. ^ Aaron Gustafson (2008), Progressive Enhancement with CSS, A List Apart
  10. ^ Aaron Gustafson (2008), Progressive Enhancement with JavaScript, A List Apart
  11. ^ Nate Koechley, Graded Browser Support
  12. ^ Steven G. Chipman (2005), New Skool DOM Scripting
  13. ^ Chris Heilmann, Double Vision – Give the Browsers CSS They Can Digest (2005)
  14. ^ “Test Driven Progressive Enhancement”. A List Apart. 27 October 2009閲覧。
  15. ^ Stephan Spencer, PE is good for SEO | Searchlight - CNET News
  16. ^ Dimon, Garret, The Reality of Progressive Enhancement Archived 2007年3月17日, at the Wayback Machine.
  17. ^ IA Summit 2006 » Blog Archive » Web 2.0 and SEO? Archived 2006年4月17日, at the Wayback Machine.
  18. ^ deconcept » Using alternate content as content in Flash
  19. ^ Stopdesign | Are They Really Separated? (2003)
  20. ^ A List Apart: Articles: Separation Anxiety: The Myth of the Separation of Style from Content (2000)

参考文献

[編集]

関連文献

[編集]
記事
書籍
  • Briggs, Owen; Champeon, Steven; Costello, Eric; Patternson, Matthew (2004) Cascading Style Sheets: Separating Content From Presentation (2nd ed.). San Francisco: Apress. ISBN 1-59059-231-X
  • Gustafson, Aaron (2011) Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Chattanooga: Easy Readers. ISBN 978-0-9835895-0-1.
  • Keith, Jeremy (2007) Bulletproof Ajax. Berkeley: New Riders. ISBN 0-321-47266-7
  • Keith, Jeremy (2005) DOM Scripting: Web Design with JavaScript and the Document Object Model. Berkeley: friends of ED. ISBN 1-59059-533-5
  • Parker, Todd; Toland, Patty; Jehl, Scott; Costello Wachs, Maggie (The Filament Group) (2010) Designing with Progressive Enhancement Peachpit/New Riders. ISBN 978-0-321-65888-3

関連項目

[編集]

外部リンク

[編集]