14 October 2008
ページ ツール |
Flashオーサリングツール、HTMLおよびJavaScriptに関する基礎知識。
中級
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を埋め込む仕組みとしてobject 要素のみが用いられることです。つまり、スクリプト言語に依存する公開方法より、同じコンテンツでリーチできるユーザ数が格段に増えます。一方、最大の短所としては、Internet ExplorerおよびOperaのアクティブコンテンツに課される、「クリック起動」の仕組みを回避できないことが挙げられます。ただし、これに関しては、MicrosoftとEolas間の特許問題で和解が成立したという朗報があります。この結果、Internet Explorerブラウザの大半から段階的に問題のアクティブコンテンツ処理が廃止されつつあり、影響を受けるユーザはごく少数に限られることになります。
ダイナミックパブリッシングを利用する場合は、その仕組み上、「クリック起動」の煩わしさを回避することができます。また、スタティックパブリッシュよりもコードが簡潔であり、スクリプトを含むアプリケーションとの親和性にも優れています。この方法の一番の弱点と言えば、SWFを埋め込むためにJavaScriptが必要となることです。つまり、スタティックパブリッシュを利用するのに比べ、配信リーチが狭くなることが課題になります。
SWFObject 2は、筆者とGeoff Stearns、Michael Williams(故人)が立ち上げたオープンソースプロジェクトであり、SWFObject 1.5、UFO、およびAdobe Flash Player Detection Kitの後継者にあたるものです。SWFObject 2が目指しているのは、既存のFlash Player埋め込み方法を統一し、Flash Playerコンテンツの埋め込みに関する新たなスタンダードを提供することです。
最新バージョンのSWFObjectとそのドキュメンテーションはGoogle Codeにて公開中です。記事付属のサンプルダウンロードファイルswfobject_2_1.zipには、以下が収録されています。
どのマークアップコードやJavaScriptコードを使えば良いかを判断するのは、やや手間のかかる作業です。そこで本プロジェクトには、この判断を一任することができるSWFObject Generatorという名のパブリッシングツール(別途ダウンロード)が用意されています。このツールには2つのバージョンがあり、1つは単なるHTMLページ、もう1つはAdobe AIR 1.0デスクトップアプリケーションとして提供されています。この2種類の主な違いと言えば、AIRバージョンではクリップボードへのコピー機能が使用できることと、HTMLページをハードディスクに保存できることです。このチュートリアルでは、AIRアプリケーションのバージョンを使用することにします。
メモ:ダウンロードで入手できるファイルは、すべてswfobject_examples.zipのdownloadsフォルダに収録されています。
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参照)、デフォルトのパラメータを以下の設定に変更します。
「Save File」ボタンをクリックし、HTMLファイルの名前としてindex_static.htmlを入力してから、このファイルをexample_1ディレクトリに保存します。 保存したindex_static.htmlファイルをWebブラウザで開くと(この際、最新バージョンのAdobe Flash Playerがインストールされていることを確認してください)、test SWFファイルが表示され、このSWF上に現在ご利用中のオペレーティングシステムとFlash Playerバージョンの情報が表示されるはずです(図2参照)。
これで、SWFObject 2スタティックパブリッシングを用いた、初めてのSWFファイル埋め込みが完了しました。とても簡単ではなかったでしょうか。
SWFObject Generatorを開き、先ほどと同じパラメータ設定を行います。ただし、今回はパブリッシング方法として、「Dynamic publishing」を選択するようにします。次に、「Save File」ボタンをクリックし、HTMLファイルの名前としてindex_dynamic.htmlを入力してから、このファイルをexample_1ディレクトリに保存します。このindex_dynamic.htmlファイルをWebブラウザで開くと、先ほどと同じように、オペレーティングシステムとFlash Playerのバージョンが記された動作検証用SWFファイルが表示されます。ご覧のように、パブリッシング方法はポップアップメニューの項目を選び直すだけで簡単に切り替えることができます。
SWFObject Generatorの「SWF definition」の節にある「more」リンクをクリックすると、オプションの属性とパラメータを入力してコンテンツの設定を調整するための、詳細サブセクションが表示されます。
これらのパラメータを利用して何ができるかについて詳しくは、SWFObjectのドキュメンテーション、またはFlash Playerテクニカルノート「Flash OBJECTタグおよびEMBEDタグの属性」を参照してください。例えば、「menu」の設定を「false」にすれば、Flash Playerのデフォルトのコンテキストメニューを無効化でき、「quality」の設定を「low」にすれば、SWFファイルの表示品質を「低」にするといった詳細設定が可能です(図3参照)。
「Save File」ボタンをクリックし、HTMLファイルの名前としてindex_parameters.htmlを入力してから、このファイルをexample_1ディレクトリに保存します。保存されたindex_ parameters.htmlファイルをWebブラウザで開き、SWF上で右クリックしてみます。最低限のコンテキストメニューが表示されることを確認できます(図4参照)。
「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のような結果が表示されるはずです。
「HTML definition」の節にある「Alternative content(代替コンテンツ)」テキストエリア(図6参照)では、Flash Playerがインストールまたはサポートされていない際に表示される、予備コンテンツを定義できます。ダイナミックパブリッシングを使用する場合は、JavaScriptが無効化されていたりサポートされていない場面でも、このコンテンツが表示されます。
なお、代替コンテンツは検索エンジンによっても検出されるので、検索エンジンとの親和性に優れたコンテンツを提供するためのツールとしても利用できます。デフォルト設定のままであれば、ユーザをFlash Playerプラグインのダウンロードページに誘導できるよう、SWFObject Generatorは「Get Adobe Flash Player」ボタンをパブリッシュします。
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のようなダイアログボックスが表示されます。
このダイアログボックスの「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は、以下の引数を受け付けます。
objectIdStr(必須):外側のobjectid要素を参照するためのid属性の指定。swfVersionStr(必須):コンテンツがパブリッシュされた対象のFlash Playerバージョンの指定。(指定書式:"メジャー.マイナー.リリース"、または"メジャー")。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つの引数を受け付けることができます。
swfUrlStr(必須):SWFファイルのURLの指定。idStr(必須):SWFと置き替える代替コンテンツが含まれたHTML要素のid属性の指定。widthStr(必須):SWFファイルの幅の指定。heightStr(必須):SWFファイルの高さの指定。swfVersionStr(必須):コンテンツがパブリッシュされた対象のFlash Playerバージョンの指定。(指定書式:"メジャー.マイナー.リリース"、または"メジャー")。epressInstallSwfUrlStr(オプション):Express Install用のSWFファイルのURLとAdobe Express Installの有効化の指定。flashvars(オプション):FlashVarsを名前と値のペアで指定することができるJavaScriptオブジェクト。params(オプション):入れ子状のparam要素を名前と値のペアで指定することができるJavaScriptオブジェクト。attributes(オプション):object要素の属性を名前と値のペアで指定することができるJavaScriptオブジェクト。オプションの引数を使用したくない場合は、値としてfalse、0、またはnullを指定できます(または、単に、後の空の引数を省略します)。カスタマイズ用のオプションについての詳しい情報、およびJavaScriptコードの様々な記述様式について詳しくは、SWFObjectドキュメンテーションを参照するようにしてください。ここでご覧いただいたように、ダイナミックパブリッシングはスタティックパブリッシングより簡潔です。コードを手書きするケースでは、ダイナミックパブリッシングの方が手軽に利用できると言えるでしょう。
SWFObject 2には、JavaScriptデベロッパーがその内蔵機能を積み木のごとく再利用することを可能にする、APIが含まれています。合計で、11のメソッドが用意されています。前述のスタティック・ダイナミックパブリッシングの節でこの中の2つを紹介したので、ここでは5つの新しいメソッドについて解説することにします。
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のような警告が表示されるはずです。
swfobject.createSWFメソッドは、SWFファイルをダイナミックに生成するための、SWFObject内蔵のクロスブラウザ機能を公開します。この「ローレベル」のダイナミックパブリッシングメソッドは、他のJavaScriptライブラリと組み合わせる際に威力を発揮することができます。引数としては、次に挙げる3つの必須のものがあります。
attObj:object要素の属性と値になる名前と値のペアが含まれたJavaScriptオブジェクト。parObj:入れ子状のparam要素の定義に用いる名前と値のペアが含まれたJavaScriptオブジェクト。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参照)。
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参照)。
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ファイルが表示されます。
この状態で、WebブラウザのURLバーの文字列の最後に次の文字列を追加してみてください。
?name1=getQueryParamValue&name2=is&name3=cool!
Enterキーを押すと、SWFファイルの表示が更新され、FlashVarに値が追加されたことを確認できます。
なお、このメソッドがクロスサイトスクリプティング攻撃で悪用されないようにするために、クエリ文字列に[\"<>.;]のいずれかの文字が含まれている場合は、SWFObject 2がJavaScriptのencodeURIComponent関数を利用して戻り値をエンコーディングします。
このチュートリアルでは、SWFObject 2を利用してHTMLページにSWFファイルを埋め込む方法の概要を紹介してきました。さらに詳しい情報については、以下のリソースを参照することをお勧めします。
SWFObject 2に関するすべてのご質問、またはその実装に関する問題点のご指摘等がある場合は、SWFObject 2 FAQおよびSWFObject 2ディスカッショングループを参照してください。