JavaScript Archive

以下のソースを追加するだけでFirefox、Safari、Chrome等の高水準ブラウザはもちろん、IE6～IE9、そしてiPhone、androidでも閲覧が可能になります。

<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

HTML5から追加されたvideo,audio要素による動画配信はFlashの代替手段として注目されていましたが、ブラウザごとに採用されているコーデックの違いにより現実的な実装は難しいとされていました。

「html5media」はvideo要素に対応していないブラウザを判別して、「flowplayer」を利用したFlash動画プレイヤーに切り替えてくれます。対応の可否を自動で判別し、互換性を担保してくれるのはブラウザごとの対応を考えなくて済むので便利ですね。

html5mediaのダウンロードはこちら

デモはこちら

「これからのWebのあり方について考えてみた。」で"コンテンツ"の役割を、「CSSのあり方について考えてみた。」では"見栄え"の役割を考えてきました。そして、最後に「JavaScipt」による"ふるまい"について考えていきたいと思います。

クリエイティビティの可能性

Webサイト制作におけるJavaSciptというのは、いわゆる「DOM」と呼ばれるAPIを利用して簡単なギミックを実装する程度のもので、リッチなインタラクションを提供するというのにはほど遠いものでした。しかし、JavaScriptエンジンの高速化が進み、表現力の向上が進展すれば、より"ふるまい"としてのクリエイティビティは格段に進化することになるでしょう。「これからのWebのあり方について考えてみた。」で述べた通り、JavaScriptでネイティブアプリケーションと同等のクオリティを発揮するということは、それだけの「体験」を提供できるということを意味します。Flashを代表するリッチコンテンツ専用の規格と大きく異なる点は、Web標準に準拠した上でリッチなインタラクションと表現力を発揮するということです。

【JavaScriptエンジンの高速化】

JavaScriptは2000年頃に、ECMAScriptの標準化作業に伴ってバージョンアップをするという動きがあり、去年の12月に「JavaScipt 2.0」の仕様策定が完了しました。GoogleやAppleを初めとする代表的なベンダがプロトタイプとして実装を行い、仕様の最終確認、相互の互換性、旧バージョンとの互換性などの検証を経ているので、ブラウザ間の非互換性が大きく改善されると思われます。その他にも「JSON」のサポートが強化され、セキュリティの強化が行われているそうです。

そして最も注目すべきなのは、JavaSciptエンジンの高速化による表現力の向上でしょう。先に述べた通り、Microsoft、Yahoo!、Adobe、Mozilla、Opera、Googleは標準化プロジェクトに取り組みつつも、JavaScriptエンジンの高速化にも余念がなく、事実上の「JavaScript高速化競争」が起きています。AppleはSafari 4で「Nitoro」というエンジンを実装し、Operaは「Carakan」というエンジンを実装中、Firefoxは「TraceMonkey」というエンジンを実装中、そしてGoogle Chromeは「V8」と呼ばれる独自のエンジンを搭載し、その性能の高さは実証されています。

【新しいプラットフォーム】

次世代プラットフォームとして最近注目を集めているのは「WebKit」です。WebKitはすでにHTML5の機能を取り込んでいて、WebブラウザのGoogle CromeやSafari、iPhoneでも採用されているし、Symbian陣営もWebKit搭載に動いているそうです。これが何を意味するかというと、これからはPCがWeb標準を背負ってきた時代は終わり、他のプラットフォームが主流になる可能性すらあるということを示唆しています。

表現力やWebアプリケーション開発フレームワークが貧弱であるHTMLの代わりに、「Adobe AIR」や「Silverlight」、「Flash」などが活躍しているわけですが、オーディオやビデオといったマルチメディア関連機能、Webアプリケーション向け機能が充実しているHTML5がWebKitによって普及すれば、それらの技術は不要になるかもしれません。単純に"ふるまい"という意味でも、「CSS 3」の表現力向上やJavaSciptエンジンの高速化などの発展が進めば、セマンティックでありながらクリエイティビティ溢れるコンテンツを作ることも夢ではありません。

コンテンツと表現の相互作用

では、Web標準に準拠しているということにはどのような意味があるのでしょうか。HTMLが骨格、CSSが外装であるなら、JavaScriptは「体験」を提供します。過去、ブラウザベンダの独自拡張が相次ぎ、意味のないアニメーションやUIを実装したサイトが乱立した関係で、JavaScriptによるインタラクションを苦手とするユーザーは少なくありません。今でもそのようなWebサイトはありますが、それは体験を与えているのではなく、制作者側のエゴをユーザーに押し付けているに過ぎないのです。

体験というのは、ユーザーのニーズや利用状況を把握し、心理状態を理解するという「人間中心設計」と呼ばれるアプローチを行い、その上でどのような体験を与えれば響くのかということを考えて導きだされるものです。これはWebサイト全体を設計する際に必要になる行程ですが、狭義な意味での体験として、いわゆる「ユーザインタフェース(以下、UI)」にも同じことがいえると思います。例えば大型マーケットなどにあるエスカレーターは、ユーザーのニーズや利用状況を把握した上で設置されています。もしもエスカレーターが「動く階段」として飾られているだけなら誰にとっても意味のあるものに成り得るでしょう。これはあまりに極端ですが、そのようなUIが数年前のWeb世界では当たり前のように存在していたのです。

そして、エスカレーターの素晴らしいところは仮に動かなくなっても「人を移動させる」という目的をしっかりと果たすということです。そうしたコンテンツと表現を相互に作用させる操作能力を提供するのがJavaScriptのもう一つの役割であり、Web標準に準拠するということの本質的な意味です。Progressive Enhancementという考え方に基づいて言い換えれば、JavaScriptが機能しなくてもユーザーがWebサイトを利用できるような配慮をしつつも、より快適なUIを提供するということになります。

JavaScriptの実際

CSS以上に利用環境に依存してしまうJavaScriptですが、実はずいぶん前から「unobtrusive JavaScript(出しゃばらないJavaScript)」という考え方がありました。HTMLの要素などに直接JavaSciptを記述せず、外部JSからHTMLソース上の要素に結びつけるという手法です。これによってHTMLの保守性が高まる、JavaSciptがオフのブラウザでも動作する、再利用が容易になるというメリットがあり、ブラウザ対応の振り分けも容易になります。つまり、JSをオフにしているユーザーには最低限のインタラクションを提供し、高水準のブラウザを利用しているユーザーや高機能デバイスを利用するユーザーには、よりリッチなインタラクションを提供するということが可能になるのです。

「Graceful DegradationとProgressive Enhancementの実践 | Web標準Blog」で、オンラインショッピングの決済画面などによくある「印刷するボタン」をProgressive Enhancementなアプローチで実装するという事例があるので、引用します(この辺りは他力本願で申し訳ありません；)。

Progressive Enhancementは、最低限提供したい機能や目的を「ベースライン」として設定します。印刷リンクは「ページを印刷したいというユーザーのニーズに答える」ことが目的ですから、まず「ページの印刷について言及する」ことをベースラインとしましょう。

まずは、最低限提供するべき内容を定めています。ここでは以下のような形で「印刷して保管できます」ということを文章で伝えています。

<p id="printthis">Thank you for your order.
 Please print this page for your records.</p>

では、次に実現したいことをどのように実装するのでしょうか。以下のようなスクリプトで、ブラウザが必要な機能を満たすときのみ、印刷ボタンが表示されるようにしています。

<p id="printthis">Thank you for your order.
 Please print this page for your records.</p>
<script type="text/javascript">
(function(){
  if(document.getElementById){
    var pt = document.getElementById('printthis');
    if(pt && typeof window.print === 'function'){
      var but = document.createElement('input');
      but.setAttribute('type','button');
      but.setAttribute('value','Print this now');
      but.onclick = function(){
        window.print();
      };
      pt.appendChild(but);
    }
  }
})();

</script>

この手法は、印刷リンク(ボタン)だけではなく、文字の拡大縮小インターフェースなどにも利用することができるでしょう。まずブラウザーの文字サイズ変更機能について言及し、インターフェースをあとからJavaScriptで組みこむのです。

矢倉さんが述べている通り、まずはその機能が本当に必要なのか？を言及する必要があります。「コンテンツと表現の相互作用」で述べた通り、「体験」とは必要なことだけを考えていれば良いということではなく、提供しなくて良いことも明確にした上で、どのような体験を与えれば響くのかを考えることに意味があります。つまり、制作者側がやりたいだけのエゴを押しつけるのではなく、ユーザーを理解した上で必要な機能を提供するということが大切なのです。ユーザーが理解出来ているのなら、「何が必要か」だけではなく「何が不要であるか」も明確になるはずだからです。

最後に

3回に渡って「○○のあり方について考えてみた。」について自分なりに考察してきましたが、ただインプットを行うのと、アウトプットをするためにインプットするのとでは、全く意味が異なるということが分かりました。前者はインプットすることが目的なので、一時的に満足はするもののすぐに忘れてしまいます。後者はアウトプットをするためにインプットを行うので、一度頭の中で情報を整理し、まとめるという作業が必要になります。色々な記事を参考にしながら書かせていただきましたが、自分の血肉となった感じがしています。今後も定期的に更新をしていこうと思いますので、よろしくお願いいたします。