Adobe
製品
Creative Suiteファミリー
Photoshopファミリー
Acrobatファミリー
Flash Platform
Digital Marketing Suite
Digital Enterprise Platform
Digital Publishing Suite
その他の製品一覧
ソリューション
コンテンツオーサリング
教育
金融機関
デジタルマーケティングソリューション
その他のソリューション
ラーニング サポート ダウンロード 会社情報
ご購入
アドビストア安心のサポート& サービス
アカデミック版のご購入学生、教職員、個人
ライセンスのご購入企業、教育機関、官公庁
販売パートナー
検索
 
情報 サインイン
ようこそ、 カート 注文状況 ユーザー登録
マイアカウント
サインアウト
サインインの目的 お客様のアカウントや体験版ダウンロード、製品の拡張機能、コミュニティエリアへのアクセスなどを管理するため
Adobe
製品 セクション   検索  
ソリューション 会社情報
サポート ラーニング
サインイン ようこそ、 注文状況 ユーザー登録
Qty:
Subtotal
Checkout
Adobe Developer Connection / Flash Playerデベロッパーセンター /

SWFObject 2を用いたFlash Playerのバージョン検知とSWFファイルの埋め込み

著者 Bobby van der Sluis

Bobby van der Sluis
  • Refunk
  • bobbyvandersluis.com

Content

  • SWFObject 2とSWFObject Generatorのダウンロード
  • SWFコンテンツのカスタマイズ
  • Adobe Express Installの使用
  • スタティックパブリッシングの仕組み
  • JavaScript API

作成日

14 October 2008

ページ ツール

Facebookでシェア
Twitterでツイート
LinkedInでシェア
ブックマーク
印刷

Tags

必要条件

この記事に必要な予備知識

Flashオーサリングツール、HTMLおよびJavaScriptに関する基礎知識。

ユーザーレベル

中級

サンプルファイル

  • swfobject_examples.zip (117 KB)

その他の要件

Flash Player 9またはそれ以降

  • ダウンロード

SWFObject 2

  • 詳細

任意のコードエディタ

WebページにSWFファイルを埋め込む方法として、標準規格との親和性に優れた複数の手段を提供するのがSWFObject 2です。 SWFの可能な限り簡単な埋め込みを目標に開発されたSWFObject 2は、JavaScriptを用いることで、Flash Playerを検知したり、破損したSWFコンテンツを回避することができます。また、プラグインなしでWebをブラウズするユーザに表示する代替コンテンツの使用や、検索エンジンがコンテンツをインデックスしやすくするための機能、ビジターをFlash Playerダウンロードページに誘導するための機能なども用意されています。 SWFObject 2の検知機能にはAdobe Express Installも収録されており、将来的な変化への対策も万全です。また、JavaScriptデベロッパーに対しては、充実したAPIが提供されます。これらの機能はすべて、コンパクトなJavaScriptファイル(10K以下)に収録されています。

読者がHTML、Flash、JavaScriptのどれを扱っているとしても、SWFObject 2はすべてのデベロッパーにメリットを提供することができます。SWFファイルを埋め込む手段としては、別々の開発理念に支えられた次の2つの方法が用意されています。

  • スタティックパブリッシング:SWFコンテンツと代替コンテンツ両方の埋め込みにマークアップを利用し、邪魔にならない簡潔なJavaScriptを用いて、マークアップだけでは対応できない数々の問題を解決します。この方法では、標準規格準拠のマークアップを記述することが促進されるため、主にWeb規格に敏感なデベロッパーにとって魅力的なはずです。

    この方法の主な長所は、SWFを埋め込む仕組みとしてobject 要素のみが用いられることです。つまり、スクリプト言語に依存する公開方法より、同じコンテンツでリーチできるユーザ数が格段に増えます。一方、最大の短所としては、Internet ExplorerおよびOperaのアクティブコンテンツに課される、「クリック起動」の仕組みを回避できないことが挙げられます。ただし、これに関しては、MicrosoftとEolas間の特許問題で和解が成立したという朗報があります。この結果、Internet Explorerブラウザの大半から段階的に問題のアクティブコンテンツ処理が廃止されつつあり、影響を受けるユーザはごく少数に限られることになります。

  • ダイナミックパブリッシング:代替コンテンツを定義する目的でのみマークアップを利用し、必要最小限のFlash PlayerバージョンとJavaScriptサポートが用意されている場合は、邪魔にならない簡潔なJavaScriptを用いて、これをSWFに置き替えます。この方法には2種類が用意されており、1つ目はSWFObject 1.5とUFOに似た使い勝手の良い完全自動型の方法です。この方法は、既存のFlashデベロッパーの多くにとって魅力的なはずです。2つ目は実際にJavaScript APIを操作する方法であり、これは、よりハードコアなJavaScriptデベロッパーやAJAXデベロッパー向けに用意されています。

    ダイナミックパブリッシングを利用する場合は、その仕組み上、「クリック起動」の煩わしさを回避することができます。また、スタティックパブリッシュよりもコードが簡潔であり、スクリプトを含むアプリケーションとの親和性にも優れています。この方法の一番の弱点と言えば、SWFを埋め込むためにJavaScriptが必要となることです。つまり、スタティックパブリッシュを利用するのに比べ、配信リーチが狭くなることが課題になります。

SWFObject 2は、筆者とGeoff Stearns、Michael Williams(故人)が立ち上げたオープンソースプロジェクトであり、SWFObject 1.5、UFO、およびAdobe Flash Player Detection Kitの後継者にあたるものです。SWFObject 2が目指しているのは、既存のFlash Player埋め込み方法を統一し、Flash Playerコンテンツの埋め込みに関する新たなスタンダードを提供することです。

SWFObject 2とSWFObject Generatorのダウンロード

最新バージョンのSWFObjectとそのドキュメンテーションはGoogle Codeにて公開中です。記事付属のサンプルダウンロードファイルswfobject_2_1.zipには、以下が収録されています。

  • expressInstall.swf: Adobe Express Install向けのSWFObjectのデフォルト機能を収録
  • swfobject.js: 本運用時に使用されるべき、最小化されたSWFObject 2 JavaScriptライブラリを収録
  • index.html、index_dynamic.htmlおよびtest.swf: 試験実装のための参照用として収録
  • srcフォルダ: swfobject.js(最小化されていない、完全なドキュメンテーション込みのSWFObject 2 JavaScriptファイル)とexpressInstall.fla、expressInstall.as(expressInstall.swfのソースファイル)を収録。これらのファイルは、SWFObjectのソースコードを勉強したり、個々のデベロッパーのニーズにあったカスタマイズバージョンを作成するために提供されています。

どのマークアップコードやJavaScriptコードを使えば良いかを判断するのは、やや手間のかかる作業です。そこで本プロジェクトには、この判断を一任することができるSWFObject Generatorという名のパブリッシングツール(別途ダウンロード)が用意されています。このツールには2つのバージョンがあり、1つは単なるHTMLページ、もう1つはAdobe AIR 1.0デスクトップアプリケーションとして提供されています。この2種類の主な違いと言えば、AIRバージョンではクリップボードへのコピー機能が使用できることと、HTMLページをハードディスクに保存できることです。このチュートリアルでは、AIRアプリケーションのバージョンを使用することにします。

メモ:ダウンロードで入手できるファイルは、すべてswfobject_examples.zipのdownloadsフォルダに収録されています。

SWFコンテンツの埋め込み

swfobject_examples.zipファイルを解凍し、example_1フォルダを開きます。このフォルダには、SWFObject 2 JavaScriptライブラリ、expressInstall.swfに加えて、300×120ピクセルの動作検証用SWFファイル、test.swfが含まれています。

スタティックパブリッシングの使用

swfobject_generator_1_1_air.zipファイルを解凍します。(あわせてAdobe AIR 1.0またはそれ以降がインストールされていることを確認します。)パブリッシング方法のデフォルト設定がスタティックになっていることに注目してください。SWFObject Generatorを開き(図1参照)、デフォルトのパラメータを以下の設定に変更します。

  • 「Flash .swf 」フィールドの値:test.swf
  • 「Dimensions」フィールドの値:300x120
埋め込むSWFファイルのサイズ設定
図1. 埋め込むSWFファイルのサイズ設定

「Save File」ボタンをクリックし、HTMLファイルの名前としてindex_static.htmlを入力してから、このファイルをexample_1ディレクトリに保存します。 保存したindex_static.htmlファイルをWebブラウザで開くと(この際、最新バージョンのAdobe Flash Playerがインストールされていることを確認してください)、test SWFファイルが表示され、このSWF上に現在ご利用中のオペレーティングシステムとFlash Playerバージョンの情報が表示されるはずです(図2参照)。

オペレーティングシステムとFlash Playerのバージョンを示す動作検証用SWFファイル
図2. オペレーティングシステムとFlash Playerのバージョンを示す動作検証用SWFファイル

これで、SWFObject 2スタティックパブリッシングを用いた、初めてのSWFファイル埋め込みが完了しました。とても簡単ではなかったでしょうか。

ダイナミックパブリッシングの使用

SWFObject Generatorを開き、先ほどと同じパラメータ設定を行います。ただし、今回はパブリッシング方法として、「Dynamic publishing」を選択するようにします。次に、「Save File」ボタンをクリックし、HTMLファイルの名前としてindex_dynamic.htmlを入力してから、このファイルをexample_1ディレクトリに保存します。このindex_dynamic.htmlファイルをWebブラウザで開くと、先ほどと同じように、オペレーティングシステムとFlash Playerのバージョンが記された動作検証用SWFファイルが表示されます。ご覧のように、パブリッシング方法はポップアップメニューの項目を選び直すだけで簡単に切り替えることができます。

SWFコンテンツのカスタマイズ

SWFObject Generatorの「SWF definition」の節にある「more」リンクをクリックすると、オプションの属性とパラメータを入力してコンテンツの設定を調整するための、詳細サブセクションが表示されます。

これらのパラメータを利用して何ができるかについて詳しくは、SWFObjectのドキュメンテーション、またはFlash Playerテクニカルノート「Flash OBJECTタグおよびEMBEDタグの属性」を参照してください。例えば、「menu」の設定を「false」にすれば、Flash Playerのデフォルトのコンテキストメニューを無効化でき、「quality」の設定を「low」にすれば、SWFファイルの表示品質を「低」にするといった詳細設定が可能です(図3参照)。

「SWF definition」の節を用いたメニューおよび品質の設定調整
図3. 「SWF definition」の節を用いたメニューおよび品質の設定調整

「Save File」ボタンをクリックし、HTMLファイルの名前としてindex_parameters.htmlを入力してから、このファイルをexample_1ディレクトリに保存します。保存されたindex_ parameters.htmlファイルをWebブラウザで開き、SWF上で右クリックしてみます。最低限のコンテキストメニューが表示されることを確認できます(図4参照)。

表示品質「低」のSWFファイル上でコンテキストメニューを表示した状態
図4. 表示品質「低」のSWFファイル上でコンテキストメニューを表示した状態

SWFファイルへのFlashVarsの送信

「SWF definition」の節の最後の部分には、FlashVarsの名前と値のペアを入力するための、2つの入力フィールドが用意されています。複数の名前と値のペアを入力したい場合は、単に「add」リンクをクリックするだけです。この点を解説するためには、name1、name2、name3の3つのFlashVarsを表示する動作検証用のSWFファイルを用意しています。

「SWF definition」の節に表示されたSWFファイル名を「test_flashvars.swf」に変更し、name1、name2とname3の3つのFlashVarsを追加します。各FlashVarsの値には、任意の値を入力してください。次に、「Save File」ボタンをクリックし、HTMLファイルの名前としてindex.htmlを入力してから、このファイルをexample_2ディレクトリに保存します。新たに保存したindex.htmlファイルをWebブラウザで開くと、図5のような結果が表示されるはずです。

 FlashVarsが表示されたSWFファイル
図5. FlashVarsが表示されたSWFファイル

代替コンテンツの使用

「HTML definition」の節にある「Alternative content(代替コンテンツ)」テキストエリア(図6参照)では、Flash Playerがインストールまたはサポートされていない際に表示される、予備コンテンツを定義できます。ダイナミックパブリッシングを使用する場合は、JavaScriptが無効化されていたりサポートされていない場面でも、このコンテンツが表示されます。

代替コンテンツの設定
図6. 代替コンテンツの設定

なお、代替コンテンツは検索エンジンによっても検出されるので、検索エンジンとの親和性に優れたコンテンツを提供するためのツールとしても利用できます。デフォルト設定のままであれば、ユーザをFlash Playerプラグインのダウンロードページに誘導できるよう、SWFObject Generatorは「Get Adobe Flash Player」ボタンをパブリッシュします。

Adobe Express Installの使用

Adobe Express Installは、アドビのWebサイトにその都度アクセスすることなく、最新バージョンのFlash Playerプラグインをダイレクトにダウンロードすることを可能にする、Flash Player内蔵のメカニズムです。Web制作者が利用できるオプション機能のExpress Installは、WindowsまたはMacintoshプラットフォームのFlash Player 6.0.65以降をインストールするビジターが、より新たなバージョンのプラグインを必要とされる場面において、標準化されたダウンロードダイアログボックスを表示します。このExpress Install機能を有効化するには、SWFObject Generatorの「Adobe Express Install」の欄のチェックボックスにチェックを入れ、expressInstall.swfファイルのパスを指定します(デフォルトでは、このファイルがHTMLファイルと同じディレクトリにあることが想定されています)。

ダイナミックパブリッシングの例を再利用する場合は、単に、「Adobe Express Install」のチェックボックスにチェックを入れます。次に、「Save File」ボタンをクリックし、HTMLファイルの名前としてindex_expressinstall.htmlを入力してから、このファイルをexample_1ディレクトリに保存します。過去のFlash Player(Flash Player 6.0.65以上Flash Player 9未満)がインストールされている環境であれば、index_expressinstall.htmlファイルをWebブラウザで開くと、図7のようなダイアログボックスが表示されます。

 Adobe Flash Player Updateダイアログボックス
図7. Adobe Flash Player Updateダイアログボックス

このダイアログボックスの「Yes」をクリックすると、Express Installがダウンロード用のダイアログボックスを開くとともに、すべてのブラウザウィンドウを閉じるよう催促します。Flash Playerのインストール処理が完了すると、再びブラウザウィンドウが開き、ユーザはExpress Installが実行されるきっかけとなったページに、自動的に転送されます。「No」がクリックされた場合、SWFObjectは代替コンテンツへとユーザを誘導します。では、この動作をどうすれば検証できるかが疑問になることでしょう。筆者の経験から言うと、まず、アドビのアンインストーラを利用してFlash Playerをアンインストールし、その後、Flash Playerアーカイブより入手できる過去のプラグインをインストールするのがベストな方法です。

スタティックパブリッシングの仕組み

SWFObject Generatorは、実際のマークアップコードやJavaScriptコードの記述を省略するための優れたツールです。しかし、デベロッパーの中には、自らの開発作業の隅々までをコントロールしたいと考え、コードの記述やカスタマイズ作業を手入力で行うことを希望する方がたくさんおられます。ここまでにパブリッシュしたHTMLページの仕組みに興味がある場合は、ブラウザウィンドウのソース表示機能を利用するか、完成したHTMLファイルをテキストエディタまたはコードエディタで開いてみると良いでしょう。

example_1ディレクトリのindex_static.htmlファイルを開き、最も重要なコード部分を確認してみてください。SWFObjectのスタティックパブリッシングでは、(Internet Explorer独自の条件分岐コメントとともに)入れ子object手法が用いられています。この手法では、マークアップだけを利用して標準規格との互換性を保つとともに代替コンテンツをもサポートすることで、最大限に最適化されたクロスブラウザサポートを実現しています。HTMLファイルのbody部分には、以下のコードが記述されています。

<object id="myFlashContent" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120"> <param name="movie" value="test.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120"> <!--<![endif]--> <a href="/go/getflashplayer"> <img src="/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object>

入れ子object手法を用いる場合、以下の属性が必須になります。

  • id(外側のobject要素のみ。SWFObjectはこの属性を参照目的で必要とします)
  • classid(外側のobject要素のみ。値は常にclsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
  • width(内外両方のobject要素。SWFファイルの幅の指定)
  • height(内外両方のobject要素。SWFファイルの高さの指定)
  • type(内側のobject要素のみ。値は常にapplication/x-shockwave-flash)
  • data(内側のobject要素のみ。SWFファイルのURLの指定)

以下のparam要素も必須です。

  • movie(外側のobject要素のみ。SWFファイルのURLの指定)

コンテンツの詳細設定は、一連のオプション属性とFlash特有のparam要素を利用して調整することができます。 なお、入れ子object手法ではobjectの定義が2度発生するので、すべてのオプション属性と入れ子状のparam要素を2度定義する必要があります。

HTMLファイルの先頭部分には、SWFObject JavaScriptライブラリが配置されているとともに、SWFファイルをSWFObjectライブラリに登録し、SWFObjectに対して、どのFlash Playerバージョン向けにパブリッシュされたかを示すための、1行のJavaScriptコードが配置されています。

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("myFlashContent","9.0.0"); </script>

swfobject.registerObjectは、以下の引数を受け付けます。

  1. objectIdStr(必須):外側のobjectid要素を参照するためのid属性の指定。
  2. swfVersionStr(必須):コンテンツがパブリッシュされた対象のFlash Playerバージョンの指定。(指定書式:"メジャー.マイナー.リリース"、または"メジャー")。
  3. epressInstallSwfUrlStr(オプション):Express Install用のSWFファイルの位置とAdobe Express Installの有効化の指定(SWFObject ZIPアーカイブにはデフォルトのexpressInstall.swfファイルが収録されています)。

カスタマイズ用のすべてのオプションの概要について詳しくは、SWFObjectドキュメンテーションを参照してください。

ダイナミックパブリッシングの仕組み

example_1ディレクトリのindex_parameters.htmlファイルを開き、最も重要なコード部分を確認してみてください。SWFObject 2は、以前のバージョンのSWFObjectおよびUFOと同じように利用できるものの、必要なFlash PlayerとJavaScriptのサポートが用意されている際に、SWFの代替コンテンツにかかわるコードブロック全体を置き替えるという点で以前とは大きく異なります。SWFObject 1.xとUFOでは、参照されているHTMLコンテナの中のコンテンツのみが置き替えられていました。

代替コンテンツのコードとしては、ページのマークアップがobject要素での置き替え後も有効になりさえすれば、任意のHTMLコードブロックを使用できます。したがって、trやtd、liといった要素をコンテナとして使うのは、ページが無効になってしまうため避ける必要があります。実際の置き替え手続きは、WebページのDOM(Document Object Model)が提供された時点で行われます。

デフォルトでは、SWFObject Generatorは以下のマークアップとコンテンツをパブリッシュします。

<div id="myAlternativeContent"> <a href="/go/getflashplayer"> <img src="/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> </div>

HTMLファイルの冒頭には、SWFObject JavaScriptライブラリと、SWFファイルを設定・埋め込むための目立たない簡潔なJavaScriptが数行配置されていることが確認できます。

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; params.menu = "false"; params.quality = "low"; var attributes = {}; swfobject.embedSWF("test.swf", "myAlternativeContent", "300", "120", "9.0.0", false, flashvars, params, attributes); </script>

swfobject.embedSWFメソッドは、必須の5つの引数とオプションの4つの引数を受け付けることができます。

  1. swfUrlStr(必須):SWFファイルのURLの指定。
  2. idStr(必須):SWFと置き替える代替コンテンツが含まれたHTML要素のid属性の指定。
  3. widthStr(必須):SWFファイルの幅の指定。
  4. heightStr(必須):SWFファイルの高さの指定。
  5. swfVersionStr(必須):コンテンツがパブリッシュされた対象のFlash Playerバージョンの指定。(指定書式:"メジャー.マイナー.リリース"、または"メジャー")。
  6. epressInstallSwfUrlStr(オプション):Express Install用のSWFファイルのURLとAdobe Express Installの有効化の指定。
  7. flashvars(オプション):FlashVarsを名前と値のペアで指定することができるJavaScriptオブジェクト。
  8. params(オプション):入れ子状のparam要素を名前と値のペアで指定することができるJavaScriptオブジェクト。
  9. attributes(オプション):object要素の属性を名前と値のペアで指定することができるJavaScriptオブジェクト。

オプションの引数を使用したくない場合は、値としてfalse、0、またはnullを指定できます(または、単に、後の空の引数を省略します)。カスタマイズ用のオプションについての詳しい情報、およびJavaScriptコードの様々な記述様式について詳しくは、SWFObjectドキュメンテーションを参照するようにしてください。ここでご覧いただいたように、ダイナミックパブリッシングはスタティックパブリッシングより簡潔です。コードを手書きするケースでは、ダイナミックパブリッシングの方が手軽に利用できると言えるでしょう。

JavaScript API

SWFObject 2には、JavaScriptデベロッパーがその内蔵機能を積み木のごとく再利用することを可能にする、APIが含まれています。合計で、11のメソッドが用意されています。前述のスタティック・ダイナミックパブリッシングの節でこの中の2つを紹介したので、ここでは5つの新しいメソッドについて解説することにします。

Flash Playerバージョン情報の取得

swfobject.getFlashPlayerVersionメソッドは、インストールされているFlash Playerのメジャー、マイナー、リリースバージョン番号が含まれたJavaScriptオブジェクトを返します。

メモ:ActionScriptを用いてFlashから取得したWIN 9,0,124,0のような文字列には、オペレーティングシステム、メジャー、マイナー、リリース、ビルドの情報が順に配置されています。

Webページのheadセクションに次のJavaScriptコードを配置すると、Flash Playerのバージョンを示す警告ボックスが表示されます。

<h3>The JavaScript API</h3> <p>SWFObject 2 contains an API that enables JavaScript developers to reuse its internal functions like a box of Lego toys. In total, <a href="http://code.google.com/p/swfobject/wiki/api" target="_blank">11 methods</a> are available. In the static and dynamic publishing sections above, I have already shown you two of them; and in this section, I will discuss five new methods.</p> <h4>Retrieving Flash Player version info</h4> <p>The <code><span>swfobject.getFlashPlayerVersion</span></code> method returns a JavaScript object that contains the major, minor, and release version numbers of an installed Flash Player.</p> <p class="note"><strong>Note:</strong> A version string like <code>WIN 9,0,124,0</code> as retrieved with ActionScript from within Flash is formatted as <code>OS major,minor,release,build</code>.</p> <p>The following lines of JavaScript code in the head of your web page will show an alert box indicating your Flash Player version:</p>

example_3フォルダに用意されているindex_getflashplayerversion.htmlをWebブラウザで開くと、図8のような警告が表示されるはずです。

現在インストールされているFlash Playerのバージョンを示す警告画面
図8. 現在インストールされているFlash Playerのバージョンを示す警告画面

非自動的なSWFファイル生成

swfobject.createSWFメソッドは、SWFファイルをダイナミックに生成するための、SWFObject内蔵のクロスブラウザ機能を公開します。この「ローレベル」のダイナミックパブリッシングメソッドは、他のJavaScriptライブラリと組み合わせる際に威力を発揮することができます。引数としては、次に挙げる3つの必須のものがあります。

  1. attObj:object要素の属性と値になる名前と値のペアが含まれたJavaScriptオブジェクト。
  2. parObj:入れ子状のparam要素の定義に用いる名前と値のペアが含まれたJavaScriptオブジェクト。
  3. replaceElemIdStr:SWFで置き替えたいHTML要素のid属性。

メモ:classid、typeまたはcodebase属性と、ムービーのparam要素は省略するようにしてください。

このメソッドは、所定のSWFを表す、新たに作成されたobject要素を返します。なお、このメソッドは、WebページのDOMが利用可能な時点でのみ、呼び出すように注意してください(ヒント:swfobject.addDomLoadEventメソッドを使用する)。

また、swfobject.createSWFは、最低限の必要Flash Playerバージョンが用意されていることを確認するために、swfobject.hasFlashPlayerVersion(versionStr)メソッドとともに使用するのが得策です。versionStr引数の書式は"メジャー.マイナー.リリース"または"メジャー"の体裁で指定できます。

SWFファイルをダイナミックに埋め込みたい場合は、Webページのheadセクションで次のJavaScriptコードを利用することができます。

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> window.onload = function() { if (swfobject.hasFlashPlayerVersion("9")) { var att = { data:"test.swf", width:"300", height:"120" }; var par = { menu:"false" }; var id = "myAlternativeContent"; var myFlashContent = swfobject.createSWF(att, par, id); } }; </script>

example_3フォルダに用意されているindex_createswf.htmlをWebブラウザで開くと、動作検証用のSWFファイルが表示されるはずです。この記事の初めに登場した画面と同じものが表示されるはずです(図2参照)。

読み込み済みのページからのSWFの削除

swfobject.removeSWFメソッドは、Webページに読み込まれているSWFファイルの安全な削除を支援します。Internet Explorerで参照の破損やメモリリークが発生することを防止します。 使い方は簡単です。単に、SWFファイルに関連付けられたobject要素のidをメソッドに渡すだけです。次のコードスニペットには、example_3フォルダのindex_removeswf.htmlファイルに用いられているJavaScriptコードが含まれています。

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = { id:"myFlashContent" }; swfobject.embedSWF("test.swf", "myAlternativeContent", "300", "120", "9", false, flashvars, params, attributes); function addClickHandler() { document.getElementById("remove").onclick = function() { if (document.getElementById("myFlashContent")) { swfobject.removeSWF("myFlashContent"); } return false; }; } window.onload = addClickHandler; </script>

このサンプルページを表示してリンクをクリックすると、Webページ上からSWFファイルが削除されることを確認できます(図9参照)。

SWFファイルの下に「Remove SWF」リンクが表示された状態
図9. SWFファイルの下に「Remove SWF」リンクが表示された状態

URLクエリ文字列から取得したパラメータのSWFファイルへの受け渡し

swfobject.getQueryParamValue(paramStr)メソッドは、URLクエリ文字列またはハッシュ文字列に含まれたparamStrパラメータの値を返します。たいていの場合、このメソッドはクエリ文字列からSWFに値を渡すために、FlashVarsとともに使用されます。次にコードの例を示します。

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; if (swfobject.getQueryParamValue("name1")) { flashvars.name1 = swfobject.getQueryParamValue("name1"); } var params = {}; var attributes = {}; swfobject.embedSWF("test_flashvars.swf", "myAlternativeContent", "300", "120", "9.0.0", false, flashvars, params, attributes); </script>

example_4フォルダを参照し、このフォルダにあるindex_getqueryparamvalue.htmlファイルをWebブラウザで開くと、図10のような、FlashVarsの名前が記されたSWFファイルが表示されます。

 FlashVarの名前が記されたSWFファイルを表示した状態
図10. FlashVarの名前が記されたSWFファイルを表示した状態

この状態で、WebブラウザのURLバーの文字列の最後に次の文字列を追加してみてください。

?name1=getQueryParamValue&name2=is&name3=cool!

Enterキーを押すと、SWFファイルの表示が更新され、FlashVarに値が追加されたことを確認できます。

なお、このメソッドがクロスサイトスクリプティング攻撃で悪用されないようにするために、クエリ文字列に[\"<>.;]のいずれかの文字が含まれている場合は、SWFObject 2がJavaScriptのencodeURIComponent関数を利用して戻り値をエンコーディングします。

次のステップ

このチュートリアルでは、SWFObject 2を利用してHTMLページにSWFファイルを埋め込む方法の概要を紹介してきました。さらに詳しい情報については、以下のリソースを参照することをお勧めします。

  • ドキュメンテーションおよびサンプルについては、Google Codeにて公開中のSWFObject 2 wiki
  • 記事「Flash Embedding Cage Match」

SWFObject 2に関するすべてのご質問、またはその実装に関する問題点のご指摘等がある場合は、SWFObject 2 FAQおよびSWFObject 2ディスカッショングループを参照してください。

製品

  • Creative Suiteファミリー
  • Photoshopファミリー
  • Acrobatファミリー
  • Flashプラットフォーム
  • Digital Marketing Suite
  • Digital Enterprise Suite
  • Digital Publishing Suite
  • モバイルアプリ

ソリューション

  • カスタマーエクスペリエンスマネジメント
  • コンテンツオーサリング
  • デジタルマーケティング

業種別ソリューション

  • 教育
  • 金融機関

サポート

  • ヘルプ&サポート
  • 注文と返品
  • ダウンロードに関するヘルプ
  • ユーザー登録に関するヘルプ

ラーニング

  • ADC: Adobe Developer Center
  • Adobe TV
  • Design Magazine
  • Photoshop Magazine
  • Focus In

ご購入方法

  • アドビストア
  • アカデミック版のご購入
  • ライセンスのご購入

ダウンロード

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

会社情報

  • プレスルーム
  • パートナープログラム
  • 企業の社会的責任(英語)
  • 採用情報
  • 投資家の皆様へ(英語)
  • イベント&セミナー
  • Legal(英語)
  • お問い合わせ
国・地域および言語の選択 日本(変更)
国・地域および言語の選択 閉じる

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • España
  • France
  • Deutschland
  • Hrvatska
  • Ireland
  • Israel - English
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • Magyarország
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Österreich - Deutsch
  • Polska
  • Portugal
  • România
  • Россия
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Slovenija
  • Slovensko
  • Srbija
  • Suomi
  • Sverige
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • Pacific - English
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

当Webサイトをご利用のお客様は、利用条件およびプライバシーポリシー(2011年9月30日更新)にご同意いただいたものとみなされます。

Reviewed by TRUSTe: site privacy statement