SWFObjectを使ったFlashの貼り方。

選択肢

  • 選択肢1 static publishing methodを使う。
  • 選択肢2 dynamic publishing methodを使う。
    • 選択肢2-1 ページ先頭でswfobjectを読み込む。ドキュメントで説明されている方法。
    • 選択肢2-2 ページ末尾でswfobjectを読み込む。

上の方がHTML的に(SEO的にも？)正しい。下の方がHTMLがシンプル。

選択肢1 static publishing methodを使う。

JavaScriptなしでも表示可能なマークアップを目指すやり方。

  • HTMLの先頭でSWFObjectを読み込み、swfobject.registerObject(...)を実行する。
  • Flashを貼りたい位置に決められたマークアップを行う。
  • パフォーマンスがよい。
  • マークアップが標準準拠。
  • 見た目はクリーンではない。
    • 二重のオブジェクトタグ。
    • classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    • <!--[if !IE]>--> が2回登場。
  • 静的ならSWFObjectは何をするのか？
  • アップデートされていないIEで「このコントロールをアクティブ化して使用するにはクリックしてください」のメッセージが表示される場合がある。
  • JavaScriptでFlashにパラメータ(flashvars)を渡せない。JavaScript無しでもFlashは見えてしまう。
  • param要素で静的にflashvarsを渡すことはできる。
  • ドキュメントには、二重のobjectのそれぞれにparamを書かなければならないとある。
    • NOTE: The nested-objects method requires a double object definition (the outer object targeting Internet Explorer and the inner object targeting all other browsers), so you need to define your object attributes and nested param elements twice.
    • 「ノート: ネストしたobjectsメソッドは、二重のobject定義が必要(外側がIE用、中がIE以外用)なので、objectの属性とparam要素は2回必要です」
    • これは本当？param要素は1回書けば済むように思える。
    • http://groups.google.com/group/swfobject/browse_thread/thread/8f071313edb37df6 でparamは1回書けばいいんじゃないかという議論がされている。

選択肢2-1 HTML先頭でdynamic publishing methodを使う。

JavaScriptでFlash用のHTMLソースを動的に生成するやり方。

  • HTMLの先頭でSWFObjectを読み込み、swfobject.embedSWF(...)を実行する。
  • CSSを生成して対象のdivを一旦隠し、Flashを貼ってからもう一度表示する仕組みになっている。
    • 代替コンテンツが勝手に見えたりはしない。
  • 下の選択肢2-2と違い、ドキュメントに書かれている。正統なやり方。
  • SWFObjectのパッケージに含まれる expressInstall.swf を忘れずにアップロードする。

選択肢2-2 HTML末尾でdynamic publishing methodを使う。

ドキュメントではHTMLの先頭でswfobjectを実行することになっているが、HTMLの末尾にJavaScriptをまとめたいことも多い。以下のように書くとうまく動いた。

<html><body>

<div id="(Flash表示領域のID)">
  <noscript>((1) JavaScriptがオフの場合の表示)</noscript>
  ((2) 下のスクリプトが実行されるまでの代替コンテンツ。一瞬見えてしまう。何も書かなくてもよい。)
</div>

:
:

<!-- ページの一番下で -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

// Googleから読み込む。
google.load("swfobject", "2.2"); 

if (! swfobject.hasFlashPlayerVersion("(必要なFlashのバージョン 10.0.0など)")) {
  document.getElementById("(Flash表示領域のID)").innerHTML = 
    "((3) プラグインが古い場合の表示。また、(4) ユーザが expressInstall での更新を拒否した場合の表示)";
}

swfobject.embedSWF(
  "((5) 表示したいFlash).swf",
  "(Flash表示領域のID)", "(幅)", "(高さ)", "(必要なFlashのバージョン)", 
  "(expressInstall.swfのパス。要アップロード)", 
   (Flashに渡すパラメータ), (プラグイン用のパラメータ), (HTMLタグに追加する属性)
);

</script>

</body></html>

最後に expressInstall.swf をアップロードして完了。

どんな場合に何が表示されるのか。

  • (1) JavaScriptがオフの場合。 → <noscript>を表示。
  • (2) JavaScriptがオンで、ページ下部のスクリプトがロード・実行されるまでの間。 → <div>の中身を表示。
  • (3) JavaScriptがオンで、Flashプラグインが入っていない場合。→ if内で指定したinnerHTMLの内容を表示。
  • (4) Flashプラグインが入っているが古く、ユーザがexpressInstall.swfでのアップデートを拒否した場合。→ 上と同じ。if内で指定したinnerHTMLの内容を表示。
  • (5) 新しいプラグインが入っている場合。または、expressInstall.swfで更新した場合。→ embedSWFで指定したswfを表示。

以下の環境で確認した。この他でもSWFObjectが動くなら動くのでは。

バリエーション

Flashが表示される前に代替コンテンツが見えて構わないなら、<div>に直に書くほうがいい。(3)(4)のif文は不要になる。内容によっては <noscript> も不要かもしれない。