Flash のブログパーツを XHTML valid にする
ブログパーツやブログペットで Flash を利用されている方は多いと思いますが、Flash のコードには embed 要素が含まれており、この要素が含まれているページは XHTML valid となりません。
Another HTML-lint gateway でチェックすると下記のようなエラーになります。
7: line xx: <embed> は Mozilla、MSIE または doti 用のタグです。 → 解説 55
7: line xx: </embed> は Mozilla または MSIE 用のタグです。 → 解説 55この問題についてご質問を頂いたので、ネットを調べていたところ、下記の記事がありました。
Hotwired Japan：ウェブ標準のフラッシュ・オブジェクト自在術：embedタグとobjectタグ／救世主JavaScript参上
要するに JavaScript を用いて Flash のコードを表示させればよい、ということです。
上記の記事に書かれている方法が分かりにくい場合、次のようにすると良いでしょう。ここでは Kinarie&May さんの Flash カレンダーを例に変更方法を説明します。
この Flash カレンダーは、配色やURL等の必要な情報を入力して Flash のコードを生成した後、下記のコードを Movable Type のテンプレートに直接貼り付けます。
修正前
<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='130' HEIGHT='130' id='calender' ALIGN=''> <PARAM NAME=movie VALUE='http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1'> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src='http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1' quality=high bgcolor=#ffffff WIDTH='130' HEIGHT='130' NAME='calender' ALIGN='' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></OBJECT>このコードをテンプレートにそのまま貼り付けると XHTML valid とならないため、下記のような修正を加えます。
修正後（青色を追加）*1
<script type="text/javascript">
<!--
document.write('<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=¥'130¥' HEIGHT=¥'130¥' id=¥'calender¥' ALIGN=¥'¥'> <PARAM NAME=movie VALUE=¥'http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1¥'> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#ffffff> <EMBED src=¥'http://n_calendar200.swf?xmlURL=http://hogehoge.com&katachi=1&monthMoveColor=ff6600&entryDayColor=ffff99&todayColor=ff9900&title_d=1¥' quality=high bgcolor=#ffffff WIDTH=¥'130¥' HEIGHT=¥'130¥' NAME=¥'calender¥' ALIGN=¥'¥' TYPE=¥'application/x-shockwave-flash¥' PLUGINSPAGE=¥'http://www.macromedia.com/go/getflashplayer¥'></EMBED></OBJECT>');
//-->
</script>ご覧の通り、Flash のコード全てを、JavaScript の document.write('?') という「?」に収めます。Flash のコードに含まれる全てのシングルクォート（'）はエスケープ（¥ またはバックスラッシュを付与）してください。これは document.write で使用されるシングルクォートでないことを示すためです。
上記の修正を実施して正常に表示されるところまでは確認できました。表示されない場合はエスケープがきちんとできていない可能性があります。Firefoxの[ツール]-[JavaScriptコンソール]でエラーが発生していないか確認しましょう。
*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
- BlogPeople の「List Me!」を valid にする
≫ ValidなXHTMLソースのためのチェックポイント（087） from thousand scales：とむのレポートサイト
直すところは、どんなサイトでも大体同じなので、主な修正点をまとめてみました。 [続きを読む]
≫ XHTML（Valid）規格に準じたFlashソースの書き方 from webプログラマーのメモ
FlashコンテンツをWEBサイトに埋め込むに当たって、
XHTML Validエラーの壁にぶち当たったのでメモとしてエントリー。
参考url：
ht... [続きを読む]
yujiroさんこんにちわ?。
Firefoxの場合問題ないのですが、Internet Explorerの場合、もうじきイヤなものが付加されます。（と言うか現在の最新版でも付加されていて互換性のパッチで回避できていますがそれももうじき無くなるとのことです。）
「コントロールのアクティブ化」でGoogle検索するとすぐ見つかるのですが、IEのActiveXコントロール(Flashも同じく)表示時にアクティブ化の確認動作が入り、クリックもしくはダイアログで表示されたりと、プラグイン訴訟の法的責任を回避するためらしいのですがユーザーに取ってはちょっとイヤなものになるようです。それでMicrosoftも回避策として出しているのが、document.write?の部分を別のjsファイルにして読み込むと言う方法です。これを試してみましたが、これでもAnother HTML-lint gateway でエラーにはなりませんでした（この部分だけです。他は悲惨な状況なので諦めてます（笑））
＞ARCHさん
こんばんは。
情報ありがとうございました。
外部ファイルにすればよいということですね。
yujiroさんこんばんわ。そうですね。外部ファイルにしたところ、アクティブ化の確認のクリックやダイアログなど出なくなりました。訴訟のお金払って今まで通りの動作にしてくれればいいのにと思うのですが、そうはやってくれそうも無いみたいです。
これとは関係無い話しなのですが、TB企画内容間違えていてすいません。自分のエントリーと言うのをyujiroさんのと言うのと勘違いしてましたね。（書き直しましたけど（汗））
＞ARCHさん
こんばんは。
ご連絡ありがとうございました。
また誤解を招く文言、失礼致しました。
ではでは！
