フラッシュの埋め込みは仕様で定められた範囲でやろうとすると、どうしてもインターネットエクスプローラの実装の壁にぶち当たってしまいます。
仕様に適合しつつ、インターネットエクスプローラでの問題点をどのようにして回避するかを考えてみました。
HTML文書にフラッシュを埋め込む場合、多くの場合は以下のようにすると思います。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=フラッシュのヴァージョン,0,0,0" height="横幅" width="高さ"><param name="movie" value="フラッシュへのURL" />(適宜他のパラメタを<param>要素で記述)<embed value="フラッシュへのURL" type="application/x-shockwave-flash" height="横幅" width="高さ"(適宜他のパラメタを属性として記述)/></object>
これは、インターネットエクスプローラがアクティヴXを利用してフラッシュプレーヤを起動するのに対し、アクティヴXをサポートしていない他のウェブブラウザはプラグインを用いて起動するようになっているからです。
IE以外のウェブブラウザ用の記述が<object>要素でなく<embed>要素となっているのは、インターネットエクスプローラが正常に表示出来なくなるからです。
実際には、<object>要素はインライン要素なので、例えば以下のようにマークアップする事となるでしょう。
<title>堀北真希ちゃんのフラッシュ</title>…<h1>堀北真希ちゃん</h1><ul class="movie"><li><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="300" width="400"><param name="movie" value="HORIKITA_Maki.swf" /><param name="autostart" value="true" /><param name="quality" value="high" /><embed src="HORIKITA_Maki.swf" type="application/x-shockwave-flash" height="300" width="400" autostart="true" quality="high" /></object></li></ul>
現状を鑑みれば、一般的なマークアップが最も安全な方法ではあります。
しかし、幾つかの問題点があります。
先ず、<embed>要素はHTML 4/XHTML 1では非推奨どころか定義さえありません。
つまり、<embed>要素を用いただけで、HTML 4/XHTML 1のいずれの仕様にも適合しない事となります。
また、現在策定中のHTML 5では、<embed>要素は晴れて合法化されますが、今度はインターネットエクスプローラ向けの<object>要素に於いて、classid属性とcodebase属性が排除されるため、依然不適合のままとなります。
もう一つは、代替コンテンツを記述出来ないと言う問題があります。
世の中の全ての環境がフラッシュを表示出来る訳ではありません。
特に、最近ではｉフォンやｉパッドがフラッシュを排除しております。
こう言った環境に対しては、せめて何の文書だか分かってもらえるように、何らかの代替コンテンツを提示する必要があります。
例えば、動画としてフラッシュを用いるのであれば、主なシーンを集めたJPEG画像などを代替のコンテンツとして提示すれば良いでしょう。
しかし、<embed>要素はマイクロソフト以外は空要素として扱っているため、代替コンテンツの記述が出来ません。
上記のように、問題点が多い記述である以上、何らかの策が必要になります。
つまり、インターネットエクスプローラにはそれ用のHTMLを、他の一般ブラウザには一般向けのHTMLをそれぞれ配信するのです。
ただ、この方法を実現するにはユーザエージェント名で判断しなければならないのですが、それを詐称している場合、間違ったHTMLを配信してしまう結果となります。
また、誰もが簡単にサーヴァ側で動作する配信プログラムを書ける訳ではありません。
その点でも問題があるでしょう。
つまり、JAVAスクリプトなどを用いて、適切なHTMLに書き直すと言うものです。
この方法の場合は、インターネットエクスプローラ固有のオブジェクトがあればそれ用の<object>要素に書き直し、そうでなければそのままにすると言う方法が考えられます。
この方法は比較的容易に出来ますが、クライアント側のスクリプト実行を禁止している場合にはどうしようもなくなってしまいます。
インターネットエクスプローラでは、条件を満たした場合のみコメントアウトを解除したりコメントアウトすると言う特殊な宣言が記述出来るようになっております。
これを用いて、IEで問題となる箇所をIEが無視出来るようにすると言う訳です。
この方法については否定的な意見も見られますが、制作者は現状最も安全且つ確実な方法だと思います。
以下、この方作を用いる事を考えてみたいと思います。
インターネットエクスプローラで導入されている条件付き注釈宣言の書式は以下のようになります。
<!--[if条件]>(内容)<![endif]-->
一般のウェブブラウザの場合、上記の記述は全体が一つの注釈宣言と解釈出来ます。
つまり、一般のウェブブラウザでは、(内容)
はコメントアウトされたものとなります。
インターネットエクスプローラ 5.0以降の場合も通常はコメントアウトされたものとなりますが、条件
が満たされた場合に限り、このコメントアウトを解いて有効なコンテンツとして取扱います。
この記述は、在来HTML及びXMLのいずれでも不適合とはならず、従ってXHTMLでも安心して記述出来ます。
例えば、条件
がインターネットエクスプローラであると言う場合には、
<!--[if IE]>(内容)<![endif]-->
と記述しますし、条件
がインターネットエクスプローラ 6でないと言う場合には、条件
の前に否定演算子 ! を付けて、
<!--[if !IE 6]>(内容)<![endif]-->
と記述します。
この場合、インターネットエクスプローラ以外及びIE 4.x以前では常にコメントアウトされるので、5.0以降で6.0を除いた全てのIEでコメントアウトが解かれる事となります。
逆に、条件が真の場合にコメントアウトしたい場合の記述は、以下のようになります。
条件が真の場合にコメントアウトしたい場合の記述は、公式には以下のような記述とされております。
<![if条件]>(内容)<![endif]>
一般のウェブブラウザの場合、上記の記述は(内容)
の前後に意味不明なマーク宣言があるものと(無理矢理)解釈出来ます。
つまり、一般のウェブブラウザでは、(内容)
は有効となります。
インターネットエクスプローラ 5.0以降の場合も通常は有効な記述となりますが、条件
が満たされた場合に限り、この二つの宣言の間の内容
をコメントアウトされたものとして取扱います。
但し、この記述は、SGMLとしてもXMLとしても不適合となるため、XHTMLで使用する事は出来ません。
公式な方法では、XHTMLで用いると不適合になってしまうため、何らかの代替が必要になります。
実はそんなに難しいものではなく、条件が真の場合にコメントアウトを解くための記述を応用すれば良いのです。
<!--[if条件の否定]><-->(内容)<!--><![endif]-->
一般のウェブブラウザの場合、上記の記述は(内容)
の前後に注釈宣言があるものと解釈出来ます。
つまり、一般のウェブブラウザでは、(内容)
は二つの注釈宣言に挟まれた有効な記述となります。
インターネットエクスプローラ 5.0以降の場合は、上記の記述は条件の否定
が満たされた場合にのみコメントアウトを解く、すなわち、条件
が否定された場合に限りコメントアウトを解くという記述となります。
結果、条件
が満たされた場合は上記の記述はコメントアウトされると言う訳です。
<--><!-->以上をまとめると、以下のようになるでしょう。
<!--[if IE]>(IEでのみ有効な内容)<![endif]--><!--[if !IE]><-->(IEでは拙い内容)<!--><![endif]-->
それでは、一般的な記述法と冒頭に出した例を書き直してみましょう。
<!--[if IE]><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=フラッシュのヴァージョン,0,0,0" height="横幅" width="高さ"><param name="movie" value="フラッシュへのURL" /><![endif]--><!--[if !IE]><--><object type="application/x-shockwave-flash" data="フラッシュへのURL" height="横幅" width="高さ"><!--><![endif]-->(適宜必要なパラメタを<param>要素で記述) (適宜代替コンテンツをここに記述)</object>
実は、HTML 4/XHTML 1の場合は、インターネットエクスプローラ向けの記述は特に条件コメントアウトにしなくても良いのですが、こうする事で、<object>要素の終了タグを共有させ、パラメタ及び代替コンテンツをどちらの場合でも有効にするようにします。
冒頭に出した例で、フラッシュが見られない場合には主要シーンを収めたJPEG画像・HORIKITA_Maki-Alt.JPGとメッセージを出すようにすると、以下のように書き直せます。
<title>堀北真希ちゃんのフラッシュ</title>…<h1>堀北真希ちゃん</h1><ul class="movie"><li><!--[if IE]><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" height="300" width="400"><param name="movie" value="HORIKITA_Maki.swf" /><![endif]--><!--[if !IE]><--><object type="application/x-shockwave-flash" data="フラッシュへのURL" height="横幅" width="高さ"><!--><![endif]--><param name="autostart" value="true" /><param name="quality" value="high" /><!-- 代替コンテンツ -->このページでは、堀北真希ちゃんの動画をフラッシュでご覧頂いておりますが、お客様の環境ではフラッシュが表示出来ません。<img alt="" src="HORIKITA_Maki-Alt.JPG" height="300" width="400" /><!-- 代替コンテンツここまで --></object></li></ul>
尚、HTML 5であれば<embed>要素を用いても良いのですが、<embed>要素では代替コンテンツの記述が出来ないため、HTML 4/XHTML 1と同じ方法にした方が良いでしょう。
制作者はフラッシュ上で動作するヴィデオゲームを制作し、それを公開する事としました。
しかし、今日ではｉパッドやニンテンドーDSなど、フラッシュが動作しない環境が増えております。
そう言った環境の方が公開ページを開いた際に、せめてどんなページであるか、何を公開しているのかを分かるようにしたかったため、<embed>要素の代わりに代替コンテンツの記述が可能な<object>要素を使いたかったのです。
ですが、<embed>要素の代わりに<object>要素を用いると、インターネットエクスプローラで不具合が生じるため、何とかこの問題を回避出来ないか摸索しておりました。
そのために立てた対策をここにまとめる事としたのです。
インターネットエクスプローラに於ける条件付き注釈宣言に対する、否定的な意見です。
制作者は正直なところ、この意見には全く賛同出来ませんが、このような意見もある事を踏まえて、本記事を書きました。
条件が真の場合にコメントアウトする条件付き注釈宣言の書き方は、こちらで知りました。
ここではインラインフレームを実現するための<object>要素がインターネットエクスプローラで適切に表示出来ない場合があるため、XHTML 1.1で廃止された<iframe>要素をIEだけに認識させる手法として提示しております。
