ブログ記事にFlashを貼る際、SEO対策をしてほしいと言われたので、 SEO対策TIPS object要素 を参考にしてみました。
<object data="swfファイル" type="application/x-shockwave-flash" height="100" width="100"> <param name="movie" value="swfファイル">
代替テキスト
</object>
これと同じようにすればいいんだろうと、DWが書き出したソースに代替テキストだけ突っ込んでみたらFirefoxでFlashと代替テキスト両方が表示されてしまう。
(問題のソースは以下のもの)
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="780" height="297" id="title">
<param name="movie" value="title.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="title.swf" quality="high" bgcolor="#FFFFFF"
width="780" height="297" name="title"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
<h1>テキスト</h1>
</object>
どこが悪いか分かります?
どうにもならないのでMixiのコミュで聞いたら「codebaseはIE向けなのでFirefoxでobjectタグが無効になるせいだ」と教えていただきました。
objectタグのことを少し調べてみたら、 object要素 -- オブジェクトの埋め込み にこんな記述が。
codebase=基準となるURIを指定します。data属性、classid属性、archive 属性に相対URIが指定されたときは、この属性のURIを基準に解決します。デフォルト値はHTML文書の基本URIです。
オブジェクトを実行することに成功したら、object要素の中身は無視されます。(param 要素とmap 要素を除く。)そうでないなら、object要素の中身を表示します。object要素を入れ子にしておけば、「一番外側のオブジェクトを実行→ 失敗したらその内側のオブジェクトを実行→さらに失敗したら…」といった動作が可能になります。
次の例では、まずMPEGファイルの再生を試み、再生できなかったらGIFアニメーションを表示、それも表示できなかったら「宇宙から見た地球」と表示します。
<p>
<object data="earth.mpg" type="video/mpeg">
<object data="earth.gif" type="image/gif">
宇宙から見た地球
</object>
</object>
</p>
Macromedia Flashはcodebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"というコードを出力しますが、codebase属性にプラグインのダウンロード先を指定するのは間違いです。(「http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0」がdata属性などの基準となるURIとみなされてしまいます。)
FlashをXHTMLで表示させるには(embedタグを使わずに表示させるには) にあるように
どのブラウザでもobjectタグのみで表示するのに最低限必要なコードは以下の通り。
<object data="fma.swf" width="720" height="200"
type="application/x-shockwave-flash">
<param name="movie" value="fma.swf" />
</object>
本文中の解説に「codebase属性などを取り除く必要がある」のところがポイント。
このサンプルソース自体はあちこちで紹介されているのですが、なぜ各パラメータを消さなければいけないのか、明確に説明してあるサイトは見かけなかったんですよね~。
テレビがなんで映るのか知らないけれど、スイッチ押せば映るんだからいいじゃんみたいなノリで、よそのサイトに掲載されているソースをそのままコピって、そのソースの詳細を調べないっていうのはよくないよね。
「codebase属性にプラグインのダウンロード先を指定するのは間違い」と言われても、このへんDW任せで調べたことなかったですねえ。
objectタグの入れ子が複数できるのも興味深い。
codebaseがIE向けっていうのは、どこに根拠があるんだろ?
もうちょっとobjectタグの詳しい説明はないものか調べてみると
classid
属性に ActiveX コントロールを埋め込むための識別番号を指定した場合に機能するのは、現状では Windows版Internet Explorer のみです。ゆえに ActiveX コントロールは、ほぼ Windows版Internet Explorer 専用のプラグインという位置づけになっています。
Windows版Internet Explorer の独自機能で、ActiveX コントロールのダウンロード先の URI を指定する使い方があります。しかし、Windows版Internet Explorer における
codebase
属性 には仕様で定義されているclassid
属性,data
属性,archive
属 性に指定された相対URI の基準URI となる機能の働きはありません。たとえば、Flashファイルの埋め込みに Flash Player の識別番号(classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
) にあわせて、Flash Player のダウンロード先(codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
) を指定した場合、仕様どおりの機能をもつ Netscpae, Firefox では一切オブジェクトを再生できなくなります。これはcodebase
属 性の値になっている ActiveX コントロールのダウンロード先の URI をclassid
属性,data
属 性,archive
属性に指定された相対URI の基準URI として認識してしまうためです。このため Windows版Internet Explorer の独自機能である ActiveX コントロールのダウンロード先を指定する使い方は避けましょう。
なるほど、そういうことでしたか。
っていうか、World Wide Web Guideって日本語ページあったんだ、なんて今更思ってたりして。不勉強ですみません・・・。
SWFObjectでFlashを貼り付けるサンプルソースに、なんでobjectタグが入れ子になっているのかわからなかったんですが、そういうことだったのね。ここまで調べて、やっとこちらのソースの内容がわかりました。
ValidかつアクセシブルにYouTube(Flash)をHTMLに埋め込む方法
これならXHTMLの文法もOKで、SEO対策もできて、プラグインがなければプラグインのダウンロード先も表示できますね。