1. ホーム
  2. Blog
  3. SWFObject v2.0 ドキュメント日本語訳

SWFObject v2.0 ドキュメント日本語訳

寺井 周平

寺井 周平

技術

テライです。Adobe の Flash コンテンツを HTML にエンベッド（埋め込む）する時に多用されている「SWFObject」という JavaScript ライブラリがあります。

現在 SWFObject のバージョンは1.5で、代替コンテンツ表示機能や無駄のないマークアップのおかげで、Flash 埋め込み方法のデファクトスタンダードになりつつありますが、先日（2007.10.2）に、バージョン 2.0 （現在 β 版）が GoogleCode 上で公開されました。

v1.5 を使っている方からすると、多少戸惑う変更があるかもしれませんが、従来の埋め込み方法（翻訳記事中で「オプション２」と表記されている方法）に加え、objectタグを利用した埋め込み方法（オプション１）が追加された形になります。

せっかく v1.5 で object（あと embed）タグから解放されたのに、なんでまた object タグを書かないといけないの？と思う方もいらっしゃると思います（僕が思った）が、このオプション１のアプローチは従来の v1.5 での問題：

v1.5 では JavaScript をオフにしてるユーザーは、とにかく Flash が見れない

という問題を解決するために登場したようです。まぁ JavaScript をオフにするのはユーザーの意識的な行動によるものなので、そこは諦めてもいいだろとは思ったりもしますが、そこもサポートしたのが、「v2.0のオプション１」です。で、旧来のv1.5的な埋め込み方が「v2.0のオプション２（別名：v2.0のダイナミックエンベッド）」というわけです。

さてどちらのオプションを選べば良いのか？下位互換は？導入事例は？導入のタイミングは？など、気になることはいろいろありますが、ますはドキュメントを日本語に翻訳しましたのでご覧頂き、その後、僕も含めて皆さんで検証していければいいなと思っております。

Flash の次期バージョンには標準で組み込まれる（ようなことを作者が仰っていた）気がします。←僕のヒアリングが間違っていなければ。

関連リンク：

SWFObject v2.0 関連

SWFObject v1.5 関連

追記：現状「v2.0のオプション１」は Windows IE6,7 でのアクティブ化のためのクリック要求問題を解決していない（将来的に対応予定）ようなので、しばらくは僕は「v2.0のオプション２」で行こうと思っています。

「SWFObject v2.0 ドキュメント日本語訳」

原典は「SWFObject_2_0_documentation - swfobject - Google Code」
プロジェクトサイト・ダウンロードは「swfobject - Google Code」からどうぞ

SWFObject v2.0 を使った Adobe Flash コンテンツの埋め込み方法

SWFObject v2.0 と、 SWFObject v1.5 や SWFFix との関係は？

SWFObject v2.0 は以前 SWFFix [ http://code.google.com/p/swffix/ ] として進めていたプロジェクトの新しい名称です。Geoff Stearns, Michael Williams と Bobby van der Sluis の３人で進めているオープンソースのプロジェクトです。Flash を埋め込むための方法は、現状では SWFObject v1.5 [ http://blog.deconcept.com/swfobject/ ]、Flash player detection kit [ http://www.adobe.com/products/flashplayer/download/detection_kit/ ]、UFO [ http://www.bobbyvandersluis.com/ufo/ ] などがありますが、我々はこれにとって代わる次世代の JavaScript ライブラリを作ることを目的としています。

なぜ SWFObject を使うべきなのか？

List Apart 社の「Flash Embedding Cage Match [ http://www.alistapart.com/articles/flashembedcagematch/ ]」という記事に SWFObject v2.0（旧名 SWFFix）の合理性、SWFObject v2.0 が既存の他の Flash 埋め込み方法と比較した際に、どう優れているのかが紹介されています。

SWFObject の使い方

SWFObject は Flash コンテンツ埋め込みのための２通りの方法が用意されています。

  1. 標準準拠のマークアップを使った Flash 埋め込み方法。マークアップだけでは解決できなかった問題点を解決するために SWFObject を使います。
  2. SWFObject を使ってダイナミックに Flash コンテンツを埋め込む方法。（前バージョンの SWFObject や UFO と似た感じです）

1つ目の方法を選ぶ利点としては、現状の標準準拠のマークアップでコーディングでき、JavaScript に頼ることなく Flash コンテンツを挿入できる仕組みになっている点です。まとめると：

  • Flash プラグインがインストールされているのに、JavaScript がオフだったり JavaScript をサポートしていないブラウザだったりした場合、そんな環境でも Flash コンテンツが見ることができます。
  • Sony PSP のような JavaScript のサポートが貧弱な機種上でも Flash を動かすことができます。
  • RSS リーダーのような自動処理してくれるツールなどでも Flash コンテンツを利用することができます。

逆に、2つ目の方法を選ぶ利点は、コードがスッキリとシンプルなおかげで編集作業がしやすいということです。

標準準拠のマークアップをしつつ Flash を埋め込む方法と、その難問を解決するために SWFObject に施した工夫（オプション１）

ステップ１： Flash コンテンツと代替コンテンツを標準準拠マークアップで埋め込む

SWFObject のベースとなるマークアップは「ネスト（入れ子）されたオブジェクトタグを使う方法」を使います。（Internet Explorer 専用の条件式を用意するためにネスト化が必要なのです）[ http://www.alistapart.com/articles/flashembedcagematch/ ] 。標準準拠のマークアップのみを用いて最大最善のクロスブラウザへのサポートを実現、かつ、代替コンテンツの表示もサポートします。[ http://www.swffix.org/testsuite/ ]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 - step 1</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    <div>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />

        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">

        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->

      </object>

    </div>
  </body>
</html>

注意点１：この「ネストされたオブジェクトタグを使う方法」では二重の object タグが必要になります（外側の object は Internet Explorer 用に、内側の object タグはその他の全ブラウザ用に必要なのです）。そのために object のアトリビュート（属性値）や param 要素を重複定義しなければいけないのです。

注意点２：id や classid アトリビュート、movie param 要素は外側の object タグでのみ使えます。一方 type と data アトリビュートは内側の object タグにのみ使います。

注意点３：Adobe サーバー上の Flash プラグインの URL を指定するために使われる codebase アトリビュートは使用を控えた方がいいです。理由は、ドキュメントが置かれているドメイン以外へのアクセスを禁止するという仕様に準拠していないためです。 その代わりに、代替コンテンツ内に Flash プラグインのダウンロードを促すメッセージを用意しておく方が、ユーザーエクスペリエンス的にもオススメです。

Flash コンテンツ設定のための HTML の使い方

object 要素（タグ）中でよく使われるオプションのアトリビュート[ http://www.w3schools.com/tags/tag_object.asp ] には、次のようなものがあります：

  • id
  • name
  • class
  • align

Flash 仕様の param 要素（タグ）にはオプションで以下の設定が可能です[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]：

どうして代替コンテンツを用意すべきなのか？

object 要素の中に代替コンテンツを内包することができます。代替コンテンツは Flash がインストールされていなかったり／サポートされていない場合に、代わりに表示されます。代替コンテンツは検索エンジンの検索対象にもなりますので、検索エンジン対策にも非常に役立つ手法になります。よって、プラグインがインストールされていない Web ブラウザを使っているユーザーにもアクセシブルなコンテンツを作りたい場合や [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_03.html ]、検索エンジン最適化のため [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement_04.html ]、あるいは Flash プラグインをダウンロードすればよりリッチな Web 体験ができるんですよと訪問者に教えてあげるためにも、代替コンテンツは使用するべきなのです。

「ネストされたオブジェクト埋め込み方法」の欠点は？

このマークアップ方法をクロスブラウザサポート的観点から見てみると、以下のような弱点があることがわかります：

  • Safari 1.2.2 以下はネスト化された param 要素を全て無視してしまいます
  • Windows XP SP2 以上の Internet Explorer 6 以上、あるいは Opera 9 以上では「クリックしてアクティベート（インタラクティブ有効化）」作業が必要になってしまいます
  • 古いバージョンの Flash Player 上で Flash コンテンツを実行させた場合に、表示が崩れたりコンテンツが表示されないリスクがあります

SWFObject JavaScript ライブラリは、将来的にこれらの問題を解決しようと勤めています。You can best see it an add-on, which primary goals are to fix issues of using standards compliant markup and to add functionality to improve the user experience.　標準準拠のマークアップを使いつつこれらの問題を解決し、ユーザーエクスペリエンスを向上させることを目標としています。

ステップ２：HTML ページの先頭部分に SWFObject JavaScript ライブラリを読み込む

SWFObject ライブラリの正体は外部 JavaScript ファイル（サイズ：11.4Kb, GZIP：3.5Kb）です。SWFObject は読み込まれた直後に実行され、 ？？DOM がロードされるとすぐに全ての DOM 操作が機能します。 - この機能は全てのブラウザ（IE, Firefox, Safari and Opera 9+）がサポートしている機能です。そうでなくても onload イベントが呼び出されるとすぐに実行されます：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 - step 2</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

  </head>
  <body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">

        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->

      </object>
    </div>
  </body>
</html>

？？ステップ３：Flash コンテンツを SWFObject ライブラリに登録し、SWFObject に何をすべきかを教えてやる

まず Flash コンテンツを特定するための外側の object ダグにユニークな id を追加してやり、次に swfobject.registerObject メソッドを追加します：

  1. 第1引数 (ストリングで指定, 必須項目) で HTML 内で使う id を設定します。
  2. 第2引数 (ストリングで指定, 必須項目) にて、作成した Flash コンテンツを見るために必要となる Flash Player のバージョンを設定します。It activates the Flash version detection for a SWF to determine whether to show Flash content or force alternative content by doing a DOM manipulation.一般に Flash のバージョンとは「メジャー（バージョン）, マイナー（バージョン）, リリース, ビルド番号」で表されますが、SWFObject はそのうち最初の3項目のみを判定します。"WIN 9,0,18,0" (IE) や "Shockwave Flash 9 r18"（全ブラウザを対象）のどちらの場合でも "9.0.18" となります。
  3. 第3引数 (ストリングで指定, 任意項目) でAdobe の Express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75／日本語資料 http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html ] を有効にするかどうか、その際使用する Express install 用の SWF ファイルの URL を指定することができます。Express install は ユーザー側に視聴に必要な Flash プラグインのバージョンがなかった場合に、製作したFlash コンテンツの代わりに Flash プラグインダウンロードのダイアログを表示させることができます。この（SWFObject）プロジェクトのデフォルトとして expressInstall.swf を同梱しております。編集用に expressInstall.fla と AS ファイル（SRC フォルダの中）も同梱してありますので、ご自分用に Express install ファイルをカスタマイズしていただくことも可能です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 - step 3</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
    swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
    </script>

  </head>

  <body>
    <div>

      <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">

        <!--<![endif]-->
          <p>Alternative content</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->

      </object>
    </div>
  </body>
</html>

（オプション１の方法で）HTML ページ内に複数個の SWF ファイルを埋め込む方法

のステップ１から３（「標準準拠のマークアップをしつつ Flash を埋め込む方法と、その難問を解決するために SWFFix に施した工夫」の項以下の部分ですね）でやったこと繰り返すことで、複数個の SWF ファイルを好きなだけ HTML ページに埋め込むことができます。

（オプション１の方法で） JavaScript を使って、active object 要素を参照する方法

ネスト化オブジェクトアプローチを選ぶの副作用として、HTML コード中に、SWF１ファイルにつき２つの object タグができてしまうことになります。しかしながら、固有の id や name アトリビュート（属性）は、ウェブページ中では重複していないので、それらを利用することができます。

  • Windows の Internet Explorer では、入れ子側の object タグが条件分岐の結果コメントアウトされて見えないようになっているので、外側の object タグしか見えません。
  • Opera, Safari とも、外側の object の内容をサポートできます（参考：[ http://www.swffix.org/testsuite/ ]の object ActiveX の行）
  • Firefox, Mozilla 等の Gecko 系ブラウザでは内側の object の内容を利用できます

以下の方法で active object 要素を参照することができます：

  1. 外側の object タグのに id か name 属性を追加する
  2. 以下のコードを利用して、現在の object を参照できます。
var obj = document.getElementById("myId");
var nestedObj = obj.getElementsByTagName("object")[0];
var ref = false;
if (obj) {
  if (!nestedObj || (nestedObj && typeof obj.SetVariable != "undefined")) {
    ref = obj;
  }
  else if (typeof nestedObj.SetVariable != "undefined") {
    ref = nestedObj;
  }
}
if (ref) {
  ref.doSomething(); // e.g. an external interface call
}
（で、一体どういう使い道になるのかは僕にはイメージできない。by 寺井）

SWFObject を使った Flash コンテンツのダイナミックエンベッド（オプション２）

ステップ１：標準準拠のマークアップを使って代替コンテンツ部分を作る

SWFObject のダイナミックエンベッドの手法は progressive enhancement [ http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html ] の原則に沿っており、JavaScript と Flash プラグイン環境が整っていれば、代替 HTML コンテンツ部分を Flash コンテンツに置き換えてくれます。まず最初にやるべきことは、代替コンテンツを定義し、id を設定することです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 dynamic embed - step 1</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
    
    <div id="myContent">

      <p>Alternative content</p>
    </div>
    
  </body>
</html>

ステップ２：HTML ページの先頭部分に SWFObject JavaScript ライブラリを読み込む

SWFObject ライブラリの正体は外部 JavaScript ファイル（サイズ：11.4Kb, GZIP：3.5Kb）です。SWFObject は読み込まれた直後に実行され、 ？？DOM がロードされるとすぐに全ての DOM 操作が機能します。 - この機能は全てのブラウザ（IE, Firefox, Safari and Opera 9+）がサポートしている機能です。そうでなくても onload イベントが呼び出されるとすぐに実行されます：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 dynamic embed - step 2</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
    <script type="text/javascript" src="swfobject.js"></script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>

  </body>
</html>

ステップ３：JavaScript をつかって SWF を埋め込む

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) 前の5つが必須項目で、後ろの4つは任意項目（オプション扱い）です。

  1. swfUrl (ストリングで指定, 必須項目) には SWF ファイルの URL を記述します
  2. id (ストリングで指定, 必須項目) には、Flash コンテンツと入れ替えたい HTML 要素（代替コンテンツを内包している要素）の id を指定しておきます
  3. width (ストリングで指定, 必須項目) には SWF ファイルの幅を指定
  4. height (ストリングで指定, 必須項目) には SWF ファイルの高さを指定
  5. version (ストリングで指定, 必須項目) には 作成した SWF を再生するのに必要な Flash Player のバージョンを（"メジャーバージョン","マイナーバージョン","リリースナンバー"順で）指定します。
  6. expressInstallSwfurl (ストリングで指定, 任意項目) には Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75／日本語資料 http://www.adobe.com/jp/devnet/flashplayer/articles/expressinstall.html ] をインストールするための SWF ファイルへの URL を指定します。
  7. flashvars (オブジェクトで指定, 任意項目) では name:value のペアの形で flashvars を指定できます
  8. param (オブジェクトで指定, 任意項目)
  9. attributes (オブジェクトで指定, 任意項目) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>SWFObject v2.0 dynamic embed - step 3</title>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="swfobject.js"></script>

    
    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>

  </body>
</html>

Flash コンテンツの指定方法

object 要素（タグ）に対して、使用頻度の高いオプション属性[ http://www.w3schools.com/tags/tag_object.asp ] を追加することができます

  • id
  • name
  • class
  • align

オプションで Flash 設定用 param 要素を使うことができます[ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701 ]：

JavaScript オブジェクトを使って、flashvars やパラメーター、オブジェクト属性を定義する方法

以下の例のようにして、オブジェクトリテラル表記を使って JavaScript のオブジェクトを定義するのが最善の方法です：

<script type="text/javascript">

var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

オブジェクトの定義時に name:value のペア表記で（プロパティと値を）追加できます（オブジェクト中の最後の name:value ペアの後ろにカンマを付けないように注意して下さい）：

<script type="text/javascript">

var flashvars = {
  name1: "hello",
  name2: "world",
  name3: "foobar"
};
var params = {
  menu: "false"
};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

あるいは、ドット表記でオブジェクトを生成した後でプロパティと値を追加することもできます：

<script type="text/javascript">

var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";

var params = {};
params.menu = "false";

var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

次のように書くこともできます（１行で記述するのが好きな硬派なスクリプター向けの短い描き方、可読性は落ちるけどね）

<script type="text/javascript">

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});

</script>

引数を使いたくない時は、"null" や空オブジェクトを定義できます：（なんでそんなことする必要があるの？ by 寺井）

<script type="text/javascript">

var flashvars = null;
var params = {};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

flashvars オブジェクトは、コードが短く済むので使いやすい表記法かもしれません。You could potentially ignore it and specify your flashvars via the params Object:

<script type="text/javascript">

var flashvars = null;
var params = {
  menu: "false",
  flashvars: "name1=hello&name2=world&name3=foobar"
};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

（オプション２の方法で）HTML ページ内に複数個の SWF ファイルを埋め込む方法

オプション２（「SWFObject を使った Flash コンテンツのダイナミックエンベッド」以下の記事）のステップ１から３の作業を SWF ファイルの個数分繰り返すことで、複数個の SWF ファイルを好きなだけ HTML ページに埋め込むことができます。

SWFObject で Flash Player の 情報を JavaScript を使って取得する方法

SWFObject には Flash Player の情報を JavaScritp で取得できる、パブリックな API が備わっています。

swfobject.getFlashPlayerVersion() 関数は、インストールされている Flash Player のメジャーバージョン (major:Number), マイナーバージョン (minor:Number), リリースバージョン (release:Number) を含む JavaScript を返り値として返してくれます：

var playerVersion = swfobject.getFlashPlayerVersion(); // returns a JavaScript object
var majorVersion = playerVersion.major; // access the major, minor and release version numbers via their respective properties

swfobject.hasFlashPlayerVersion(versionNumbersString) は、指定したバージョンの Flash Player がインストールされているかいないかを Boolean 値で返してくれます：

if (swfobject.hasFlashPlayerVersion("9.0.18")) {
  // has Flash
}
else {
  // no Flash
}

Flash のバージョンナンバーは、通常 "メジャー.マイナー.リリース.ビルド番号" で構成されています。SWFObject では先頭から３項目までを取得する仕様ですので、"WIN 9,0,18,0" (IE) も "Shockwave Flash 9 r18" （他のブラウザも）も、両方とも "9.0.18" になります。（要検証 by 寺井）

SWFObject v2.0 は、従来の SWFObject v1.5 や UFO とどこが違うの？

オプション２の埋め込み方法は SWFObject v1.5 や UFO と似たしくみになっています。マークアップされた代替コンテンツを Flash コンテンツに動的に入れ替えるあたりが同じですね。

オプション１の埋め込み方法は、その概念（オプション２的アプローチ）からは一旦離れ、そのマークアップだけでは解決できなかった問題を解決するために、標準準拠のマークアップと JavaScript を用る方法になります。この新しい方法の利点は、標準準拠のマークアップに沿ったものだということと、この Flash コンテンツ埋め込みの仕組みは JavaScript に依存しないということです。　　　　

  • Flash プラグインがインストールされているのに、JavaScript がオフだったり JavaScript をサポートしていないブラウザだったりした場合、そんな環境でも Flash コンテンツが見ることができます。
  • Sony PSP のような JavaScript のサポートが貧弱な機種でも Flash を動かすことができます。
  • RSS リーダーのような自動処理してくれるツールなどでも Flash コンテンツを利用することができます。

逆に、2つ目のアプローチの利点は、コードがスッキリかつ重複しないため、オーサリングがしやすいということです。

SWFObject を使う際に気をつけるべきリスクは？

オプション１での埋め込み時

JavaScript をオフにしている、あるいは JavaScript をサポートしていない／満足に動かないブラウザを使っているユーザーは、アクティブコンテンツ許諾を強いられることによるユーザーエクスペリエンスの低下や、最悪の場合 Flash コンテンツの表示が崩れます。統計を参考にすると：

  • 全ウェブユーザーのうち 4% のユーザーが JavaScript をサポートしていないブラウザを使用、または JavaScript をオフにしています。（ソースは thecounter.com [ http://www.thecounter.com/stats/2007/June/javas.php ]）IE6, IE7, Opera を合わせたマーケットシェアが約80% [ http://www.thecounter.com/stats/2007/June/browser.php ] だとすると、 3.2% (80% 中の 4%) のユーザーが、ユーザーエクスペリエンスの低下（アクティブコンテンツをクリックして動作させる必要があるという問題）に見舞われてしまう計算になります。
  • あなたが Flash Player 8 用にパブリッシュした Flash コンテンツを Flash Player 6 をインストールしているユーザーが見た場合、0.2% (around 5% version gap of 4% no JavaScript) のユーザーは、コンテンツ表示が崩れたり、あるいは全く表示されないことになります。あなたが Flash Player 8 用にパブリッシュした Flash コンテンツを Flash Player 7 をインストールしているユーザーが見た場合は、この確率は 0.1%（ソースは Adobe (source: Adobe [ http://www.adobe.com/products/player_census/flashplayer/version_penetration.html ]）にまで減少します。

よって、このアプローチ（オプション１）にはまだ多少のリクスはありますが、とはいえ、既存の他の Flash 埋め込み方法と比べてみても同等もしくはそれ以下のリスクなので（使用をおすすめできる）ということです。

オプション２での埋め込み時

JavaScript をオフにしている、あるいは JavaScript をサポートしていない／満足に動かないブラウザを使っているユーザーは、（最新の Flash Player がインストールされている or されてないに関わらず）Flash コンテンツを見ることができません。そのかわり、代替コンテンツが表示されるので、それを見ることはできます。統計を参考にすると：

  • 全ウェブユーザーのうち 4% のユーザーが JavaScript をサポートしていないブラウザを使用、または JavaScript をオフにしています。（ソースは thecounter.com [ http://www.thecounter.com/stats/2007/June/javas.php ]）

SWFObject は MIME type application/xhtml+xml をサポートしていますか？

SWFObject は設計の都合上、XML MIME タイプをサポートしておりまません。

サポートしていない理由としては以下のようなものが挙げられます：

  • MIME タイプを利用している Web 製作者がとても少ない（ごく少数な）ため。
  • MIME タイプの将来性がよく分からないため。Internet Explorer はサポートしていないし、他の主要ブラウザベンダーも、新しい標準 HTML（HTML 5）に照準を定めているため。（HTML 5 は現状の W3C 規格のパース方法とは違う実装をするかもしれないため。）
  • MIME サポートをしないことで、SWFObject のファイルサイズの軽減と（テストやデバッグといった）作業を軽減することができるため

以上です、僕は JavaScript 使いではないので、おかしな箇所がありましたらコメントくださいませ。訂正します。

トップへ戻る