このページは、2005年8月後半から2010年12月までのアーカイブです。
2005年8月後半から2010年12月までのアーカイブトップへ
現在のトップページへ

コーディングをDWまかせにしていると陥るワナ

Nagi
   2010.04.23 08:41

ブログ記事に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属性

classid属性に ActiveX コントロールを埋め込むための識別番号を指定した場合に機能するのは、現状では Windows版Internet Explorer のみです。ゆえに ActiveX コントロールは、ほぼ Windows版Internet Explorer 専用のプラグインという位置づけになっています。

codebase属性

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対策もできて、プラグインがなければプラグインのダウンロード先も表示できますね。