Flash のブログパーツを XHTML valid にする

Flash のブログパーツを XHTML valid にする

Posted at May 21,2006 1:08 AM
Tag:[JavaScript, WebStandards]

ブログパーツやブログペットで 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 ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

関連記事
トラックバックURL


トラックバック

ValidなXHTMLソースのためのチェックポイント(087) from thousand scales:とむのレポートサイト
直すところは、どんなサイトでも大体同じなので、主な修正点をまとめてみました。 [続きを読む]

Tracked on April 21, 2008 8:03 PM

XHTML(Valid)規格に準じたFlashソースの書き方 from webプログラマーのメモ
FlashコンテンツをWEBサイトに埋め込むに当たって、 XHTML Validエラーの壁にぶち当たったのでメモとしてエントリー。 参考url: ht... [続きを読む]

Tracked on July 9, 2008 3:42 PM
コメント

yujiroさんこんにちわ?。
Firefoxの場合問題ないのですが、Internet Explorerの場合、もうじきイヤなものが付加されます。(と言うか現在の最新版でも付加されていて互換性のパッチで回避できていますがそれももうじき無くなるとのことです。)
「コントロールのアクティブ化」でGoogle検索するとすぐ見つかるのですが、IEのActiveXコントロール(Flashも同じく)表示時にアクティブ化の確認動作が入り、クリックもしくはダイアログで表示されたりと、プラグイン訴訟の法的責任を回避するためらしいのですがユーザーに取ってはちょっとイヤなものになるようです。それでMicrosoftも回避策として出しているのが、document.write?の部分を別のjsファイルにして読み込むと言う方法です。これを試してみましたが、これでもAnother HTML-lint gateway でエラーにはなりませんでした(この部分だけです。他は悲惨な状況なので諦めてます(笑))

[1] Posted by ARCH : May 21, 2006 4:03 PM

>ARCHさん
こんばんは。
情報ありがとうございました。
外部ファイルにすればよいということですね。

[2] Posted by yujiro : May 22, 2006 1:00 AM

yujiroさんこんばんわ。そうですね。外部ファイルにしたところ、アクティブ化の確認のクリックやダイアログなど出なくなりました。訴訟のお金払って今まで通りの動作にしてくれればいいのにと思うのですが、そうはやってくれそうも無いみたいです。

これとは関係無い話しなのですが、TB企画内容間違えていてすいません。自分のエントリーと言うのをyujiroさんのと言うのと勘違いしてましたね。(書き直しましたけど(汗))

[3] Posted by ARCH : May 22, 2006 1:19 AM

>ARCHさん
こんばんは。
ご連絡ありがとうございました。
また誤解を招く文言、失礼致しました。
ではでは!

[4] Posted by yujiro : May 22, 2006 11:52 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)