Flash や Flex をHTMLに貼るコードの考察

Flash や Flex を使って作った SWF ファイルは、表示用のコードを書いてあげることで、HTMLのページの中に埋め込んで表示させます。このために、Flash や Flexに用意されている標準のコードを使うこともできますが、実際には、そのまま使うことはなく、JavaScript のライブラリ SWFObject などを利用して表示することが多いです。そこで、本稿では、Flash や Flex をHTMLに貼り付ける際に必要となる表示用コードについて考察してみようとおもいます。

Flash標準の表示用コード

Flash や Flex では、出力形式に、SWF ファイルを書き出します。そして、HTMLで表示するためには、表示用のタグを書く必要があります。Flash CS3でパブリッシュした、表示用のコードは、次のようなものです。

<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

<!– saved from url=(0013)about:internet –>
<script language="javascript"><!–
    if (AC_FL_RunContent == 0) {
        alert("このページでは \"AC_RunActiveContent.js\" が必要です。");
    } else {
        AC_FL_RunContent(
            ‘codebase’, ‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0′,
            ‘width’, ‘550′,
            ‘height’, ‘400′,
            ’src’, ‘qqq’,
            ‘quality’, ‘high’,
            ‘pluginspage’, ‘http://www.macromedia.com/go/getflashplayer’,
            ‘align’, ‘middle’,
            ‘play’, ‘true’,
            ‘loop’, ‘true’,
            ’scale’, ’showall’,
            ‘wmode’, ‘window’,
            ‘devicefont’, ‘false’,
            ‘id’, ‘qqq’,
            ‘bgcolor’, ‘#ffffff’,
            ‘name’, ‘qqq’,
            ‘menu’, ‘true’,
            ‘allowFullScreen’, ‘false’,
            ‘allowScriptAccess’,’sameDomain’,
            ‘movie’, ‘qqq’,
            ’salign’, ”
            ); //end AC code
    }
//–>
</script>
<noscript>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="550" height="400" id="qqq" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="qqq.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />   <embed src="qqq.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="qqq" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>
</noscript>

JavaScript が利用できる場合は、JavaScript のコードが表示され、利用できない場合は、Flashに必要な OBJECT タグを直接表示するようになっています。

このコードは、Flashでパブリッシュすることで自動作成されるため、特別な操作が面倒な場合には、これを使うのが手っ取り早いと言えます。しかし、過不足なく全ての情報が書き込まれている分、かなり冗長な感じです。この情報全てが必要なわけではないので、次に余分な部分を取り払ったシンプルな表示用タグを見ていきます。

YouTubeに見るブログ貼り付けコード

動画共有サービス大手のYouTubeでは、動画の再生に Flash を利用しています。YouTubeでは、Flashをブログに貼り付けることができるようになっています。ブログに貼り付けてもらうコードですから、必要最小限の HTML タグになっています。これを参考にすれば、最小限のコードで、Flash を表示させることができるでしょう。

以下は、YouTubeで使われている貼り付け用のコードを見やすく整形したものです。実際には、[URL]の部分に、FlashのURLが入ります。

<object width="425" height="353">
  <param name="movie" value="[URL]"></param>
  <param name="wmode" value="transparent"></param>
  <embed src="[URL]" type="application/x-shockwave-flash"
    wmode="transparent" width="425" height="353"></embed>
</object>

object タグ、embed タグにほとんど同じ値が設定されていますが、主要なブラウザをサポートする場合には、この２つのタグが必要になります。先ほどの例では、非常に長いコードの記述が必要でしたが、「ここまで短くすることができるか」というのが分かると思います。

IEに関する問題

ところが、上記の最小限のタグでは、Webブラウザの Internet Explorer (以後IEと略します)では、Flashの周りに、不恰好な枠が表示され、一度クリックしないと Flash がアクティブな状態になりません。これを回避するためには、外部の JavaScript を利用してFlashを表示すれば良いことになっています。次に、これを回避する JavaScript のライブラリ SWFObject を紹介します。