こんにちは
フェノメナ技術担当のレミです。
今日はGracefull Degradation (グレイスフル デグラデーション) と Progressive Enhancement (プログレッシブ エンハンスメント)、という概念について紹介させて頂きたいと思います。
英語でウェブ技術に関する記事を読む方は、よく見たことのある言葉かと思います。
この二つについての定義は様々であり、困難なことだという印象を持った方は少なくないでしょう。でも実は、非常に簡単なことです。
Gracefull DegradationとProgressive Enhancementの最もポイントとなる要素をわかりやすく説明させて頂きます。
ユーザ側のウェブ環境を問わず、あるウェブサイトやウェブサービスをなるべく多くの人に不自由なく使っていただけるためには、二つのアプローチが考えられます。
1. 最新のブラウザを基準にウェブサイト・アプリを作り、その上で、より古いブラウザという環境でも、なんとか使える様に、コードを追加したり加工したりする。それをGracefull Degradationと呼びます。
2. 逆に、対応したい最も古いブラウザを基準にウェブサイト・アプリを作り、それが出来上がった上で、より最新のブラウザでしか使えない、プラスαの機能を追加したり、あるいは同じ機能をよりモダンなコードの書き方が可能なときに限ってパーフォーマンスをあげたりする。それをProgressive Enhancementと呼びます。
例えば、HTML5を用いたウェブサイトを作ってから、HTML5対応ではないブラウザでも不具合なく動くように工夫するということもよくあるかと思います。それはGracefull Degradationになりますね。
HTMLタグによっては、Gracefull Degradationができるようになっています。例えば、HTML5の<video>タグを使いたいかたは、以下のサンプルを見てください。
<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities" />
</object>
</video>
この様に、MP4とOGVファイルが使えない場合は、Flashが再生され、Flashもダメな場合には、画像が表示される様になっています。