XHTML規格に準じて、
フラッシュコンテンツを埋め込むには

中村 享介

株式会社ロクナナ

Web標準でFlash

• FlashはWeb標準では使わない？？

Flashがデフォルトで吐き出すソース

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="test" align="middle">
　<param name="allowScriptAccess" value="sameDomain" />
　<param name="movie" value="test.swf" />
　<param name="quality" value="high" />
　<param name="bgcolor" value="#ffffff" />
　<embed src="test.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="test" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

長っ！

デフォルトソース構造

object要素

• 画像・動画・音声・Flashなどを埋め込むための要素
• objcectの子要素は代替要素になる。(直下のparam以外）

param要素

• パラメータを指定するタグ
• name属性でパラメータの名前を指定して、
  value属性でその値を指定

embed要素

• 動画や音声などをページに埋め込むブラウザ独自仕様

XHTMLでは定義されていない！

デフォルトの指定は

• object要素でFlash表示を試みる
• だめならembed要素

object要素だけで書く

<object data="test.swf" type="application/x-shockwave-flash" width="550" height="400">
　<param name="movie" value="test.swf" />
</object>

属性部分

<object data="test.swf" type="application/x-shockwave-flash" width="550" height="400">
　...
</object>

• data : データ（swfファイル）を指定する
• type : flashですよ宣言
• width,height : flashコンテンツのサイズ

param要素

<param name="movie" value="test.swf" />

• name="movie" : データ（swfファイル）を指定する
  • objectのdata属性と一緒？
  • 無いとIEで表示できない

代替要素は？

• img要素で指定
  • <object data="test.swf" type="application/x-shockwave-flash" width="550" height="400">
    　<param name="movie" value="test.swf" />
    　<img src="test.jpg" width="550" height="400" alt="代替テキスト">
    </object>
• FlashPlayerのダウンロードを指定
  • <object data="test.swf" type="application/x-shockwave-flash" width="550" height="400">
    　<param name="movie" value="test.swf" />
    　<p>コンテンツを再生するにはFlashPlayerが必要です。<a href="省略">ダウンロードページ</a></p>
    </object>

objectだけで書くメリット

• ソース読みやすい
• 代替要素を柔軟に指定できる
• FlashVarsの指定がひとつで済む
• HTML lintで怒られない

デメリットもあります

• プレイヤー入っていなくても自動インストールされない
• object対応してない古いブラウザではflashを再生できない

おまけ : Eolas特許問題

• 1回クリックしないといろいろ反応しない
• 回避するには外部Javascript読み込み実行

こんな感じ

• XHTML部分

  <script src="test.js" type="text/javascript"></script>

• Javascript部分

  document.write('<object data="test.swf" type="application/x-shockwave-flash" width="550" height="400">\n');
  document.write(' <param name="movie" value="test.swf" />\n');
  document.write('</object>\n');

ありがとうございました