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

プログレッシブエンハンスメントは、ウェブデザインにおける戦略の一つで、ウェブコンテンツを第一に重視し、誰もがウェブページの基本的なコンテンツと機能にアクセスできるようにし、ブラウザの追加機能や高速インターネットアクセスを持つユーザーには、代わりに拡張バージョンを提供する。この戦略は、ページ上のテキストがJavaScriptの開始とコンテンツの読み込みを待つ必要がなく、 HTMLソースコードを通じて即座に読み込まれるため、読み込みが高速化し、ウェブ検索エンジンによるクロールが容易になる。つまり、追加のレイヤーの背後ではなく、すぐに使用できるコンテンツが即座に提供される。^{[1] [2] [3]}

この戦略では、プレゼンテーションセマンティクスをコンテンツから分離し、プレゼンテーションを 1 つ以上のオプション レイヤーに実装し、クライアントのブラウザーまたはインターネット接続の側面に基づいてアクティブ化します。実際には、これは、Web 標準の「最小公分母」であるHTMLを通じてコン​​テンツを提供し、技術的に可能な範囲でCSSを通じてスタイルとアニメーションを適用し、 JavaScriptを通じてさらに拡張機能を適用することを意味します。^[4]廃止されたAdob​​e Flash は、広く使用されていた間に JavaScript と最終的な地位を共有していたと考えられます。^{[5] [6]} Web ブラウザーは、JavaScript の 1 つのエラーまたは機能の不足のためにサイト全体の読み込みに失敗するのではなく、サポートされている範囲でサイトの機能を読み込むことができるため、プログレッシブ エンハンスメント サイトはより安定しており、下位互換性があります。^[4]

「プログレッシブエンハンスメント」という言葉は、2003年3月11日にオースティンで開催されたSXSWインタラクティブカンファレンスでスティーブン・チャンピオンとニック・フィンクによって考案され、 ^{[7] 2003年3月から6月にかけて}Webmonkeyに発表された一連の記事でも使われました。 ^[8]

異なる画面解像度に対応するページレイアウトの柔軟性に関する特定のカスケーディングスタイルシート（CSS）技術は、レスポンシブWebデザインアプローチに関連する概念です。2012年、ネットマガジンは、2012年のトップWebデザイントレンドのリストでプログレッシブエンハンスメントを第1位に選びました（レスポンシブデザインは第2位でした）。^[9] Googleは、特定のWebデザイン機能がまだサポートされていない場合でも、「当社のシステム（およびより広範なブラウザ）が使用可能なコンテンツと基本機能を確認できるようにする」ために、プログレッシブエンハンスメントの採用を推奨しています。^[10]

この戦略は、以前のウェブデザイン戦略であるグレースフルデグラデーションの進化版であり、ウェブページはまず最新のブラウザ向けに設計され、その後古いバージョンのブラウザソフトウェアでも問題なく動作するようになっています。^{[11] [3]}グレースフルデグラデーションは、ページを「劣化」させること、つまり、設計で想定されている特定の技術が欠如している場合でも、見栄えがよくアクセスしやすい状態を維持することを目的としています。^[12]

プログレッシブエンハンスメントでは、この戦略は意図的に逆転します。ウェブコンテンツは、ブラウザソフトウェアの機能の最低共通分母に合わせてマークアップドキュメントで作成されます。 ^{[13] [8] [12]}折りたたみ可能なナビゲーションメニューなど、JavaScriptを介してインタラクティブにコンテンツを表示する必要がある場合は、デフォルトでこれが設定され、最初にJavaScript自体によって非表示になります。^[3]開発者は、最新のCSS、スケーラブルベクターグラフィックス（SVG）、またはJavaScriptを使用して、ページの表示と動作に必要なすべての機能を追加します。^[14]

プログレッシブエンハンスメントアプローチは、HTMLやその他のWebプレゼンテーション言語よりも古い、標準汎用マークアップ言語（SGML）に関するChampeonの初期の経験（  1993～1994年頃）から派生したものです。 ^[8]

セマンティック マークアップを使用してコンテンツを記述し、マークアップ自体にコンテンツを埋め込むのではなく、コンテンツのプレゼンテーションを別々に考慮する概念は、プレゼンテーションとコンテンツの分離^{のルールと呼ばれます[15] [16]}。Champeon は、Web ブラウザーがHTML コンテンツのデフォルトのプレゼンテーション スタイルを提供するため、Web サイトのコンテンツがセマンティック HTML で記述され、プレゼンテーションの選択が Web ブラウザーに委ねられるようになることを期待していると述べました。^[8]しかし、Web デザイナーのニーズにより、HTML標準は、HTML コンテンツが特定のスタイルを規定できるようにするハードコードされた機能で拡張され、消費者と Web ブラウザーからこのオプションが削除されました。 ^[8]これらの機能により、パブリッシャーは、新しい破壊的なテクノロジーを採用するか、他のブラウザーを使用するユーザーがコンテンツにアクセスできるようにするかの選択を迫られました。これは、デザインと互換性の間のジレンマでした。^{[8] [17] [12]} 1990 年代には、最新の人気ブラウザー以外では機能しない Web サイトが増えました。^[12]

この傾向は、1990年代以降、CSSが広く支持されるようになると逆転し、^{[8] [17]}エリック・コステロ、オーウェン・ブリッグス、デイブ・シェイらによる草の根教育活動を通じて、Webデザイナーにレイアウト目的でCSSを使用する方法を示しました。^[要出典]

プログレッシブエンハンスメント戦略は、以下の基本原則から構成されています。^[8]

• 基本的なコンテンツはすべての Web ブラウザーからアクセスできる必要があります。
• 基本的な機能はすべての Web ブラウザーからアクセスできる必要があります。
• まばらなセマンティック マークアップにすべてのコンテンツが含まれます。
• 拡張レイアウトは外部リンクされたCSSによって提供される。^[17]
• 拡張された動作は外部にリンクされたJavaScriptによって提供されます。^[14]
• エンドユーザーの Web ブラウザの設定が尊重されます。

• 2003年8月、ジム・ウィルキンソンは、いくつかのコツやヒントを集め、全体的な戦略を説明するために、プログレッシブエンハンスメントのウィキページを作成しました。^[18]
• ジェレミー・キースなどのデザイナーは、このアプローチを現代のウェブデザインの他のアプローチ（ Ajaxなど）と調和させて使用することで、柔軟でありながら強力なユーザーエクスペリエンスを提供できることを示しました。^{[19] [20]}
• アーロン・ガスタフソンはA List Apartに、基礎となる哲学からCSSのアプローチ、JavaScriptの扱い方まで、プログレッシブエンハンスメントの基礎を解説するシリーズを執筆した。 ^{[21] [11] [22] [23]}
• モリー・ホルツシュラッグとデイブ・シーアによる「CSS Zen Garden」は、CSSベースのデザイン戦略を指す用語として採用されるようになりました。^[24]
• Acid2およびAcid3テストの作成に携わったWeb Standards Project （WaSP）などの組織^[25]は、教育活動の基礎としてプログレッシブエンハンスメントを採用しています。
• 2006年にYahoo!のネイト・コエチリーは、ウェブデザインとブラウザサポートに対する独自のアプローチであるGraded Browser Support (GBS)の中で、プログレッシブエンハンスメントについて広範囲に言及しました。^[12]
• AOLのスティーブ・チップマンは、プログレッシブエンハンスメント（DOMスクリプトによる）をWebデザイン戦略の基礎として言及している。^[26]
• AOL の最適化チームのリーダーである David Artz は、一連の Accessible Rendering Technologies を開発し、ユーザーの設定を保存しながら「拡張機能」をオンザフライで分解する手法を発明しました。
• プログレッシブ エンハンスメントは、 WikipediaなどのMediaWikiを利用したサイトのフロント エンドで使用されます。これは、スタイルやスクリプトなしで基本的な HTML インターフェイスを使用して読み取り、ナビゲート、さらには編集できるからです。ただし、これらの機能によって拡張されています。たとえば、Wikitext エディターのツールバーは、JavaScript によって読み込まれ、操作されます。
• クリス・ハイルマンは、各ブラウザが処理できるコンテンツ（および拡張機能）のみを取得できるように、CSSをターゲット配信することの重要性について議論しました。^{[27] [28]}
• フィラメントグループのスコット・ジェル氏は「テスト駆動型プログレッシブエンハンスメント」を提案し^{[29] 、拡張機能を提供する前に（検出された}ユーザーエージェントから推測するのではなく）デバイスの機能をテストすることを推奨しました。
• Wtは、ブートストラップ中にプログレッシブ エンハンスメントを透過的に実装し、プレーン HTML から完全な Ajax まで進化する、オープン ソースのサーバー側 Web アプリケーション フレームワークです。

プログレッシブエンハンスメントの原則に従って作成されたウェブページは、本質的に、よりアクセスしやすく、^[27] 後方互換性があり、^[6]アウトリーチ性があります。これは、この戦略では、一般的にサポートされていないスクリプトや、簡単に無効化、サポートされないスクリプト（テキストベースのウェブブラウザなど）、または機密性の高い環境のコンピュータでブロックされるスクリプトによって妨げられることなく、基本的なコンテンツが常に利用可能であることが求められるためです。^[14]さらに、スパースマークアップの原則により、コンテンツを読み上げるツールがそのコンテンツを見つけやすくなります。プログレッシブエンハンスメントサイトが、テーブルレイアウトや「タグスープ」などを処理するように設計された古いツールでどの程度うまく機能するかは不明です。^[要出典]

クライアント(コンピューティング) は、基本的な HTML 以外のページの部分 (スタイル、画像など) をダウンロードするか選択でき、目的の使用に必要な部分のみをダウンロードして、読み込みを高速化し、帯域幅と電力消費を削減できます。たとえば、地理的な場所、携帯電話の信号が弱いこと、高速データ プランの使い果たしによる速度制限などによりインターネット速度が遅い場合、クライアントは、スタイル シート、スクリプト、メディア (画像など) をロードせずに、基本的な HTML のみをダウンロードすることを選択できます。これにより、サーバー側の帯域幅消費も削減されます。

対照的に、初期コンテンツが AJAX を通じて読み込まれるページでは、クライアントはコンテンツをすぐにダウンロードするのではなく、ページのコンテンツをダウンロードして表示するために JavaScript を非効率的に実行する必要があります。

検索エンジン最適化(SEO)に関する結果の改善は、プログレッシブ エンハンスメント ベースの Web デザイン戦略のもう 1 つの副作用です。基本コンテンツは常に検索エンジン スパイダーにアクセス可能であるため、プログレッシブ エンハンスメント方式で構築されたページは、検索エンジンのインデックス作成を妨げる可能性のある問題を回避できます。一方、JavaScript 実行を通じて基本ページ コンテンツをレンダリングする必要がある場合、クロールが遅くなり、非効率的になります。^{[27] [30]}

ギャレット・ダイモンのような懐疑論者の中には、特定のユーザーインターフェースの表示や動作を実現するためにJavaScriptに大きく依存している状況では、プログレッシブエンハンスメントは機能しないという懸念を表明している。^{[31]ローリー・グレイ（}ナレッジストーム^[32]の情報アーキテクト）は、検索エンジンのスパイダーにインデックスされるためには、情報ページはプログレッシブエンハンスメントを使用してコーディングする必要があると反論した。^[33]ジェフ・スターンズ（人気のFlashアプリケーションであるSWFObjectの作者）は、Flashを多用したページはプログレッシブエンハンスメントを使用してコーディングする必要があると主張した。^[34]

デザイナーのダグラス・ボウマンとボブ・スタインは、コンテンツとプレゼンテーションを絶対的に分離するという原則に疑問を呈し、むしろ両者は密接に結びついているという現実的な認識を主張した。^{[35] [15]}

• コンテンツ適応 – コンテンツを変換してデバイスの機能に適応させる
• スタイル設定されていないコンテンツのフラッシュ
• プログレッシブウェブアプリ
• セマンティック HTML
• ユニバーサルデザイン
• 控えめなJavaScript

• ブリッグス、オーウェン、チャンピオン、スティーブン、コステロ、エリック、パターソン、マシュー (2004) 『カスケーディング スタイル シート: コンテンツとプレゼンテーションの分離(第 2 版)』 サンフランシスコ: Apress。ISBN 1-59059-231 -X 
• Gustafson, Aaron (2011) Adaptive Web Design: Progressive Enhancement によるリッチなエクスペリエンスの実現チャタヌーガ: Easy Readers。ISBN 978-0-9835895-0-1。 
• キース、ジェレミー (2007) Bulletproof Ajax。バークレー: New Riders。ISBN 0-321-47266-7 
• Keith, Jeremy (2005) DOM スクリプティング: JavaScript とドキュメント オブジェクト モデルによる Web デザイン。バークレー: ED の友人。ISBN 1-59059-533-5 
• パーカー、トッド、トーランド、パティ、ジェール、スコット、コステロ・ワックス、マギー（フィラメント・グループ）（2010）プログレッシブ・エンハンスメントによるデザインPeachpit/New Riders。ISBN 978-0-321-65888-3