アクセシビリティ
デベロッパーリソース

目次

SWFObjectを使用したJavaScript Flash Playerの検出と埋め込み

SWFObjectと他の方法との比較

Flash Playerのバージョン検出やSWFのHTMLページへの埋め込みには、これまでに様々な方法が使用されてきました。この節ではよく使用される方法をいくつか取り上げ、それぞれの欠点を説明します。

デフォルトの埋め込み方法

誰でも知っている方法がデフォルトのFlash埋め込み方法です。これはobjectタグと、代替メカニズムとしてその内側に挿入するembedタグで構成されます。これが最もよく使用されるFlash埋め込み方法であり、Flash IDEからSWFをパブリッシュするときのデフォルトになっています。また、SWFを埋め込む最も互換性の高い方法でもあり、様々なブラウザで機能します。

以下にデフォルトのFlashのembedコードサンプルを示します。

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

これが最もよく使用されるムービーの埋め込み方法ですが、欠点がいくつかあります。

  • プラグイン検出が行われない:プラグインが検出されないので、不完全なコンテンツが表示される場合や何も表示されない場合があります。プラグインがインストールされていない場合、Internet Explorerでは「ActiveXのインストール」メッセージ(図1を参照)が表示されます。昨今、多くのユーザはこれが表示されるとスパイウェアやマルウェアではないかと心配します。Mozillaベースのブラウザでは「見慣れないジグソーパズルのようなアイコン」のボックスが表示されます(図2を参照)。どちらのプラグインインストール方法もユーザの便宜があまり考慮されず、何がインストールされるのかをはっきり説明していません。
  • HTMLまたはXHTMLとして有効ではない:HTMLとXHTMLのいずれのバージョンにもembedタグのようなものはありません。しかも、ブラウザによってobjectタグの扱いが異なり、まったく無視されたり、実装に問題があったりするので、代替メカニズムとしてembedタグが必要です。
Internet Explorerで表示されるActiveXインストールメッセージ

図1. Internet Explorerで表示されるActiveXインストールメッセージ

Firefoxで表示されるプラグインインストールメッセージ

図2. Firefoxで表示されるプラグインインストールメッセージ

ObjectタグのみとFlash Satay

Objectタグのみを使用する方法とFlash Satayという方法は、Drew McLellanの記事「Flash Satay: Embedding Flash While Supporting Standards*」が2002年にA List Apartに掲載されて以来、支持されています。

以下にObjectタグのみを使用する埋め込みとFlash Satayのコードサンプルを示します。

Objectタグのみ

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<!--[if !IE]> 
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"  width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<![endif]-->
</object>

Flash Satay

<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf" 
width="400" height="300">
<param name="movie" 
value="c.swf?path=movie.swf" />
<img src="noflash.gif" 
width="200" height="100" alt="" />
</object>

これらの方法にも次のような欠点があります。

  • アクセシビリティの問題:Flash Satayを使用すると、JAWSなどの一部のスクリーンリーダーではFlashコンテンツが完全に無視されます。これについては、Andrew KirkpatrickとBob Reganのブログ記事「In search of a perfect plug-in technique*」を参照してください。
  • プラグイン検出が行われない:Flashのデフォルトembedタグと同様に、プラグインの検出が行われないと、不完全なコンテンツが表示される場合やまったく表示されない場合があります。Flash PlayerはSWFがページに埋め込まれていると、バージョンに関係なく再生しようとします。したがって、Flash Player 6がインストールされていてFlash 7のSWFを検出した場合、プラグインは再生を試みますが、予期しない動作を生じる場合があります。
  • Flash Satayを使用するとSWFがPlayerにストリーム再生されない場合がある:この方法ではムービーのロード先として「ホルダ」のSWFが必要です。この場合、FlashVarsパラメータから変数を渡すことが困難になり、Webサーバに格納するSWFファイルの数が2倍になるのでFlashコンテンツの管理効率も低下します。
  • 以前のバージョンのSafariはparamタグを無視する:2.0(Mac OS X "Tiger")または1.3(OS X "Panther")以前のバージョンでは、Safariブラウザはparamタグを完全に無視していました。つまり、Flashvars、Align、Salignなどを使用して他のオプションを設定しようとしても、Safariではそれらの値が検出されませんでした。

「小さなFlashムービーをインデックスページに配置する」方法

この方法では、WebサイトのインデックスページにSWFを1つ配置し、それによってFlash Playerの$version変数のチェックを行い、ユーザをサイト内のFlashコンテンツまたは「Flashの更新」ページのどちらかへリダイレクトします。

この方法にも問題があります。

  • 内部のページではFlash Playerの検出が行われない:ユーザが内部のURLを別のユーザに送信した場合、そのユーザはインデックスページのFlash検出をスキップします。
  • HTMLまたはXHTMLとして有効ではない:SWFの埋め込みに必要なembedタグは、HTMLドキュメントでは有効ではありません。
  • 検索エンジンでのランキングが低くなる:この方法ではインデックスページを空のFlash検出ページとして使用するので、検索エンジンで表示されるサイトの説明が「Flash Playerの検出」などの意味のない語句になるか、何も表示されません。これでは、会社や製品の宣伝に使用するはずの貴重なWebサイト資産が無駄になります。さらに、Webサイトの他のコンテンツへのリンクを含めていない場合も多く(SWFにリンクが含まれているという理由で)、サイトの他のページのインデックスがないという事態が発生します。

Flash Player検知キット

Macromedia(現Adobe)がFlash Player 8とともにリリースしたFlash Player検知キットは非常によくできていますが、それでも欠点があります。Flash Playerを検出する方法は2つ用意されています。

  • 小さなFlashムービー:従来の「小さなFlashムービーをインデックスページに配置する」方法の問題点は前述したとおりです。
  • JavaScript:ご存知のとおり、FlashにはJavaScriptプラグイン検出テンプレートが含まれていますが、残念ながら、JavaScript、VBscriptおよびHTMLをすべて同じページに混在させるので、あまり使いやすくありません。これには以前のJavaScriptによる検出や埋め込み方法で見られたのと同じ欠点が多数ある上、Flash/HTMLデベロッパの作業を容易にすることもありません。さらに、XHTMLやHTMLの検証も行いません(それらを重要視するとしても)。

Flash Player検知キットの詳細については、私のブログ*を参照してください。

未処理のJavaScriptを使用したSWFの検出と埋め込み

この方法はサイトによって異なるので評価が困難ですが、私が検討した範囲では、JavaScript Flash検出スキームのほとんどは、同じ欠点を持っています。

  • プラグイン検出の信頼性が低い:現在のバージョンのFlash Playerしか検出しないものが多く、新しいバージョンのプラグインがリリースされるたびに手動で書き直す必要があります。
  • ページに追加するコードが増える:コンテンツの更新や変更がさらに難しくなります。この方法は、デザイナーなどがページのFlashコンテンツを変更したり、新たに追加したりする作業を難しくします。
  • 過度に複雑なソリューション:Flash埋め込みスクリプトの多くはファイルサイズが大きくなったり複雑になったりする傾向があります。SWFObjectは単純でサイズも小さくなるように設計されています。

次のステップ

ご覧いただいたように、SWFObjectの特長はサイズが小さく、使いやすく、アクセスが限定されないことです。ページの検証も行うことができます。そのため、Express Installも非常に簡単に使用できます。

SWFObjectについてさらに詳しくは、SWFObjectの公式ページ*をご覧ください。また、スクリプトの更新については、私のブログ*をご覧ください。スクリプトの使用に関する質問や、新しい機能のリクエスト、ご意見などをお持ちの方は、SWFObjectメーリングリスト*にご参加ください。