将来を見据えた、新たなHTML内SWF埋め込み用コードの考察

レガシーコードでは、SWFが表示できなくなる!?

みなさん、HTMLファイル内にSWFファイルを埋め込む際にどのようなコードを記述していますか？　おそらく、多くの方が、Flashオーサリングツールでパブリッシュした時に書き出される以下のようなコード（レガシーコード）を使っていると思います。

レガシーコードの例

このレガシーコードは、さまざまな種類やバージョンのWebブラウザで適切にSWFが表示されるようにと、Webクリエイターたちが各Webブラウザの機能やW3C勧告への対応度を踏まえて試行錯誤した結果、到達したコードです。レガシーコードの内容を簡単に説明しますと、赤色の部分（1～４行、６部分）の外側のobjectタグと直下のparamタグがInternet Explorer（IE）用、青色（５行目）のembedタグがIE以外のWebブラウザ用のコードです。

このような２段構えの構造になっている理由は、IE以外のWebブラウザではobjectタグのclassid属性などのサポートが不十分なため、SWFを表示する際に必要な情報を取得できないからです。そこで、objectタグの内側に、IE以外のWebブラウザ用でもちゃんと解釈できるembedタグを入れ子にして置いているわけです。(X)HTMLの仕様では、解釈できないobjectタグがある場合、そのタグの内側へと代替コンテンツを求めるようになっています。レガシーコードの場合、IE以外のWebブラウザは外側のobjectタグを解釈できないため、その代わりに内側にあるembedタグを解釈しようとします。

広く使われてきたレガシーコードですが、実は以下のような問題点があり、レガシーコードを使い続けた場合、将来的には一部のWebブラウザでSWFを表示できなくなる可能性があるのです。

• (X)HTMLの仕様において、embedタグは「deprecated（廃止予定）」とされている。そのため、将来リリースされるWebブラウザでは、embedタグをサポートしなくなる可能性がある。
• 2004年頃に発生したEolas特許問題のため（SWFにマウスクリックを伝えるのに、1クリック余計に必要になる。「ActiveX コントロールのアクティブ化」と呼ばれている問題）、新しいSWF表示方法が必要となってきている。

本記事では、1つ目の問題の解決策として、embedタグを使わない方法を紹介します。2つ目のEolas特許問題については、いずれ機会をみて記事にしたいと思います。

MEMO：Eolas特許問題に関しては、マイクロソフトがEolasから特許のライセンスを受けているため、2008年4月のIE累積アップデート、あるいはVista SP1やXP SP3などのIEでは解決されています。

IE以外のWebブラウザ用にもobjectタグを使う

レガシーコードでは、IE用のコードとして、objectタグを使用しています。そもそも、objectタグは、HTML中に文字以外のメディアオブジェクト（SWF、QuickTime、Real Player、そして画像やiframeまでも）を埋め込むための汎用的なタグです。つまり、objectタグを使うことが、(X)HTMLの仕様に則ったSWF表示のさせ方なのです。そして、あまり知られていませんが、IE以外のWebブラウザ用でも、objectタグのみでSWFを表示させることは可能なのです。

ただし、前述した通り、IEとそれ以外のWebブラウザでは、objectタグに使える属性への対応度が異なるため、1つのobjectタグですべての Webブラウザに対応することは困難です（方法はありますが、十分な検証がされていません。記事後半参照）。そのため、IE以外のWebブラウザ用の objectタグを、レガシーコードのように入れ子に記述する必要があります。その記述方法として、注目されているのが、「SWFObject」のコードです。SWFObject は、JavaScriptを使って動的にSWFを読み込んで表示させるライブラリですが、同サイトでは静的な手法として、objectタグのみを使ったコードも提案しています。SWFObjectのサイトで紹介されているコードを元にしたのが、以下のコードです。

MEMO：SWFObjectの詳細は、「SWFObjectを使用したJavaScript Flash Playerの検出と埋め込み」をご覧ください。

objectタグのみを使ったSWF埋め込みコード

上記のコードでは、IEの独自機能である「Conditional Comments（条件付きコメント）」を使って、入れ子のobjectタグをIEから隠しています（「<!--[if !IE]>-->～<!--<![endif]-->」の部分）。実際にIEが解釈するコードは、以下の青色（１～２行、６、１０行目）の部分になります。

IEが解釈するコード部分

では、IE以外のWebブラウザでは、どのように解釈するかというと。レガシーコードと同様に、外側のobjectタグではSWFを表示するのに十分なパラメータがないので、代替コンテンツとして内側のobjectタグを解釈しに行きます。また、Conditional Commentsの部分はコメントとして見なされるので、結果として、以下の赤色（４、６、８行目）の部分になります。

IE以外のWebブラウザが解釈するコード部分

このobjectタグのみを使った新しいコードは、W3Cの(X)HTML仕様書に則ったメディアの表示のさせ方なので、今後、業界標準になっていくと思います。実際、Dreamweaver CS4パブリックベータでは、SWFを表示させるのにこのコードが使われるようになっています。

Safari 3での問題

実は、上記の新しいコードでは、Safari 3で問題が発生することがあります。Safari 3は、objectタグのclassid属性にSWF表示用のclassidが書かれている場合、SWFを表示するためのタグとして解釈してしまうのです。そのため、外側のobjectタグと直下（子要素）のparamタグの情報をもとにSWFがレンダリングされ、緑色部分は外側objectタグの代替コンテンツとみなされ、レンダリングされません。つまり、　<param name="FlashVars" value="value" /> の部分が無視されてしまうのです。(X)HTMLの仕様では、objectタグの直接の子要素のparamタグしか解釈してはならないことになっており、これは仕様に則った動作です。

Safari 3では、緑色（３～９行目）の部分は代替コンテンツとみなされ、<param name="FlashVars" value="value" /> の部分が、内側のobjectタグの孫要素となり、無視されてしまう

これでは、SWFを単に表示することはできても、その表示方法を指定するパラメータをSafari 3に渡すことができません。その解決手段としては、以下のように「FlashVarsなど、必要な物は両方に書いてしまう」方法があります。コードが冗長になりますが、確実な方法といえます。

FlashVarsなど、表示方法を指定するパラメータを使用する場合は、Safari 3でもレンダリングできるように両方に記述しておく

ちなみに、今まで示したコードでは、Conditional CommentsでIE向けとそれ以外のWebブラウザを分けていましたが、以下のように1つのobjectタグだけで表示する方法もあります。ただし、この方法は十分な検証が行われていないため、古いWebブラウザや特定の環境では表示できない可能性があるので注意が必要です。

1つのobjectタグだけで表示する方法。十分な検証が行われていないため、注意が必要

まとめ

• embedタグは廃止予定なので、今後はembedタグに依存したコードは書かないようにしよう。
• objectタグのみを使った新しいコードを使うようにしよう。これは、W3Cの仕様に則ったメディアの表示のさせ方なので、今後はこのコードが主流になっていくでしょう。
• 新しいコードは、Safari 3で問題が発生することがあるので注意が必要。FlashVarsなど、表示方法を指定するパラメータを使用する場合は、Safari 3でもレンダリングできるように両方に記述しておくようにしよう