Progressive Enhancementの実践と普及にむけて
前回は実装におけるGraceful DegradationとProgressice Enhancementの違いについて説明しました。もうひとつ、Progressive Enhancementな例をお見せして、このシリーズを終わらせたいと思います。
Flashの埋め込みもProgressive Enhancementなやり方で
Flashの埋め込みについても、JavaScriptを用いた方法が盛んに行われているように思います。しかし、このやり方ではスクリプトが無効な環境でFlashが表示されません。また代替内容があったとしても「Flashプレーヤーが必要です」というメッセージがでるものが多く、適切な使われ方がされていないように思います。
動きを与えるムービーや動画など、代替となるコンテンツがそもそも存在し得ないものであれば仕方が無いかもしれません。しかし、サイトのナビゲーションがFlashで構成されている場合などは、適切な代替情報を指定する必要があります。
ナビゲーションとしてFlashが使われる場合、最低限必要なのは代替となるナビゲーションです。
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/products">製品一覧</a></li>
<li><a href="/ir">IR情報</a></li>
<li><a href="/recruit">採用情報</a></li>
<li><a href="/inquiry">お問い合わせ</a></li>
</ul>ここでは単純なリンクのリストを書いていますが、もちろん画像などを利用することもできます。
さて、Flashなどの埋め込みコンテンツは、object要素で記述します。img要素と違い、中に代替情報を記述することができます。
<object type="application/x-shockwave-flash"
data="flash.swf" width="780" height="250">
<param name="movie" value="flash.swf" />
<!-- 代替情報 -->
</object>param要素でファイル名が重複していますが、これはInternet Explorerで認識させるための指定です。
Flashを利用できる環境ではFlashを読み込ませたいので、先ほど用意したナビゲーションリストを、このobject要素で囲ってしまいましょう。
<object class="flash" type="application/x-shockwave-flash"
data="flash.swf" width="780" height="250">
<param name="movie" value="flash.swf" />
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/products">製品一覧</a></li>
<li><a href="/ir">IR情報</a></li>
<li><a href="/recruit">採用情報</a></li>
<li><a href="/inquiry">お問い合わせ</a></li>
</ul>
</object>これで、JavaScriptに頼らず、またembedなど非標準なやり方ではないFlashの埋め込みを実現できます。
しかしながら、Flashファイルが何かの理由でロードできない場合などは、きちんとフォールバックされる保証がありません。構築前に、そもそもFlashにナビゲーションを含む必要があるか考えることも大切でしょう。
JavaScriptによる処理の重ね方
Flashの埋め込みにJavaScriptが使われる理由のひとつに、Internet Explorerのプラグイン特許問題によって起こった修正を回避するものがあります。しかしこの問題についてはパッチがWindows Updateで提供されたため、今日ではアクティベートを目的としてJavaScriptを利用する必要はありません。
もうひとつの理由は、Flash Playerのバージョンをコントロールしたいというものです。これはHTMLからでは制御できないため、JavaScriptを利用する必要があります。しかしながら、全てをJavaScriptで完結させる必要はありません。HTMLはそのままに、必要な部分をJavaScriptで補ってあげればよいのです。
昨年公開しましたMJLには、先ほど書いたマークアップを生かしつつも、Flashのバージョンを指定してロードさせる機能が備わっています。
MJL本体と実行ファイル (run.js) をscript要素より読み込み、実行ファイルに次のように記述してください。
MJL.event.add(window, "load", function(event) {
MJL.enable.flash("flash", { version: 9 });
}, false);バージョン8以下のFlash Playerを導入したコンテンツには、代替情報が提供されることになります。
param要素で指定することにより、Flashコンテンツごとに指定することも可能です。
<object type="application/x-shockwave-flash" data="...">
<param name="movie" value="..." />
<param name="version" value="9" />
<!-- 代替情報 -->
</object>対象外のバージョンを利用する環境に対して、メッセージを提供することも可能です。
MJL.enable.flash("flash", { version: 9, minVerMsg: '<p>（メッセージ）</p>' });<object type="application/x-shockwave-flash" data="...">
<param name="movie" value="..." />
<param name="version" value="9" />
<param name="minVerMsg" value="&lt;p&gt;（メッセージ）&lt;/p&gt;" />
<!-- 代替情報 -->
</object>今回はMJLを利用しましたが、広く利用されているSWFObject（バージョン2以降）でも同様に、Progressive Enhancementなやり方でFlashを埋め込むことができます。
Progressive Enhancementが受け入れられるためには
Graceful DegradationとProgressive Enhancementを比べると、Progressive Enhancementの方が考え方としては好まれるでしょう。
しかし、CSSなど見た目に関するEnhancementは、「どのブラウザーでも同じ見た目で」という要件や制作期間の制限により、Web制作業ではなかなか手を出しづらいかもしれません。少しずつ、閲覧環境が多様であることの周知をしていく必要があるように思います。
この点、DOMスクリプティングにおいては比較的容易に行うことができると思っています。MJLを例にとってみますと、策定中ですが既に実用段階にあるSelectors APIやgetElementsByClassNameメソッドを利用することで、APIを実装するブラウザーでのパフォーマンス向上を行っています。Progressive Enhancementといえるかどうかは分かりませんが、高速化や内部処理の簡略化においては、新しい機能を取り込むことへの抵抗は、CSSほどではないでしょう。
なかなか難しいと思われるのが、Webアプリケーションでの実践です。JavaScriptありきで開発されることが多いため、HTMLにJavaScriptを重ねるという開発手法はとられていないからです。
しかしながら、不可能ではないと考える人も大勢おり、その中の一人であるJeremy Keithは「Hijax」という手法を提唱しています。彼が2006年のXTechで発表したHijaxについてのスライドを読むと、“Plan for Ajax from the start. Implement Ajax at the end.”という考え方を核に、WebアプリケーションでのProgressive Enhancementの実践についてまとめられています。発展途上ではありますが、WAI-ARIAなどWebアプリケーションのアクセシビリティについて需要が高まるであろう今後を考え、取り組んでいくことが必要でしょう。