Progressive Enhancement とは？日本語で訳してみました。

Web Directions East 2008で、キーワードのように使われていた「Progressive Enhancement」という言葉。ちゃんと理解したいと思い、A List ApartのProgressive Enhancementに関する記事「Understanding Progressive Enhancement」を翻訳してみることにしました。
※私は翻訳者でもなんでもないので、雰囲気訳です。あしからずー。が、なるべくちゃんと伝わるように訳すことを心がけました。

原文：A List Apart: Understanding Progressive Enhancement
"Translated with the permission of A List Apart Magazine.”

Progressive Enhancementの理解（2008年10月7日）
by Aaron Gustafson

1994年以降、ウェブ開発コミュニティでは、「Graceful degradation」が声高に主張されてきた。エンジニアリング業界から受け継いだコンセプト、そのコアは、悲しくも十分に対応できないNetscape4などにクズを放ってよこす一方で、最新で最良のブラウザにフルコースの料理を振舞う、といったようなものだった。確かにそれは機能した。ただし、Tim Berners-Leeが掲げた「広くあまねくアクセシブルなウェブ」そもそものビジョンと一致するものではなかった。

10年後、数名の賢いやつらが「Graceful degradation」に疑問を持ちだし、またいくつものレベルで欠落している点あることを見いだした。コンテンツの供給力、全方位的なアクセシビリティ、モバイルブラウザの能力を鑑みて、彼らは新しいウェブ開発への取り組み方を追求した。新たな姿勢、それはコンテンツに焦点を置くこと、そして古い端末に口先だけの対応をするのではなく、それ以上をもたらすもの。

2003年のSXSWで、Steve ChampeonとNick Finckが「Inclusive Web Design For the Future.（未来のための包括的なウェブデザイン）」というプレゼンテーションを行った。その中で、彼らはウェブ開発への新たな取り組み方、考え方の青写真を明らかにした。Steveはそして、それを「Progressive Enhancement」と呼んだ。

両者には（捕らえにくいが）違いがある

もし君が「Graceful degradation」と「Progressive Enhancement」の何が違うのだと頭をかいているなら、僕はこう言うだろう。「それは、観点だ」。「Graceful degradation」も「Progressive Enhancement」もどちらも"様々な端末に載ったあらゆるブラウザで、サイトがどれだけ良く機能するか"を考えている。キーは、"どこに焦点を置いていて、それがどのようにワークフローに影響するのか"だ。

「Graceful degradation」の観点

「Graceful degradation」では、最新で最も能力の高いブラウザに向けてウェブサイトを構築することに焦点が置かれている。「古い」もしくは能力が劣ると見なされているブラウザでのテストは、たいてい構築サイクルの最終クオーターで行われ、多くの場合メジャーブラウザ（IE、Mozillaなど）のそれまでのバージョン（でのテスト）に限られている。

「Progressive Enhancement」の観点

「Progressive Enhancement」は、コンテンツに焦点を置く。違いが分かるでしょう、ブラウザに言及さえしない。

コンテンツは、ウェブサイトを作るそもそもの理由だ。あるサイトはそれを発信・普及し、あるものはそれを収集し、もしくは要求したりたくみに操る。そしてそれら全てをするものもあるが、それらはみんな、コンテンツが必須である。それこそ、「Progressive Enhancement」をより適した枠組みとする理由だ。だからこそYahoo!はこの考えを導入し、それを「Graded Browser Support」戦略にも利用した。

で、それってどういうこと？

「Progressive Enhancement」の理念を習得することは極めてシンプル。コンテンツを外から考える。コンテンツは君がスタイルやインタラクティビティを重ねる固体でできている。もし君が飴好きなら、M&Mのピーナッツを思いうかべればいい。

• Dave Stewart作　The Chocolatey Layers of Progressive Enhancement
  （Progressive Enhancement的ピーナツ画像）

まず始めにコンテンツ＝ピーナッツは、リッチでセマンティックな(X)HTMLでマークアップ。次にそのコンテンツをリッチでクリーミーなCSSでコーティング。最後は、ワンダフルに美味しいおやつにするため（そして手の中で溶けてしまわないように）JavaScriptというハードキャンディで殻を作る。

もし君が、Web Standards運動の呪文「分離、分離、分離」を熟知しているなら、このことはまったく理にかなうと思う。Web Standardsベースの構築は「a layer cake（層になったケーキ）」によく似ている。（もしくは、もっとファンシーにしたかったら「a trifle」だ。）

僕は、M&Mピーナッツのたとえが気に入っている。なぜなら、レイヤーがコンテンツを完全に覆っているから。まさに、スタイルとスクリプトがコンテンツを包み込むのと同じように。

もうすこし僕の食べ物のたとえ話に興じるなら（君がお腹を空かさなければいいんだけど）、なぜこのアプローチがより良くて、どうやってそれぞれのレイヤーがこの枠組みの中で相互に作用するのか、説明しよう。

ピーナッツ

世の中には、ピーナッツが好きな人がいる。実際は普通のピーナッツよりM&Mピーナッツの方を好む人もいる。同様に、世の中には、コンテンツだけが欲しい人（とサーチエンジンのスパイダーみたいなもの）がいる。

中には、ピーナッツの上についたチョコレートやキャンディーの層とうまく付き合えない人もいる（例えば、糖尿病患者とか）。彼らのように、モバイル端末や古いブラウザを使っている人々は、君のプリティなデザインやAjaxでできたしゃれたインターフェイスを見ることができていないかもしれない。

これらのユーザに基本的な体験を提供するために最も重要なことは、君のマークアップが、コンテンツとその周辺情報を多くのレベルで伝えていることだということを確認してほしい。

チョコレートのコーティング

次に、コンテンツを芳しくて美味なCSSのあったかいお風呂にディップする。ただ、ハードキャンディにダイブする前に、まだ考えないといけないことがある。

チョコレートで包まれたピーナッツを好む人、彼らは、ある程度のレベルのCSSはサポートしているが、優れたJavaScriptのサポートはされていないような中間に位置するユーザに似ている。もしくは、かれらはITセキュリティ担当者がちょっとしたJavsScript恐怖症になっているような会社で働いているかもしれない。そうなると、JavaScriptはまったく機能していないだろう。

Goober（チョコでコーティングされたビーナッツバー）の傾向があろうが、Goober限定であろうが、彼らも同様に満たされる権利がある。
コンテンツにスタイルを付与するための「Progressive Enhancement」な方法がいくつかあって、それらがこのシリーズの2個目の記事のトピックスになります。

ハードキャンディの殻

最後に、やっと構成にJavsScriptを入れることができる。JavaScriptは、リッチなインタラクションの可能性と同様に、コンテンツと表現（プレゼンテーション）を相互に作用させる操作能力を提供する。JavaScriptは、サイトが「体験」を勝ち得る、本当の原材料なのだ。

M&Mがどうやってハードキャンディーに殻を付けるのか定かではないけれど（おそらくもう一回ディップするとかだろう）、JavaScriptベースの機能とインタラクティビティをウェブサイトに追加することは、「Progressive Enhancement」の考えを持ってすると、難しいものではない。そして、M&Mにいろいろな色があるように、JavaScriptによる体験は、利用するブラウザや端末の能力によって違ってくるだろう。

多分知っていると思うけれど、この種の開発は「unobtrusive JavaScript（出しゃばらないJavaScript）」と呼ばれている。これらのテクニックと実践方法を、このシリーズの3つ目で最後になる記事で紹介する予定だ。

全部まとめて

実際、一度そのコンセプトを理解して実践していくと「Progressive Enhancement」的な構築は、とても（おそらくキャンディーを作るよりも）シンプルだ。このシリーズの次の2つの記事によって、あなたはCSSとJavaScriptがもたらす「Progressive Enhancement」のスキルを磨くことができるでしょう。また、どのように理念がコードに形を変えるのかを紹介します。

////// 翻訳終わり //////