trick7 - SWFObjectのドキュメントを日本語に翻訳してみたよ
SWFObjectのドキュメントを日本語に翻訳してみたよ
このエントリはバージョン1.5のドキュメント翻訳となります。バージョン2.0のドキュメント翻訳はがあります。
HTMLにswfファイルを埋め込む際はSWFObjectを使うのが現状ではベストではないかと思います。
バージョン検出も簡単に設定できるし、Flash playerのアップデートを自作のswf内で処理できるという「Express Install」にも対応。他にもいろいろ設定できます。
最近のIEのアップデートによる、「クリックしないといけません」現象も回避できます。
仕組みは、ある要素の中身をswfを表示するための文字列に置換するというもの。無駄なソースを書かなくていいし、validだしと、いいことづくめな感じです。
作者の記事に、翻訳歓迎みたいなことが書かれていたので、日本語訳してみました。
生粋の日本人なので、翻訳ミス等ありましたら、コメントしていただけると助かります。
9/12追記：関連記事として「」をエントリしました。
7/19追記：getSWFHTML() を使ってもっと簡単に埋め込む方法が「」様に書かれています。調整可能なブログパーツの貼付けコードに最適なのではないでしょうか。
追記：関連記事リンクをエントリ末に追加させていただきました。
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での新機能の詳細は、作者の を参考にして下さい。
[より詳しく調べたい方は、。]
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.
&script type="text/javascript"&
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");
それでは各コードを紹介していきます：
&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のバージョン。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。（例： &#.65”）メジャーバージョンの数字だけを+のように指定することもできます。
background color – 背景色を指定できます（例：#ffffff）
パラメーター（オプション）
useExpressInstall – もしユーザーに機能を使ってアップグレードさせたい時は、このパラメーターを’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のバージョン３以降の検出ができます。またユーザーに対し「activating」問題（※FAQ記事に掲載）に関する余計なクリックを求めることもありません。この記述の更なる詳細はをご覧下さい。
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");
詳しくはのサイトのをご覧下さい。
“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");
以上の処理で、全ての変数がFlashムービーに渡され、利用できるようになります。変数は_rootタイムライン上の変数として扱われます。
The SWFObjectスクリプトはURLの文字列に含まれる値を読み込む機能も備えています。例として次のようなURLとなります：/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");
getQueryParamValue()関数は、location.hashから変数を取得する機能もサポートしています。これは、Flashアプリケーションの中にディープリンクさせる時に使います。location.hashを使用して、Flashムービーの特定の箇所にディープリンクさせている例は、をご覧下さい。
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();
//タイムラインを止めておきます。
（ExpressInstallの判定をする際や、）第１フレームにはコンテンツを置かないようにしてください。また、これらの機能は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', '/upgradefinished.html'); // must be the absolute URL to your site
so.write("flashcontent");
SWFObjectはにてリリースされていますので、（基本的には）制限なしでご使用いただけます。
– Zip形式。swfobject.jsと使用例サンプルとして下記htmlファイルが含まれます。
さらなる使用例が見たい場合は、サンプルページを参考にしてください：
– Flashムービーに変数を渡しています。Valid XHTML 1.0 Strictに対応※
– Flashムービーのフルスクリーン表示が難しいという方は、このテンプレートを試してみてください。Valid XHTML 1.0 Strictに対応※
– このページは、あなたのFlash playerが８以下の時、アップグレードしようとします。（バージョン6.0.65以上に対応）
※ページはtext/htmlにてご利用ください。application/xhtml+xmlのページでは使えません。
さらに興味をお持ちの方は、に登録してください。このメーリングリストは、SWFObjectを使っていて出くわした問題や、今後の要望について議論するための場です。
他の埋め込み方法との比較
Flash playerのバージョン検出と、HTML書類にFlashムービーを埋め込む方法は、長年議論され続けてきました。このパートではその有名ないくつかの方法と、その問題点を紹介いたします。
1) Macromedia のデフォルトの埋め込み方法
Macromediaの標準のFlashの埋め込み方は皆さん既にご存知でしょう。Objectタグと、Embedタグを２段構えで併用する方法です。これは最も有名なFlash埋め込み方法で、Macromedia Flashのソフト上からパブリッシュした際のデフォルトの出力方法となっています。この方法は互換性も高く、多くのブラウザをカバーしています。以下はその使用例です：
&object classid="clsid:d27cdb6e-ae6d-11cf-96b8-"
codebase="/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="/go/getflashplayer" /&
これは最も有名なFlash埋め込み方法にも関わらず、いくつかの問題点があります。
プラグイン検出がない – プラグイン検出がないので、ユーザーによっては、コンテンツ表示が崩れたり、見れなかったりします。プラグインをインストールしていないIEユーザーには「ActiveXをインストールしますか？」というダイアログボックスが表示されます。これはスパイウェア等が蔓延している現在ではユーザーに恐怖感をあたえまし、Mozillaベースのブラウザでも、似たような問題が起こります。このプラグインのインストール方法は、不親切で、何をインストールしようとしているのかに対する説明も足りません。
IEの仕様の変更により、ユーザーは一度画面をクリックして「activate」させてからでないと、操作できないという問題が出てきました。
validなHTML、XHTMLではない – embedというタグは、どのバージョンのHTML、XHTMLにもありません。しかし、object タグの仕様の違い（或は、サポートしていない、バグの多さ）の為に、保険としてembedタグが使われています。
2) Objectタグだけを使う / Flash satay
この方法は、2002年の以降、有名になりました。以下は「objectタグだけを使う」例と、Flash satayを使用した例です。
「objectタグだけを使う」
&object classid="clsid:D27CDB6E-AE6D-11cf-96B8-"
codebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="300" height="120"&
&param name="movie" value="/shockwave/download/triggerpages_mmcom/flash.swf"&
&param name="quality" value="high"&
&param name="bgcolor" value="#FFFFFF"&
&!--[if !IE]& &--&
&object data="/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="/go/getflashplayer"&
FAIL (the browser should render some flash content, not this).
&!--& &![endif]--&
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="" /&
アクセシビリティの問題 – Flash Satayを使うと記事のように、Flashを無視する場合があります。
IEの仕様の変更により、ユーザーは一度画面をクリックして「activate」させてからでないと、操作できないという問題が出てきました。
プラグイン検出ができない – 上記と同様 – プラグイン検出がないので、ユーザーによっては、コンテンツ表示が崩れたり、見れなかったりします。Flash playerはFlashムービーにアクセスした際、たとえどのバージョンであろうとも、無理矢理表示しようとします。もしFlash playerのバージョンが６の時に、７のムービーにアクセスすると、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.（状況がよくわからないっす。誰か訳して！）
Macromediaは、Flash 8用に detection kitという便利なツールを用意しています – しかし、これで十分ではありません。このkitには２つのFlashプラグイン判定の方法が含まれています：
従来の「indexページに小さいFlashムービーを埋め込んでおく方法」 – (上記)
Javascript – FlashにはJavascriptによるプラグイン判定があります。しかし、不幸なことに、これはあまり使い勝手がよくありません。JavascriptやVBscript、HTMLが１ページに詰め込まれる形になるためです。このような（SWFObject以前の）Javascriptによる検出＆埋め込み方法には多くの欠点があり、Flash/HTML開発者の助けにはなりません。そして（もしこだわるのであれば）これはvalidなXHTML?HTMLでもありません。
Macromedia detection kitの、より詳しいレビューを書いています。
5) Javascriptを使ってプラグイン検出?埋め込みをする
この方法はサイトごとによって変わるので、評価がしにくいのですが、今まで見てきたJavascriptによるFlash検出方法のほとんどに、以下のような欠点があるようです：
プラグイン判定の信頼度が低い – 現行バージョンのFlash playerでのみ動作することがあるので、新しいバージョンがリリースされた場合、手動でアップデートしないといけません。
余計なコードを書かないといけない – コンテンツを変更したりするのが面倒です。Flashの変更や追加をしたい時に手間がかかります。
An overly complicated solution – 多くのFlash埋め込み方法は、ファイルサイズが大きく、複雑になっていますが、このSWFObjectはシンプルかつ軽量に作られています。
Q.Internet Explorerに「」問題があると聞きましたが、SWFObjectは対応していますか？
A.端的に言えばイエスです。SWFObjectはIEのアップデートによって起こる「Activating Active Content」問題に対応しています。さらなる詳細はをご覧下さい。
Q.Flashコンテンツ表示される前に代替コンテンツの内容が一瞬表示されるのですが？（WindowsのIEでのみ起こる現象）
A.この現象はというバグのために起こっていると考えられます。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はにて公開されています。Golive用のextensionは今のところありません。作られた方がおられましたら、このページからリンクさせていただきます。SWFObjectのスクリプトは、extension機能を使わなくても利用できますが、extensionを使えば、より簡単に使用できます。
Q.このページを他の言語で読みたいのですが？
A. このページのページです。 、、、、他に、もあります。その他、このページを他言語に翻訳してくださった方は、このページにリンクさせていただきます。
Q.Flashからパブリッシュする際にSWFObjectで出力してくれるようなテンプレートはありますか？
A. はい。で、FlashからSWFObject形式のHTMLを出力するためのエクステンションをダウンロードできます。
Q.SWFObject/FlashObjectを導入しているサイトを教えて下さい。
A.、 （多少カスタマイズされています）、、、、、Adobe Photoshopに入っている () と、その他の多くのファイル。Colin Moock氏もMacromedia Detection kitに代わるを公開しています。
関連リンク
SWFObject最新バージョン1.4.4の紹介。
前のバージョン 1.4.3 での修正内容。
Vista IE7でswfObjectを利用してるサイトは、閲覧できないらしい問題。
上記問題の対処法（TNSTUDIO 様の記事）
Name (required)
Mail address (will not be published) (required)
Remember personal info
CommentYou can use some HTML tags for decorating.
Trackbacks:6
pingback from
[…] trick7 – SWFObjectのドキュメントを日本語に翻訳してみたよ (tags: flash) […]
pingback from
[…] trick7 – SWFObjectのドキュメントを日本語に翻訳してみたよ
& Webクリエイター必須の「Firebug」 Firebugに辞書機能をつける「CodeBurner for Firebug」 & […]
pingback from
[…] & SWFObjectのドキュメントを日本語に翻訳してみたよ& […]
pingback from
blog: SWFObjectのドキュメントを日本語に翻訳してみた…avascript flash player detection and embed script htmlにswfファイルを埋め込む際はswfobjectを使うのが現状ではベストではないかと思います。 バージョン検出も簡単に設定できるし、flash pla…はてなブックマークより […]
pingback from
[…] & SWFObjectのドキュメントを日本語に翻訳してみたよ& […]
pingback from
[…] SWFObjectのドキュメントを日本語に翻訳したページ […]}