ブログ記事に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対策もできて、プラグインがなければプラグインのダウンロード先も表示できますね。
最近のコメント
いちおう美術の道を志しましたが、現代美術って・・・微妙だ。昔の絵画とかは素直に鑑賞できるんだけどねえ。
知人が手伝いで瀬戸内行ってますわ。
確か似たような事言ってたな。
オイラには芸術はわからないけど、難しいわな。
こんにちは。
アニマスのアーカイブを眺めてもらえれば、たぶんライティングとかはわかるかも。だいぶアバウトなので参考になるかどうかわかりませんが・・・。
アニマスだけでは手書き風にはできないので、フォトショップで加工します。ペインターがあればさらに自然なストロークが出ます。
昔はアニマス単体でも銅版画風にできるプラグインがあったのですが、さすがに現行バージョンには対応してないかなあ。
上の方をよく読んで見たら、やはり
ペインターをお使いのようなのですね。
キャメルオイルクローンフィルタ。
自分は一枚絵なのでこの線で行ってみます。
ライティングの試行錯誤がものすごく参考になりました。
ありがとうございました。
熊茶壜さん、こんんちは。
二枚目の熊さん、ほのぼのして良いです。
自分は手描きから更に銅版画を目指したいのですが、
手描き風さえいたっていません。
二枚目の熊さんはアニマスのみの出力結果でしょうか?
それとも、Painterとかで修正されたものでしょうか?
アニマスのみのライティングの出力結果のみでしたら、
是非、教えていただけないでしょうか?
お忙しいことかとは思われますが
よろしくお願いいたします。
先生、こんにちは。
これだけガンブラーが繁殖すると、いずれはどこかで出会いますよ。
とりあえず大事にいたらなくてよかった、というべきか。
セキュリティ管理はなかなか難しいですが、やらなきゃいけなくなりましたね。
ホント、今回はご迷惑おかけしました。
m(_ _)m
まったくもって今まで他人事でしたし。
momongaさん、こんにちは。
お土産ページ確認しました。ありがとうございます。
他所様のパスワードを預かるっていうのは、怖いことだなあと改めて思いましたよ。
ブログのログインフォームを攻撃されるパターンもあるそうなので、こっちも認証掛けといた方がいいですね。
「Movable Type の管理画面に Basic 認証を使ってみる」
http://bizcaz.com/archives/2008/08/04-224019.php
お疲れ様です。勘弁して・・ですよね、わたしもマジで、、頭を悩ませています。
もう1年以上前のことです。知人のサイトがやられてその後始末のなんと大変なことだったか小一時間しゃべれますよ(笑)
幸いうちのお客さんじゃなかったので傍観者というか、アドバイス程度で済んで。それでも大変でした。
でもそれ以来生きた心地がしなくて、お客さんにも何度か忠告してますが
どこまで対処できてるか・・ほとんど無理かも。
FTP権限を取り上げたい(ノд・。)
最近のお仕事はほとんどCMSなのでそちらのログイン情報なんでまだいいのかも・・・。
昔ながらの作り方をしてるサイトがほんと心配です。
ところで、リンク先、有効なのを教えてくれてありがとうございます。
さくらサーバーもIP固定でFTP接続できるようになったとは・・・!!
私も初心者管理者さん向けの記事を書いてるのでお土産おいていきますね。
http://momonga365.blogspot.com/2010/01/blog-post.html
お姉ちゃんは普段は扱いやすいんだけど、怒ったときは坊ちゃんより手に負えないの。体がでかい分、泣き声も地響き級よ;;