今回は、allWebクリエイター塾で HTML5マークアップ講座、ゼロから学ぶJavaScript講座を担当いただいています羽田野太巳さんから、「HTML5を使うためのプログレッシブエンハンスメント」について紹介していただきました。
プログレッシブエンハンスメントと言う言葉は、CSS3のサポートが違うブラウザのシェアが横並びになった際(日本では2008年頃)に話題になった言葉で、WebデザイナーにとってはプログレッシブエンハンスメントというとCSS3だけの違いを言う。と間違った認識を持っておられる人もいるようで、今回は再度「プログレッシブエンハンスメントとは何か？」とキチンと認識していただくため、そしてまだ新しいHTML5を利用するにあたってのプログレッシブエンハンスメントについてご紹介いただきました。
羽田野さんは、「Progressive Enhancement それは違いを受け入れること」と言います。紙などの媒体はどれも同じだけれど、ウェブの場合は違う事が当然でそれを受け入れる事が前提の考え方だと紹介いただきました。
以前、Web Directions East で来日したJohn Allsopp氏もキチンとしたHTMLであればそれだけで十分に情報を伝える事ができるので極論をいえばCSSは要らず、それより情報にアクセスできる事が最も重要だと話された事がありました。
そして、Progressive Enhancement の他に Graceful Degradation、Regressive Enhancementなどという考え方があるという事を紹介いただきました。
2009年4月5日に行われたSwapSkillsでも Progressive Enhancement と Graceful Degradation については見ている方向（目線）が違うという事で立っている場所は同じという事を菊池さんから紹介をいただいた事もあります。
繰り返しになりますが、冒頭でも紹介した様にプログレッシブエンハンスメントはCSSだけの考え方ではありません。
みなさんもご承知の様に、JavaScriptもブラウザ対応が統一化されていなく、そもそもJavaScriptを利用していないユーザーも存在し、そういったユーザーにもキチンとアクセスできるようにするという考えがプログレッシブエンハンスメントで最も重要な意味と言えます。
では、実際にはどのように制作するべきなのかをいくつか具体的な例をご紹介いただきましたので、そのひとつを以下でご紹介いたします。
例として出していただいたのは、HTML5のビデオ要素です。HTML5の新要素も同様にブラウザごと・バージョンごとにサポートが異なります。
記述方法は以下になります。
このように新しいものだけにサポートするだけでなく、どのブラウザでも閲覧できるように配慮した制作の考え方がプログレッシブエンハンスメントです。
今回は概念だけでなく、実際のマークアップの例を出していただいたのでとてもわかりやすく、参加者は真剣にメモしていました。
テクニックなども重要ですが、実はユーザーの事を考えた愛情のあるマークアップや制作仕様が重要なんだと理解していただけたのではないかと思います。
