SWFファイルの代替コンテンツの提供
作成日
9 November 2008
ページ ツール |
必要条件
この記事に必要な予備知識
Flashオーサリングツール、HTMLおよびJavaScriptに関する基礎知識。
ユーザーレベル
初級
必要な製品
- Flash Player 9
サンプルファイル
- alternative_content_examples.zip (1779 KB)
その他の要件
任意のコードエディタ
これまでHTMLページにSWFファイルを埋め込む際には、Adobe Flash Player向けのリッチメディアコンテンツをパブリッシュする仕組みの一環として、２重のタグを用いる方法が多用されてきました。この方法の一番の欠点といえば、最近のWeb標準との準拠性に欠ける旧式のベンダ固有のマークアップが用いられるということです。また、この方法ではマークアップ内に代替コンテンツを含めることもできません。
この問題を解決するために開発されたのが、リッチメディアコンテンツをWebページに埋め込む際に、標準規格との親和性にも優れたいくつかの方法を提供するSWFObject 2です。SWFObject 2は、プラグインなしでWebを閲覧するユーザのための代替コンテンツの使用や、検索エンジンが当該コンテンツをインデックスしやすくするための支援策、さらには、ビジターをFlash Playerのダウンロードページに誘導することにも対応しています。
SWFObject 2には、Flash Player向けのリッチメディアコンテンツを埋め込む方法としてスタティックパブリッシングとダイナミックパブリッシングの２種類が用意されています。どちらのパブリッシング方法でも代替コンテンツは利用できるものの、用いられるテクニックには違いがあります。
- スタティックパブリッシングではHTMLの
object要素が用いられ、SWFコンテンツと所定の代替コンテンツのどちらを表示するかを、ブラウザが判断できるようにします。 - ダイナミックパブリッシングではProgressive Enhancementの方針が守られており、代替コンテンツの定義がマークアップ言語で、このコンテンツとSWFコンテンツの置き替えが手短なJavaScriptでそれぞれ行われます。この際、SWFコンテンツとの置き換えは、必要最小限のFlash Playerバージョンのインストールと所定のJavaScriptサポートが確認できる場面でのみ行われます。
２つのパブリッシング方法には幾分の違いがあります。例えば、仮にエンドユーザのブラウザにFlash PlayerがインストールされているもののJavaScriptが無効化されているようなケースでは、スタティックパブリッシングはリッチメディアコンテンツを表示できるもののダイナミックパブリッシングではこのコンテンツを表示することができません。また、どのパブリッシング方法を利用するかによって、代替コンテンツとSWFコンテンツ（サポートされている場合のみ）では検索エンジンが解釈する内容に違いが出ることもあります。
このチュートリアルではWebコンテンツの総合的なユーザ体験と検索精度を高める上で有効な、代替コンテンツの使用法について解説します。SWFObject 2の紹介記事については、「SWFObject 2を用いたFlash Playerのバージョン検知とSWFファイルの埋め込み」を参照してください。
Flash Playerを利用しないユーザ向けのコンテンツの作成
Flash Player 9は現在、97%以上の普及率を示してはいるものの、これは必ずしも世界中の97%のユーザすべてが、Flash Player 9向けに制作されたリッチメディアコンテンツを視聴できるというわけではありません。例えば、Flash Player 9の特定のリリース番号を対象にしているような場合、視聴可能ユーザ数は97％より低くなります。また、Web制作者の多くはJavaScriptに依存するパブリッシュ方法を使用していますが、サイトビジターの約６％は必要なスクリプティングサポートを擁していないことにも注意が必要です。しかも、この統計はパソコンを使用するユーザに限られたものです。
デバイス機器の多くにはインターネットにアクセスするための何らかの機能が装備されていますが、現在のところ、Flash Player 9を装備して出荷されているものは限定的です。他のデバイスではより古いバージョンのFlash Playerがサポートされていたり、最悪の場合、Flashプラグイン向けのコンテンツが一切サポートされないものもあります。例えば、現在のところApple iPhoneはFlash Player向けのコンテンツをサポートしていないため、従来のembedメソッドを使用すると単に積み木のようなロゴ（図１参照）が表示されることになります。サイトビジターにこのロゴを見せたいと思う方は居られないはずです。
このような問題に対するベストプラクティス的な解決策を提供するのが、代替コンテンツです（フォールバックコンテンツとも呼びます）。サンプルのexamples.zipファイルを解凍し、デスクトップのWebブラウザでexample_1フォルダのindex.htmlを開くと（あらかじめ最新バージョンのAdobe Flash Playerがインストールされていることを確認してください）、「Alternative content rules!」という点滅表示のテキストが含まれたbanner.swfファイルが表示されるはずです（図２参照）。
図２. デスクトップのWebブラウザで表示したSWFバナー
このサンプルをiPhoneのSafariブラウザで開くと、同様のテキストが静止画像に配置されたbanner.jpgが表示されます（図３参照）。
検索エンジンに対しては図４のコンテンツが提示されます。このコンテンツはテキストブラウザを利用しているユーザおよび画像を無効化しながらWebをブラウズするユーザにも表示されます。
サンプルのExample 1には、説明用のaltテキストが代替コンテンツとして設定された、１つの画像が配置されています。次にその体裁を示します。
<img src="banner.jpg" alt="Alternative content rules!" />
ここでは単純な例を取り上げたものの、積み木のようなロゴやプラグインのダウンロードを求める指示またはメディアがないことを示すアイコンが表示されたり、コンテンツが一切表示されないといった事態を回避することが、いかに簡単であるかはお分かりいただけるはずです。
どのような代替コンテンツを用意すべきかは、プロジェクトによって異なります。リッチメディアプロジェクトの場合は、まずFlash Player向けのリッチメディアコンテンツを制作し、これを適切なHTMLコンテンツに変換するのが最も実用的な手段と言えます。この際には最新鋭のテクノロジサポートを利用しないユーザ、および検索エンジンにとって、どのコンテンツが重要であるかを見極める必要があります。
リッチメディアコンテンツをHTMLに置き替える際には、見出し、テキスト、リンク、画像、および簡単なフォームといった概念を、念頭におくようにしてください。また、様々な種類のリッチメディアコンテンツをどのように置き替え・変換するかも判断する必要があります。この作業にはかなりのチャレンジが伴うこともあります。例えば、ビデオの場合はストーリーボードの概念にならって、いくつかの主要シーンのキャプチャ画像とそれらの手短な説明文を配置する方法があります。
デスクトップのWebブラウザでexample_2のindex.htmlファイルを開くと、図５のビデオコンテンツが表示されるはずです。
Flash Playerに対応していしない環境のユーザには、図６に示す代替コンテンツが表示されます。
検索エンジンや、テキストブラウザを利用しているユーザおよび画像を無効化しながらWebをブラウズしているユーザには、一段と簡潔なコンテンツが表示されます（図７参照）。
Example 2のコードには、各エントリが専用の画像とテキストから構成された、番号付きリストとその３つのエントリが含まれています。
<ol>
<li><img src="frame1.jpg" alt="" />It's night-time, a UFO flies over the pasture, cows grazing</li>
<li><img src="frame2.jpg" alt="" />The UFO tries to abduct two cows using a tractorbeam, however the cows appear to be too heavy to be lifted off the ground</li>
<li><img src="frame3.jpg" alt=""/>It's daytime again, cows are still grazing, one cow looks very relieved</li>
</ol>
原則的には、可能な限り、メインのコンテンツ、機能性およびナビゲーションを常に維持できるように努めることが重要です。また、ビジュアル的なアイデンティティやWebページのレイアウトを崩さないようにするために、追加のスタイル規則を作成することが望ましいケースもあります。代替コンテンツは、必ずしもテクノロジサポートが万全ではないターゲットユーザに対して、何かを伝えるための機会と捉えると良いでしょう。
Flash Playerをダウンロードするための新たな方法
では、Flash Playerをインストールしていないビジターにはどのように対応すれば良いのでしょうか。このようなケースでは、最新バージョンのプラグインを簡単にダウンロードできるようにすることが勧められます。これまで、この目標を達成するまでに様々な努力がなされてきました。例えば、Flash Player向けに制作されたリッチメディアコンテンツの従来のパブリッシング方法では、最新バージョンのFlash Playerのダウンロード方法に関して、標準的なものが存在していませんでした。次のようなマークアップでは、
<embed ... pluginspage="http://www.adobe.com/go/getflashplayer" />
代替コンテンツが使用できないだけでなく、「Click-to-download」のアイコン（図８参照）や積み木のロゴが表示されてしまいます。
また、次のようなマークアップの場合は、
<object ... codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
コンテンツの欠如を示すアイコンが表示されるとともに、Microsoft Internet Explorerでは混乱の原因になりかねない不可解な情報バー（図９参照）が表示されます。
SWFObject 2の開発プロジェクトチームは、今後、これらの旧式の方法を使用しないことを推奨しており、Flash Playerをダウンロードするための手段として、Adobe Express Installと代替コンテンツの２種類の方法を提供しています。この２種類は組み合わせて使用することも可能です。
前者の方法は、古くなったFlashプラグインをアップグレードするためのFlash Player内蔵の機能であり、これを利用することでアドビのWebサイトにアクセスすることなく最新バージョンにアップグレードすることができます。この機能によって、統一された次のダウンロードダイアログボックス（図10参照）が表示されます。
Express Installは確認のためのポップアップウィンドウを表示するので、このオプション機能をWeb制作者が有効化することも可能です。
後者の代替コンテンツを用いた方法では、面倒にならないFlash Playerダウンロード方法を提供できます。SWFObject 2 Generatorはデフォルトで以下の代替コンテンツをパブリッシュします。
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
この結果、プラグインのダウンロード場所にビジターを誘導するための「Get Adobe Flash Player」ボタン（図11参照）が表示されます。
なお、このマークアップはFlash Playerダウンロードリンクとそのダウンロードアイコンをデフォルトで提供するものであり、これらはWeb制作者によってカスタマイズできる点に注意が必要です。例えば、代替コンテンツに数行の説明を追加して、当該インタラクティブコンテンツおよびオーディオビジュアル体験を閲覧するために最新バージョンのFlash Playerが必要であることを案内したり、あわせてダウンロードページへのリンクを提供することも可能です。SWFObject 2のダイナミックパブリッシングを使用する場合は、より最新のJavaScriptサポートが必要になることも追記することをお勧めします。
前出のサンプルを更新したもの（example_2フォルダのindex_updated.html）が、Flash Player非対応のビジターによって表示されると図12のようになります。
検索エンジンにも優しいコンテンツの作成
これまで何年もの間、検索エンジン最適化（SEO）のベンダおよびコンサルタントの大半は、Flash Playerを多用するWebサイトの開発を避けるようアドバイスしていました。これは、SWFファイルが、検索エンジンにインデックス可能な内容を提供していなかったためです。また、パブリッシュ方法としても２重タグの手法が多用されていたため、代替コンテンツもほとんど使われていませんでした。しかし、SWFObjectやUFOといった、より最近のFlash埋め込み方法が登場したことにより、検索エンジン向けのダイナミックパブリッシングを使用した代替HTMLコンテンツの提供が、とても有効であることが確認されています。
2008年７月、アドビはGoogleやYahoo!をはじめとする大手の検索エンジンベンダと連携し、Flashコンテンツのインデックス対応性を高めることに着手しました。この結果、これらのサイトでも、SWFファイル上のテキスト情報やリンクが、あたかも実際のビジターがアプリケーションの様々なステートをフォローしているかのように、インデックス化されるようになっています。
では、代替コンテンツを使用して検索エンジンがコンテンツをインデックス化できるようにすることのメリットと理由を考えてみましょう。理由はいつくもあります。
まず、一部の検索エンジンがFlashコンテンツをインデックス化できないことが挙げられます。
次に、通常、SWFファイルにはマルチメディアコンテンツが多用されているため、引き続き多くのコンテンツが検索エンジンには認識できないことが挙げられます。したがって、既に代替コンテンツを利用して最新鋭テクノロジ非対応のユーザに説明用のコンテンツを提供し、Flash Playerのダウンロードページを手軽に見つけられるようにしているのであれば、ごくわずかな手順を追うだけで、いわば「一石三鳥」の状態を達成することができます。
３つ目は、これが任意の選択肢として与えられるわけではないということです。検索エンジンは、Flashコンテンツと代替コンテンツの両方をインデックス化する恐れがあります。（実際にGoogleはそうしています。）Web制作者の立場では、コンテンツの重複は、より多くのユーザをターゲットにしたWebコンテンツが制作できるという点でベストプラクティスであると捉えられていますが、検索エンジンベンダの立場からみた場合は、どの項目を検索結果に含めれば良いかなどの判断、あるいは、どのようにしてインデックス化が悪用されるのを防ぐかといったことに関して（クローキング）、様々な課題が投げかけられることになります。
検索エンジンとの相性に優れたコンテンツを作成するには、この二面性を念頭におくことが重要です。ここでは、HTMLコンテンツにFlashコンテンツが十分反映されていることを確認するようにし、後は検索エンジンに何が最適な検索結果であるかの判断を委ねるようにします。例えば、代替コンテンツでは次の点に注意するようにします。
- リッチメディアコンテンツ内のリンクと完全に一致するリンクを使用する
- マルチメディアコンテンツの内容を表すテキストコンテンツや画像を追加する
- 所定のユーザ体験を実現するために何が必要であるかと、Flash Playerをどこからダウンロードできるかについての説明文を追加する
- スタイルの定義、HTMLの位置指定、およびWebページ視覚要素の維持のためにCSSを追加する（詳しくは、DreamweaverデベロッパーセンターのCSSトピックのエリアを参照してください）
HTMLには階層的な構造と暗示的なセマンティックが採用されているため、HTMLコンテンツはいくつかの点でリッチメディアコンテンツより豊富なメリットを提供します。これらはいずれも、Webコンテンツにその骨格と意味を与えることから、検索エンジンとの相性に優れたコンテンツを作成するにあたっても重要な要素になります。
HTMLには、次に示すように有意味なタグが豊富に用意されています。
titleおよびmetah1～h6およびpul、olおよびdlstrongおよびemblockquoteおよびciteabbr、acronymおよびcodefieldset、legendおよびlabelcaption、thead、tbodyおよびtfoot
例えば、検索エンジンは見出しを自動的に認識することができます。これは当該テキストがh1タグに囲まれているからです。したがって、メインの見出しにはh1要素を使用し、それ以外のサブ見出しにはh2～h6要素を使用するように心がけると良いでしょう。本文のようなテキストコンテンツは、次に示すように段落タグの中に配置するようにします。
<h1>Welcome to the official UFO abduction website</h1>
<h2>UFO abduction merchandise</h2>
<p>Make me rich, buy my stuff...</p>
ナビゲーションバーおよびメインメニューはリスト項目として表現されるので、これらは順不同のリスト項目として、ul要素を用いて定義するようにします。次に示すように、ナビゲーションの各項目はリスト項目にリンクを埋め込む形で表現されます。
<ul id="navigation">
<li><a href="#home">Home</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#merchandise">Merchandise</a></li>
</ul>
タグを使用すること以外に、タグに用意されている属性に注目することも重要です。altおよびtitleといった属性には、必ず意味が分かりやすい値を設定するようにします。
<img src="img/merchandise.jpg" alt="t-shirt and mug with the text: I was abducted by a UFO and lived to tell" />
各HTML要素の意味とそれに用意されている属性の詳細については、SitePointなどのリソースを参照するようにしてください。
なお、検索エンジン最適化（SEO）はそれ自体が高度な専門分野であるとともに、常に変化するトピックであるということに注意する必要があります。適切な構造と意味合いが含まれた代替コンテンツの使用は、SEOへの適用性を高めるための良好な基礎となります。Webサイトのランキングは、最終的には、この基礎が用いられていることと他の様々な要素の組み合わせによって判断されます。
次のステップ
SWFObject 2の使用法について詳しくは、以下のリソースを参照してください。
- SWFObject 2を用いたFlash Playerのバージョン検知とSWFファイルの埋め込み
- Google Codeにて公開中のSWFObject 2 wiki（ドキュメンテーションおよびサンプル）
また、検索エンジン各社が提供する以下のWebオーサリングガイドラインも参照するようにしてください。
また、Dreamweaverデベロッパーセンターも是非ご覧ください。WebサイトやWebアプリケーションの作成・開発を始める上で有用なチュートリアルやリソースへのリンクが多数掲載されています。
