同一のマークアップ:

、

、および

の使用

本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。
なお、本記事中の Internet Explorer 9 は、元記事執筆当時の ( 正式リリース以前の) ものについて記載しておりますのでご了承ください。

【元記事】 Same Markup: Using <canvas>, <audio>, and <video> (2010/9/03 7:07 PM)

これまでいくつかのブログで、Internet Explorer 9 における "同一のマークアップ" の実現を繰り返し説明してきました。"同一のマークアップ" を実現するには、IE9 が適切な機能をサポートし、同じ HTML、JavaScript、CSS が "そのまま" 他のブラウザーと同じように動作する必要があります。IE9 は "同一のマークアップ" の実現に向けての貢献の 1 つとして、HTML5 の <canvas> 要素、<audio> 要素、<video> 要素に対する一貫したサポートを提供しています。これらは Platform Preview 3 で導入されましたが、その後も更新ごとに改良されています。

同一のマークアップに関する最初の記事 (英語) では、同一マークアップの実現が一筋縄ではいかないことを説明しました。同一のマークアップを実現するには、まず各ブラウザーが、適正な機能と適正な動作をサポートする必要があります。また Web 開発者は、残念ながらブラウザー間の違いが残っている部分について、それを解決するためのコードを作成する役割を担っています。Web 開発者にとって、ブラウザーの違いに対応する際に最も重要となるのは、ブラウザーの検出ではなく機能の検出を行うことです。そのためこの記事では、<canvas>、<audio>、<video> について機能検出を使用する方法を概説します。

HTML マークアップからサポートを検出

他の機能とは異なり、<canvas>、<audio>、<video> のサポートは、HTML マークアップから直接検出できます。つまり、目的の要素は単純にそのまま使用し、そこに、要素をサポートしていないブラウザー向けの代替コンテンツを挿入します。サポートを備えているブラウザーは、こうした代替コンテンツをユーザーに対して表示せず、<canvas>、<audio>、<video> の要素自体だけを表示します。

 <!-- Example 1:  Basic <canvas> fallback --> <canvas> This text only displays in browsers without canvas support. </canvas>

 <!-- Example 2:  Basic <audio> fallback --> <audio> This text only displays in browsers without audio support. </audio>

 <!-- Example 3:  Basic <video> fallback --> <video> This text only displays in browsers without video support. </video>

ただし、代替コンテンツは、視覚的に隠されるだけであることに注意してください。これらの要素をサポートするブラウザーでも、代替コンテンツ内の <script> ブロックとその他の項目は常に実行されます。

 <!-- Example 4:  <script> always executes in fallback content --> <canvas> <script> alert("This always runs, even when canvas is supported."); </script> </canvas>

もちろん、代替コンテンツも "有用" である必要があります。具体的に何が "有用" なのかは、どのような処理をしようとしているかによって異なります。アップグレードのためのダウンロードにユーザーを導くのも 1 つの方策ではありますが、ほとんどの場合、何らかの別の方法でコンテンツを配信するのがエンドユーザーにとっては利便性が高いと言えるでしょう。たとえば、<canvas> にほとんど変化のないイメージを描画している場合は、サーバー側で生成したイメージに切り替えることができます。より優れた代替方法としては、既存の Web テクノロジの上で <canvas> を実装するフレームワークの導入や、広く普及しているプラグインの使用などが考えられます。

<audio> 要素と <video> 要素に関しては、何らかのメディア プレーヤーを利用する、または Flash や Silverlight といった広く普及したテクノロジの上に構築されたアプリケーションを利用するというように、プラグインによる代替手段の選択肢が多くあります。少なくとも、リンクを提供しておけばユーザーはファイルをダウンロードし、ローカルで再生することができます。通常 <object> タグは、選択したプラグインによって異なるいくつかのパラメーターを必要としますが、以下の例に、プラグインを使った代替手段を簡単に示します。

 <!-- Example 5:  Provide useful fallback content for <audio> --> <audio src="myaudio"> <object type="audio-plugin-mime-type" data="myaudio"> <a href="myaudio">Download the audio file</a> </object> </audio>

 <!-- Example 6:  Provide useful fallback content for <video> --> <video src="myvideo"> <object type="video-plugin-mime-type" data="myvideo"> <a href="myvideo">Download the video file</a> </object> </video>

スクリプトからサポートを検出

<canvas>、<audio>、<video> のサポートは、HTML マークアップの他にスクリプトからも検出できます。この検出はさまざまな方法で実行できますが、最も簡単な方法の 1 つは、Window オブジェクトから該当のインターフェイス オブジェクトがあるかどうかを確認することです。

 // Example 7:  Simple feature detection for <canvas> if(window.HTMLCanvasElement) { // Code requiring canvas support }

 // Example 8:  Simple feature detection for <audio> if(window.HTMLAudioElement) { // Code requiring audio support }

 // Example 9:  Simple feature detection for <video> if(window.HTMLVideoElement) { // Code requiring video support }

<audio> と <video> を検出する別の方法の 1 つとして、動的に作成される <audio> 要素または <video> 要素に canPlayType メソッドがあるかどうかを確認するという方法があります。要素を動的に作成する方法は多くのフレームワークで使用されており、サポートされているコーデックをテストするために canPlayType メソッドを使用する場合にも広く使われています (これについては今後の記事で扱います)。<audio> または <video> がサポートされているかどうかをテストしたいだけなら、上のサンプル 8 と 9 で説明した方法がよりわかりやすく、効果も同じです。

 // Example 10:  Alternate feature detection for <audio> if(document.createElement("audio").canPlayType) { // Code requiring audio support }

 // Example 11:  Alternate feature detection for <video> if(document.createElement("video").canPlayType) { // Code requiring video support }

<canvas> のサポートの検出でも、同様の代替方法を使用できます。この場合、ほとんどのフレームワークは getContext メソッドの存在を確認することで対応しています。レンダリングのコンテキストを取得するために <canvas> でこのメソッドが必要な場合はこの方法が便利です。いくつかのモバイル ブラウザーでは、誤検出を回避するために、コンテキストを実際に取得できるかどうかの確認も追加で実行する必要があります (この問題を指摘してくれた Paul Irish に感謝します)。

 // Example 12:  Alternate feature detection for <canvas> var canvas = document.createElement("canvas"); if(canvas.getContext && canvas.getContext("2d")) { // Code requiring canvas support }

今後のステップ

今まで、ブラウザーの検出を使用して <canvas>、<audio>、<video> の使用を決定していた場合は、これを機会にブラウザー検出ではなく機能検出の使用に切り替えることをお勧めします。また、コンテンツが Quirks モードで表示されないよう、ページの先頭で DOCTYPE (<!DOCTYPE html> など) を指定することも必要です。IE9 では、互換性のために Quirks モードが使用されると、<canvas> 要素、<audio> 要素、<video> 要素は機能しません。

サポートされているコーデックを検出する方法、および <audio> 要素と <video> 要素を使用して複数のソースを指定する方法については、今後の記事で説明する予定です。

Tony Ross
プログラム マネージャー

9/3 編集 - 第 2 段落に以前のブログ記事へのリンクを追加。
9/9 編集 – Paul Irish からのフィードバックを基にサンプル 12 を編集。