SWFObjectのドキュメントを日本語に翻訳してみたよ

このエントリはバージョン1.5のドキュメント翻訳となります。バージョン2.0のドキュメント翻訳はMTLブログにて別途翻訳したものがあります。


本家URL:
deconcept › SWFObject: Javascript Flash Player detection and embed script

HTMLにswfファイルを埋め込む際はSWFObjectを使うのが現状ではベストではないかと思います。
バージョン検出も簡単に設定できるし、Flash playerのアップデートを自作のswf内で処理できるという「Express Install」にも対応。他にもいろいろ設定できます。

最近のIEのアップデートによる、「クリックしないといけません」現象も回避できます。

仕組みは、ある要素の中身をswfを表示するための文字列に置換するというもの。無駄なソースを書かなくていいし、validだしと、いいことづくめな感じです。

作者の記事に、翻訳歓迎みたいなことが書かれていたので、日本語訳してみました。
生粋の日本人なので、翻訳ミス等ありましたら、コメントしていただけると助かります。

9/12追記:関連記事として「お手軽にSWFObjectでswfを埋め込む方法」をエントリしました。

7/19追記:getSWFHTML() を使ってもっと簡単に埋め込む方法が「cellfusion blog | SWFObjectの便利なメソッド」様に書かれています。調整可能なブログパーツの貼付けコードに最適なのではないでしょうか。

2008/2/10追記:関連記事リンクをエントリ末に追加させていただきました。


SWFObject:Flash Playerの検出&埋め込み用Javascript

SWFObjectはMacromedia Flashのswfを埋め込むためのJavascriptです。このスクリプトで、MacとPCの主要ブラウザのFlashプラグイン判定ができます。埋め込み方法も簡単です。検索エンジン対策(SEO対策)にもなり、validなHTML、XHTML 1.0に使用でき、今後のバージョンにも対応できていると思います。
※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。

お知らせ:SWFObjectは以前FlashObjectという名称でしたが、法的な理由で名称変更をしました。詳しくはこちらの記事をお読み下さい。

このページのコンテンツ

バージョンアップに伴う追加機能

バージョン1.5での新機能の詳細は、作者の SWFObject1.5 ブログエントリを参考にして下さい。

機能説明

[より詳しく調べたい方は、生のJavascriptをご用意してます。]

SWFObjectの使い方は簡単です。swfobject.jsというJavascriptファイルを読み込み、Flashムービーを挿入するために少しのJavascriptを追加するだけです。以下が、Flashムービーを埋め込む為の最もシンプルな使用例です。

<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");
</script>

それでは各コードを紹介していきます:

<div id="flashcontent">[...]</div>

HTML内に、Flashムービーを入れる為の要素(ここではdivタグ)を用意します。この要素の内容がFlashムービーに置換されるので、Flashプラグインをインストールしているユーザーにはこの要素の内容は見えません。この機能は代替テキスト表示機能として検索エンジン対策にもなります。

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");

新規にSWFObjectをつくり、必要なパラメーターを渡します。

  • swf – 埋め込むswfのファイル名をパスで指定
  • id – オブジェクトやembedタグのIDとなります。このタグ名はswliveconnect属性を利用する際の名前として利用できます。
  • width – Flashムービーの幅
  • height – Flashムービーの高さ
  • version – 必要とするFlashPlayerのバージョン。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。(例: “6.0.65”)メジャーバージョンの数字だけを”6″のように指定することもできます。
  • background color – 背景色を指定できます(例:#ffffff)

パラメーター(オプション)

  • useExpressInstall – もしユーザーにExpressInstall機能を使ってアップグレードさせたい時は、このパラメーターを’true’ にしてください。
  • quality – Flashムービーのクオリティを指定できます。特に指定しない場合、デフォルト値は”high”になります。
  • xiRedirectUrl – ユーザーに対しExpressInstallによるアップデートを促す時は、リダイレクトに先の代替URLを指定できます。
  • redirectUrl – 対応するプラグインのバージョンを持っていないユーザーを別ページへ移動させたい時は、このパラメーターにリダイレクトさせたいURLを指定できます。
  • detectKey – SWFObjectスクリプトで、プラグイン検出をするかしないかを選択する時に参照する変数名です。デフォルトは’detectflash’です。 使用例:プラグイン検出を回避しつつ、Flashムービーを出力させたいときは、ムービーを含むドキュメントのURLに?detectflash=falseを付加します。
so.write("flashcontent");

(ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置換することで実行されます。

詳細

SWFObjectは、あなたのHTMLページのバックエンドでスムーズに動作します。SWFObjectを使ったページを作る時は、まずは代替コンテンツ(フラッシュなし)で作っておきます。Flashムービーなしで動作するように作っておき、それからFlashムービーに置換するための数行のJavascriptを書き込みます。はじめに記述した代替コンテンツは検索エンジンにかかりますし、Flashプラグインのないユーザーには、この代替コンテンツが見えますので、ページを綺麗に見せることができます。ユーザーにアップグレードを促すかどうかはあなた次第です。代替コンテンツを作り込んでおけば、ユーザーがFlashが見れない場合でも気づかないでしょう。

SWFObjectは現行のの全てのブラウザに対応しています。 PC環境では、IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, Opera、MacではIE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+で動作し、以降のバージョンに対してもほぼ対応しています。

SWFObjectは上記のブラウザに対し、Flash playerのバージョン3以降の検出ができます。またユーザーに対し「activating」問題(※FAQ記事に掲載)に関する余計なクリックを求めることもありません。この記述の更なる詳細は「this blog post on the Internet Explorer Eolas patent dispute」をご覧下さい。

SWFObjectはFlash Playerのマイナーバージョンや、リビジョンまで検出できます。その指定は該当する数字を設定するだけなのでとてもシンプルです。Flash player v.6.0 r65 (or 6,0,65,0)を検出したい場合、以下のようになります:

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

SWFObjectでは、プラグイン検出を回避することもできます。初めてブラウザを使った時や、何らかの理由でユーザー環境のプラグイン検出が失敗した場合、SWFObjectの検出ができなかった時のために、プラグイン検出回避用のリンク設定ができます。それでもFlashコンテンツはきちんと出力できます。回避用リンクを使うには、Flashコンテンツのあるページへのリンクを貼り、そのurlに付加する形で、’detectflash’変数に対し’false’を設定します。 下がその使用例です:

<a href="mypage.html?detectflash=false">Bypass link</a>

SWFObjectの使用例

上記の例はSWFObjectの基本となるシンプルな記述ですが、Flash Playerに含まれるその他のパラメーターを設定したい場合はどうすればいいのでしょうか?SWFObjectはそれらのパラメーターも簡単に設定可能です。下記はその記述例です。

その他のパラメーターの設定例

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>

詳しくはmacromedia.comのサイトの設定可能なパラメーターと設定値に付いての解説をご覧下さい。

“Flashvars”パラメーターを使って、swfムービーに変数を渡す場合

Flashムービーの読み込み時に変数を渡すといったような、HTMLからFlashにデータを渡す場合には、Flashvarsを使用するのが最も簡単です。通常、”flashvars”というパラメーターを設定し、variable1=value1&variable2=value2&variable3=value3のように、名前と値を渡してやります。SWFObjectはより簡単に、明快な仕様のもと、パラメーターを追加してやることで、お好きな値を渡すことができます。以下がそのサンプルです:

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");
so.addVariable("variable3", "value3");
so.write("flashcontent");
</script>

以上の処理で、全ての変数がFlashムービーに渡され、利用できるようになります。変数は_rootタイムライン上の変数として扱われます。

The SWFObjectスクリプトはURLの文字列に含まれる値を読み込む機能も備えています。例として次のようなURLとなります:http://www.example.com/page.html?variable1=value1&variable2=value2そして、getQueryParamValue()関数を使って簡単にURLから変数を受け取り、Flashムービーで使うことができます。上のURLの例から、変数を取得するサンプルは以下のようになります:

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("variable1", getQueryParamValue("variable1"));
so.addVariable("variable2", getQueryParamValue("variable2"));
so.write("flashcontent");
</script>

getQueryParamValue()関数は、location.hashから変数を取得する機能もサポートしています。これは、Flashアプリケーションの中にディープリンクさせる時に使います。location.hashを使用して、Flashムービーの特定の箇所にディープリンクさせている例は、this demo of Slideshow Proをご覧下さい。

SWFObjectでExpress Installを使う

SWFObjectはMacromedia Flash PlayerのExpress Install機能をサポートしています。SWFObjectスクリプトに含まれているactionscriptファイルで、あなたのFlashムービー内にいながらにして、アップグレードを実行することができます。 ユーザーはplayerのアップグレードのために、一旦あなたのサイトを立ち去る必要がなくなります。アップグレードが完了すれば、自動的にサイトのコンテンツにリダイレクトできます。

ExpressInstall機能を使うには、flaファイルにexpressinstall.asをincludeし、ムービーの最初の部分で、ユーザーがアップグレードが必要かどうかを、以下のようにチェックします:

#include "expressinstall.as"

//ExpressInstallオブジェクトの初期化
var ExpressInstall = new ExpressInstall();

//ユーザー環境にアップグレードの必要がある場合、'start upgrade'ボタンを表示する
if (ExpressInstall.needsUpdate) {

//オプションで、下の数行のスクリプトの代わりにExpressInstall.init()を呼び出すことで、自動的にアップデートさせることができます。

//ステージ中央に、アップグレードのための自作メッセージを表示させます
var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
upgradeMsg._x = Stage.width / 2;
upgradeMsg._y = Stage.height / 2;

//ExpresInstallによるアップデートを開始するためのボタンを設定します
upgradeMsg.upgradeBtn.onRelease = function() {
//ExpressInstall.init()メソッドを実行し、アップグレードを開始します
ExpressInstall.init();
}
//タイムラインを止めておきます。
stop();
}

(ExpressInstallの判定をする際や、)第1フレームにはコンテンツを置かないようにしてください。また、これらの機能はFlash player 7以上の環境が必要です。

ソースをご覧になりたい方は、SWFObject zipファイルに含まれている source/so_tester.flaをご覧下さい。ExpressInstallの動作確認をしたい時は、Flash player 7 (or 6.0.65) をインストールし、こちらのページをご覧下さい。

Flashムービーをポップアップウィンドウの中で使う場合や、ExpressInstallによるアップデート後にユーザーを異なるページに移動させたい時には、xiRedirectUrl属性を使って、Flashムービーのあるページの代わりのページにリダイレクトさせることができます。

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699", true);
so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // must be the absolute URL to your site
so.write("flashcontent");
</script>

Download

SWFObjectはMIT Licenseにてリリースされていますので、(基本的には)制限なしでご使用いただけます。

Download SWFObject 1.5 – Zip形式。swfobject.jsと使用例サンプルとして下記htmlファイルが含まれます。

さらなる使用例が見たい場合は、サンプルページを参考にしてください:

※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。

さらに興味をお持ちの方は、SWFObjectメーリングリスト(英語のみ)に登録してください。このメーリングリストは、SWFObjectを使っていて出くわした問題や、今後の要望について議論するための場です。

他の埋め込み方法との比較

Flash playerのバージョン検出と、HTML書類にFlashムービーを埋め込む方法は、長年議論され続けてきました。このパートではその有名ないくつかの方法と、その問題点を紹介いたします。

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

Macromediaの標準のFlashの埋め込み方は皆さん既にご存知でしょう。Objectタグと、Embedタグを2段構えで併用する方法です。これは最も有名なFlash埋め込み方法で、Macromedia Flashのソフト上からパブリッシュした際のデフォルトの出力方法となっています。この方法は互換性も高く、多くのブラウザをカバーしています。以下はその使用例です:

<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>

これは最も有名なFlash埋め込み方法にも関わらず、いくつかの問題点があります。

  • プラグイン検出がない – プラグイン検出がないので、ユーザーによっては、コンテンツ表示が崩れたり、見れなかったりします。プラグインをインストールしていないIEユーザーには「ActiveXをインストールしますか?」というダイアログボックスが表示されます。これはスパイウェア等が蔓延している現在ではユーザーに恐怖感をあたえまし、Mozillaベースのブラウザでも、似たような問題が起こります。このプラグインのインストール方法は、不親切で、何をインストールしようとしているのかに対する説明も足りません。
  • IEの仕様の変更により、ユーザーは一度画面をクリックして「activate」させてからでないと、操作できないという問題が出てきました。詳細
  • validなHTML、XHTMLではない – embedというタグは、どのバージョンのHTML、XHTMLにもありません。しかし、object タグの仕様の違い(或は、サポートしていない、バグの多さ)の為に、保険としてembedタグが使われています。

2) Objectタグだけを使う / Flash satay

この方法は、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を使うと“some screen readers (like JAWS) will ignore your Flash content”記事のように、Flashを無視する場合があります。
  • IEの仕様の変更により、ユーザーは一度画面をクリックして「activate」させてからでないと、操作できないという問題が出てきました。詳細
  • プラグイン検出ができない – 上記と同様 – プラグイン検出がないので、ユーザーによっては、コンテンツ表示が崩れたり、見れなかったりします。Flash playerはFlashムービーにアクセスした際、たとえどのバージョンであろうとも、無理矢理表示しようとします。もしFlash playerのバージョンが6の時に、7のムービーにアクセスすると、Flash playerは表示しようとし、おかしな結果になることがあるのです。
  • Some methods of Flash satay don’t stream the Flash movie to the player – よってこの方法ではコンテンツswfムービーをロードするためのホルダーとなるswfムービーを用意しないといけません。それによってFlashVarsでパラメーターを渡すようにしているのですが、メンテナンス性も悪く、サーバー上にも余計なファイルが増えるという問題があります。
  • 以前のバージョンのSafariがparamタグを無視する – バージョン2.0 (Tiger)や1.3 (Panther) おそらく1.2.8 (Panther以前)のSafariはparam tagを無視します。結果、Flashvars や Align, Salign等のようなオプションを使う場合、Safariではこれらを参照することができません。

3) indexページにちっちゃいFlashムービーを置いてバージョン検出する方法

この方法は、サイトのindexページに小さいFlashムービーを置き、そのFlashムービーでFlash playerの$versionを調べることで、Flashコンテンツのページに飛ばしたり、アップグレードページに移動させたりする方法です。

この方法の問題点

  • 内部ページではプラグイン検出できない – ユーザーが、内部ページのアドレスを他の人に教えた時には、その人はindexページのプラグイン検出を受けることができません。
  • IEの仕様の変更により、ユーザーは一度画面をクリックして「activate」させてからでないと、操作できないという問題が出てきました。詳細
  • It is not valid HTML or XHTML – これも上の例と同様に、Flashムービーの表示のためにHTML上に置かれたembedタグを置くことは valid ではありません。
  • 検索エンジン対策に不利 – Flash検出用に空のトップページを設置しているために、Googleや検索エンジンで、あなたのページを探すと、”Detecting Flash Player”の文字列が表示されたり、記述なしのページとして検索されてしまいます。これはあなたの会社や商品を宣伝する上で、大きな無駄になってしまいます。Often times developers will not include a link to the other content in the site (since the Flash movie contains the links) so the rest of the site won’t be indexed either.(状況がよくわからないっす。誰か訳して!)

4) The Macromedia Flash Player Detection Kit

Macromediaは、Flash 8用に detection kitという便利なツールを用意しています – しかし、これで十分ではありません。このkitには2つのFlashプラグイン判定の方法が含まれています:

  1. 従来の「indexページに小さいFlashムービーを埋め込んでおく方法」 – (上記)
  2. Javascript – FlashにはJavascriptによるプラグイン判定があります。しかし、不幸なことに、これはあまり使い勝手がよくありません。JavascriptやVBscript、HTMLが1ページに詰め込まれる形になるためです。このような(SWFObject以前の)Javascriptによる検出&埋め込み方法には多くの欠点があり、Flash/HTML開発者の助けにはなりません。そして(もしこだわるのであれば)これはvalidなXHTML・HTMLでもありません。

こちらのページでMacromedia detection kitの、より詳しいレビューを書いています。

5) Javascriptを使ってプラグイン検出・埋め込みをする

この方法はサイトごとによって変わるので、評価がしにくいのですが、今まで見てきたJavascriptによるFlash検出方法のほとんどに、以下のような欠点があるようです:

  • プラグイン判定の信頼度が低い – 現行バージョンのFlash playerでのみ動作することがあるので、新しいバージョンがリリースされた場合、手動でアップデートしないといけません。
  • 余計なコードを書かないといけない – コンテンツを変更したりするのが面倒です。Flashの変更や追加をしたい時に手間がかかります。
  • An overly complicated solution – 多くのFlash埋め込み方法は、ファイルサイズが大きく、複雑になっていますが、このSWFObjectはシンプルかつ軽量に作られています。

FAQ

Q.Internet Explorerに「Active Content Update」問題があると聞きましたが、SWFObjectは対応していますか?
A.端的に言えばイエスです。SWFObjectはIEのアップデートによって起こる「Activating Active Content」問題に対応しています。さらなる詳細はこちらをご覧下さい。
Q.Flashコンテンツ表示される前に代替コンテンツの内容が一瞬表示されるのですが?(WindowsのIEでのみ起こる現象)
A.この現象はFOUCというバグのために起こっていると考えられます。adding a link tag in the head of your document to any stylesheetすることで修正できます。
Q.SWFObjectはHTML1ページ中に複数個のSWFファイルがある場合でも使えますか?
A.はい、それぞれのSWFを用意し、HTML上にそのSWFを入れる為の要素を作り、固有のIDを振ってやるだけで使用できます。
Q.Netscape 4.xで動作するSWFObjectは作れますか?
A. こちらの記事が、Netscape 4.x.上でSWFObjectを動かす参考になります。
Q.SWFObjectを自分のブログに使えますか?
A.使えます。WordpressとTextpattern用のプラグインは こちら
Q.SWFObjectをDreamweaverやGoliveで使うことができますか?
A.Dreamweaverのextensionはavailable at CommunityMXにて公開されています。Golive用のextensionは今のところありません。作られた方がおられましたら、このページからリンクさせていただきます。SWFObjectのスクリプトは、extension機能を使わなくても利用できますが、extensionを使えば、より簡単に使用できます。
Q.このページを他の言語で読みたいのですが?
A. このページのフランス語訳ページです。 スウェーデン語イタリア語スペイン語ポーランド語、他に、フィンランド語もあります。その他、このページを他言語に翻訳してくださった方は、このページにリンクさせていただきます。
Q.Flashからパブリッシュする際にSWFObjectで出力してくれるようなテンプレートはありますか?
A. はい。Fluid Flash Blogで、FlashからSWFObject形式のHTMLを出力するためのエクステンションをダウンロードできます。
Q.SWFObject/FlashObjectを導入しているサイトを教えて下さい。
A.The Library of CongressAdobe.com (多少カスタマイズされています)、Windows.comYouTube.comskype.comSnapple.com、Adobe Photoshopに入っている (in the Flash web photo galleries) と、その他の多くのファイル。Colin Moock氏もMacromedia Detection kitに代わる代替アイデアを公開しています。

関連リンク

trick7.com blog: SWFObject 1.4.4がリリースされたよ
SWFObject最新バージョン1.4.4の紹介。

trick7.com blog: SWFObject 1.4.3がリリースされたよ
前のバージョン 1.4.3 での修正内容。

TNSTUDIO blog: Vista IE7 で swfObject
Vista IE7でswfObjectを利用してるサイトは、閲覧できないらしい問題。

TNSTUDIO blog: Re : Vista IE7 で swfObject
上記問題の対処法(TNSTUDIO 様の記事)


“SWFObjectのドキュメントを日本語に翻訳してみたよ” への29件のフィードバック

  1. これ、知りませんでした。すごい情報だなあ、って素人考えで喜んでしまいました。
    「どうせFlashではSEO対策できない」、と思い込んでいただけに、朗報です。
    「これからは、代替技術が訪れるまでAjaxしかないのか…」
    と、最近は難解なAjaxに取り組んでばかりでしたので、本当に参考になりました。

  2. >えーじゃっくんさん
    不慣れな翻訳を読んでいただき、ありがとうございました。
    SWFObjectのことは以前から知っていたのですが、訳している中で新しい発見もあり、自分でも喜びながらエントリしてました。
    日頃、英語圏の情報量の多さがうらやましく思っていて、つたない翻訳ですが、これからもblogの中でやっていこうと思ってますので、また覗いてやって下さい。

  3. 翻訳ありがとうございます。
    パラメーターの設定法が判明して非常に助かりました。
    ひとつわからないのですが、
    ページ中に複数のswfを埋め込みたい場合はどうしたらよろしいでしょうか?

  4. 複数swfを埋め込む場合は
    <div id=”flashNo1″>hoge.swfの代替テキスト等</div>
    <div id=”flashNo2″>foo.swfの代替テキスト等</div>
    <div id=”flashNo3″>bar.swfの代替テキスト等</div>
    <script type=”text/javascript”>
    var so1 = new SWFObject(“hoge.swf”, “hoge”, “350”, “250”, “7”, “#ffffff”);
    so1.write(“flashNo1”);
    var so2 = new SWFObject(“foo.swf”, “foo”, “350”, “250”, “7”, “#ffffff”);
    so2.write(“flashNo2”);
    var so3 = new SWFObject(“bar.swf”, “bar”, “350”, “250”, “7”, “#ffffff”);
    so3.write(“flashNo3”);
    </script>
    という風に、挿入する箇所のdivタグのIDと、Javascript内で生成するオブジェクトを、埋め込みたい個数分、個別に設定すればOKです。

  5. 投稿者: Anonymous | 2006年08月08日 18:20
    = 先ほど投稿したものです。

    …すいません、早とちりしてコメント投稿してしまいました。
    swfobject.jsはいじらなくてOKなんですね!
    これならFluid Flash Blogのエクステンションは必要ないです。
    ありがとうございます。

  6. 今さらですが翻訳ありがとうございます。
    容易にパラメーターを設定でき助かりました。

  7. お世話になりました!分かりやすい!

    翻訳よく分からないという部分は多分、
    しばしばdeveloperがindexページのちっちゃいFlashムービーの内部で次のページへの遷移を記述してて、そのページのHTMLにはそのサイト内の他のページへのリンクを記述してないものだから、検索ボットがそのサイトのトップページ以降をインデックスすることができないからSEOに不利、
    ってことじゃないでしょうか。

  8. mtのflashの埋め込み方を探していてたどりつきました。こういった情報を翻訳してくださる方がいて本当にありがたいなあと思いました。
    ブログもとても見やすく、わかりやすいですし。。。
    そこで、ちょっと変数の使い方についてお聞きしたいことがあるのです。
    変数の渡し方、埋め込むswfは同じもので、
    例えば外部テキストや外部mp3を
    その都度、違うものを読み込ませるときに、javascriptではどのように記述したらよいのでしょうか。
    色々調べていたのですがどうにもよくわからなくて
    なにとぞよろしくおねがいします。

  9. >rapin様
    はじめまして。コメントありがとうございます。

    >変数の渡し方、埋め込むswfは同じもの
    でロード対象の切り替えってということですと、その場合どこで切り替え対象を区別するのでしょうか?
    僕はJavaScriptが分かりませんので、翻訳内容以外でアドリブできるほどの応用力もありませんので、多分わからないです。すいません。

  10. 説明不足ですみません。簡単に言えば、
    so.addVariable(“variable1”, “value1”);
    は具体的にどのように値とパラメーターを記述すればよいのか、(URLを指定する場合であるとか…)
    わからなかったので質問させていただいてました。

    領域外の質問でしたら、すみませんでした。
    お騒がせいたしました・・・。ありがとうございます。

  11. 初めまして。
    現在、前面flashのサイトを制作しているのですが、SEO対策を考慮に入れたいと思っていたところ、SWFObjectの存在を知り、色々と調べている中でこのサイトを拝見いたしました。
    とても詳しく解説なされているので、大変参考になりました。

    そこで質問なのですが、
    まず、以下の二つのサイトのソースを見てください。

    http://tadaya.net/
    http://www.iseokagenosato.jp/kotonohagusa/

    一つ目のサイトは多田屋という旅館のサイトで、グッドデザインにも選ばれているほど有名な前面flashのサイトです。こちらのソースにはSWFObjectが使用されています。

    一方、二つ目のサイトは伊勢志摩にまつわる言葉を季節ごとに紹介するサイトで、こちらも前面flashのサイトなのですが、ソースにはSWFObjectが使用されておらず、かわりに、objectGeneratorという聞き慣れない、javascriptが使用されています。「objectGenerator」でググってみたのですが、参考になるようなサイトを見つけることができませんでした。

    SWFObjectの有効な点として、teraさんも指摘されている通り、
    >バージョン検出も簡単に設定できるし、Flash playerのアップデートを自作のswf内で処理できるという「Express Install」にも対応。
    が考えられると思います。
    それと、SEO対策として、タグ内に色々とコンテンツを書き込める。ということもあげられると思います。
    しかし、SWFObjectを使用した一つ目のサイトは、ユーザーがプラウザの画面の縮小を行うと画面が切れてしまって、サイトが崩れてしまいます。つまり、ある一定のプラウザの横幅を無条件で要求されています。ユーザーのプラウザの横幅の平均というものがどれくらいかということについて以下のサイトを見てください。

    http://www.akiyan.com/blog/archives/2006/02/mixi800px.html

    上のサイトでは、およそ40%のユーザーが横幅860px以下でサイトを閲覧していることが説明されています。記事は2006年のものですが、モニタの普及率的に考えると現在でもそこまでの変化はないと推測できます。そこでもういちど多田屋のサイトを見てみてください。もし仮に横幅860px以下で見てみると、両端が切れ始めてしまいます。800pxまで下げると、見れない部分もでてきます。40%のユーザーが横幅860px以下でサイトを閲覧していると考えると、SEO対策的にあまり好ましくありません。

    それに対して、伊勢志摩にまつわる言葉を季節ごとに紹介する二つ目のサイトでは、ある一定以下の横幅になると、プラウザに横スクロールバーが現れて、一応、全画面見れることが保証されています。これは、objectGeneratorというjavascriptを使用することで、”minWidth”及び”minHeight”が設定できるためだということがソースから推論できます。そして、objectGeneratorを使用する際、SWFObjectと同様に、SEO対策としてのタグ内に色々とコンテンツを書き込めることもソースから見て取れます。

    少し長くなってしまいましたが、結論として、
    SWFObjectとobjectGeneratorはどちらがよいのでしょうか?

    私としては、「SEO対策として、タグ内に色々とコンテンツを書き込めること」が第一条件として、サイトの制作を行いたいと思っています。

  12. すみません。
    先ほどコメントしたものですが。
    補足部分があったので、

    >SEO対策として、タグ内に色々とコンテンツを書き込めること

    上の記述の部分で「タグ内」とは「bodyタグ内」です。

  13. >dee様
    はじめまして。詳細なコメントありがとうございます。
    2つ目のサイトは初めて知りました。きれいですね。
    objectGeneratorについても初めて知りました。
    確かに一定サイズ以下でスクロールバーが出ますね。

    僕が思いますに:
    Flash(SWF)ファイル内でリキッドレイアウトを実装しておけば表示サイズの問題は解決するのでSWFObjectでもobjectGeneratorでもどちらでもいいと思います。
    SWFObjectを使っている多田屋さんのサイトも下部メニュー部分は800px?ぐらいまではメニュー幅が画面サイズに追随するリキッドレイアウト仕様になっています。で、800以下にすると追随しなくなるようですが、これは製作者の方の判断によるもので、作りようによっては600pxまで対応するリキッドレイアウトも可能ですし、解像度の低いユーザさんにも対応できるかと思います。極度なリキッドはサイトデザインを困難にするので作る側は困りますけどね。

    一定サイズ以下になればスクロールバーを出すというのはJavascriptに通じた人であればそれほど難しくないと思いますし、さくっとSWFObjectと連動も可能なのではないでしょうか?
    http://www.buildupper.com/
    みたいな感じです。

    SWFForcesizeというのもあります。
    参考:http://soohei.net/blog/archives/2008/02/14124544.html

    ですのでスクロールバーの件でどちらの埋め込みを利用するかはそれほど重要視する問題ではない印象を持っています。
    むしろブラウザのバージョンアップなどにどちらが対応力があるかどうかに興味がありますが、まだ僕の方ではそこまで調査しておらず、「みんな使ってるからSWFObjectにしとこか。」と使っています。

  14. ご返答ありがとうございます♪

    紹介していただいた2つのサイトをどちらも見てみました。
    SWFForcesizeというものがあるのですね^^)
    Javascriptについてはそんなに使いこなせないのですが
    これなら簡単に使用できそうなので、リキッドレイアウトにプラスする感じで試してみます!

    大変参考になりました。
    今後もわからないことがあったら質問するかもしれませんが、よろしくお願いいたします。

  15. objectGeneratorは、弊社オリジナルのものなので、一般的に知られてなくてもまあ当然かと思います。
    objectGeneratorはコンセプトとしてはobject要素を生成するためのライブラリでして、従ってobject要素で扱えるすべてのデータを対象にしているのですが、実質的にというか現実的にはswfばかりを扱っているため、現状は事実上swf配置用であると解釈して頂いても構いません。

  16. >yuu様
    コメントいただきありがとうございます。いつもご執筆されている記事等拝見させていただいております。
    objectGeneratorの件、なるほどそうだったのですね!ありがとうございます。JSに疎い僕はSWFObjectに頼りっきりなのですが、できる人はやはり各自用意されたほうが信頼性が高いのですね。

    なぜyuu様がこの記事に辿り着かれたのか?以外の謎は全て解けましたw。ありがとうございます。

  17. おかげさまでとっても助かりました!
    ありがとうございます!

  18. この様に翻訳してくださると、とっても助かります!
    是非、参考にさせて頂きます♪
    ありがとうございました☆

  19. Flash初心者です。CS3で簡単なものからチャレンジしていますが、こちらのサイトが大変役立つと聞いて、大変参考になるコンテンツに感動しました。今後も色々な記事を楽しみにしています。

  20. 近いうち、挑戦したいと思っていたので分かりやすい説明でありがたいです。
    ぜひ、参考にさせていただきます。
    ありがとうございました。

コメントは受け付けていません。