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デベロッパーセンター /

SWFファイルの代替コンテンツの提供

著者 Bobby van der Sluis

Bobby van der Sluis
  • Refunk
  • bobbyvandersluis.com

Content

  • Flash Playerを利用しないユーザ向けのコンテンツの作成
  • Flash Playerをダウンロードするための新たな方法
  • 検索エンジンにも優しいコンテンツの作成

作成日

9 November 2008

ページ ツール

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

Tags

必要条件

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

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

ユーザーレベル

初級

必要な製品

  • Flash Player 9

サンプルファイル

  • alternative_content_examples.zip (1779 KB)

その他の要件

任意のコードエディタ

 

これまでHTMLページにSWFファイルを埋め込む際には、Adobe Flash Player向けのリッチメディアコンテンツをパブリッシュする仕組みの一環として、2重のタグを用いる方法が多用されてきました。この方法の一番の欠点といえば、最近のWeb標準との準拠性に欠ける旧式のベンダ固有のマークアップが用いられるということです。また、この方法ではマークアップ内に代替コンテンツを含めることもできません。

この問題を解決するために開発されたのが、リッチメディアコンテンツをWebページに埋め込む際に、標準規格との親和性にも優れたいくつかの方法を提供するSWFObject 2です。SWFObject 2は、プラグインなしでWebを閲覧するユーザのための代替コンテンツの使用や、検索エンジンが当該コンテンツをインデックスしやすくするための支援策、さらには、ビジターをFlash Playerのダウンロードページに誘導することにも対応しています。

SWFObject 2には、Flash Player向けのリッチメディアコンテンツを埋め込む方法としてスタティックパブリッシングとダイナミックパブリッシングの2種類が用意されています。どちらのパブリッシング方法でも代替コンテンツは利用できるものの、用いられるテクニックには違いがあります。

  • スタティックパブリッシングではHTMLのobject要素が用いられ、SWFコンテンツと所定の代替コンテンツのどちらを表示するかを、ブラウザが判断できるようにします。
  • ダイナミックパブリッシングではProgressive Enhancementの方針が守られており、代替コンテンツの定義がマークアップ言語で、このコンテンツとSWFコンテンツの置き替えが手短なJavaScriptでそれぞれ行われます。この際、SWFコンテンツとの置き換えは、必要最小限のFlash Playerバージョンのインストールと所定のJavaScriptサポートが確認できる場面でのみ行われます。

2つのパブリッシング方法には幾分の違いがあります。例えば、仮にエンドユーザのブラウザに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に依存するパブリッシュ方法を使用していますが、サイトビジターの約6%は必要なスクリプティングサポートを擁していないことにも注意が必要です。しかも、この統計はパソコンを使用するユーザに限られたものです。

デバイス機器の多くにはインターネットにアクセスするための何らかの機能が装備されていますが、現在のところ、Flash Player 9を装備して出荷されているものは限定的です。他のデバイスではより古いバージョンのFlash Playerがサポートされていたり、最悪の場合、Flashプラグイン向けのコンテンツが一切サポートされないものもあります。例えば、現在のところApple iPhoneはFlash Player向けのコンテンツをサポートしていないため、従来のembedメソッドを使用すると単に積み木のようなロゴ(図1参照)が表示されることになります。サイトビジターにこのロゴを見せたいと思う方は居られないはずです。

サポート対象外のコンテンツを示すiPhone上のロゴ
図1. サポート対象外のコンテンツを示すiPhone上のロゴ

このような問題に対するベストプラクティス的な解決策を提供するのが、代替コンテンツです(フォールバックコンテンツとも呼びます)。サンプルのexamples.zipファイルを解凍し、デスクトップのWebブラウザでexample_1フォルダのindex.htmlを開くと(あらかじめ最新バージョンのAdobe Flash Playerがインストールされていることを確認してください)、「Alternative content rules!」という点滅表示のテキストが含まれたbanner.swfファイルが表示されるはずです(図2参照)。

Flash playerがありません Flash 10が必要ですか? Flash 10が必要ですか?

図2. デスクトップのWebブラウザで表示したSWFバナー

このサンプルをiPhoneのSafariブラウザで開くと、同様のテキストが静止画像に配置されたbanner.jpgが表示されます(図3参照)。

iPhoneのSafariで表示したスタティックな代替バナー
図3. iPhoneのSafariで表示したスタティックな代替バナー

検索エンジンに対しては図4のコンテンツが提示されます。このコンテンツはテキストブラウザを利用しているユーザおよび画像を無効化しながらWebをブラウズするユーザにも表示されます。

画像が無効化されたブラウザに表示される代替テキスト
図4. 画像が無効化されたブラウザに表示される代替テキスト

サンプルのExample 1には、説明用のaltテキストが代替コンテンツとして設定された、1つの画像が配置されています。次にその体裁を示します。

<img src="banner.jpg" alt="Alternative content rules!" />

ここでは単純な例を取り上げたものの、積み木のようなロゴやプラグインのダウンロードを求める指示またはメディアがないことを示すアイコンが表示されたり、コンテンツが一切表示されないといった事態を回避することが、いかに簡単であるかはお分かりいただけるはずです。

どのような代替コンテンツを用意すべきかは、プロジェクトによって異なります。リッチメディアプロジェクトの場合は、まずFlash Player向けのリッチメディアコンテンツを制作し、これを適切なHTMLコンテンツに変換するのが最も実用的な手段と言えます。この際には最新鋭のテクノロジサポートを利用しないユーザ、および検索エンジンにとって、どのコンテンツが重要であるかを見極める必要があります。

リッチメディアコンテンツをHTMLに置き替える際には、見出し、テキスト、リンク、画像、および簡単なフォームといった概念を、念頭におくようにしてください。また、様々な種類のリッチメディアコンテンツをどのように置き替え・変換するかも判断する必要があります。この作業にはかなりのチャレンジが伴うこともあります。例えば、ビデオの場合はストーリーボードの概念にならって、いくつかの主要シーンのキャプチャ画像とそれらの手短な説明文を配置する方法があります。

デスクトップのWebブラウザでexample_2のindex.htmlファイルを開くと、図5のビデオコンテンツが表示されるはずです。

デスクトップWebブラウザのFlash Playerで表示したビデオコンテンツ
図5.デスクトップWebブラウザのFlash Playerで表示したビデオコンテンツ

Flash Playerに対応していしない環境のユーザには、図6に示す代替コンテンツが表示されます。

Flash非対応のブラウザ環境で表示したスタティックコンテンツ
図6. Flash非対応のブラウザ環境で表示したスタティックコンテンツ

検索エンジンや、テキストブラウザを利用しているユーザおよび画像を無効化しながらWebをブラウズしているユーザには、一段と簡潔なコンテンツが表示されます(図7参照)。

画像が無効化されたブラウザで表示した代替コンテンツ
図7. 画像が無効化されたブラウザで表示した代替コンテンツ

Example 2のコードには、各エントリが専用の画像とテキストから構成された、番号付きリストとその3つのエントリが含まれています。

<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」のアイコン(図8参照)や積み木のロゴが表示されてしまいます。

プラグインのダウンロードが必要なことを示すパズルピースのアイコン
図8. プラグインのダウンロードが必要なことを示すパズルピースのアイコン

また、次のようなマークアップの場合は、

<object ... codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">

コンテンツの欠如を示すアイコンが表示されるとともに、Microsoft Internet Explorerでは混乱の原因になりかねない不可解な情報バー(図9参照)が表示されます。

Flash PlayerをActiveXコントロールとしてインストールすることを求めるInternet Explorer
図9. Flash PlayerをActiveXコントロールとしてインストールすることを求めるInternet Explorer

SWFObject 2の開発プロジェクトチームは、今後、これらの旧式の方法を使用しないことを推奨しており、Flash Playerをダウンロードするための手段として、Adobe Express Installと代替コンテンツの2種類の方法を提供しています。この2種類は組み合わせて使用することも可能です。

前者の方法は、古くなったFlashプラグインをアップグレードするためのFlash Player内蔵の機能であり、これを利用することでアドビのWebサイトにアクセスすることなく最新バージョンにアップグレードすることができます。この機能によって、統一された次のダウンロードダイアログボックス(図10参照)が表示されます。

Flash Playerのアップグレードの許可を求めるAdobe Express Install
図10. Flash Playerのアップグレードの許可を求めるAdobe Express Install

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参照)が表示されます。

標準の「Get Adobe Flash Player」ボタン
図11. 標準の「Get Adobe Flash Player」ボタン

なお、このマークアップはFlash Playerダウンロードリンクとそのダウンロードアイコンをデフォルトで提供するものであり、これらはWeb制作者によってカスタマイズできる点に注意が必要です。例えば、代替コンテンツに数行の説明を追加して、当該インタラクティブコンテンツおよびオーディオビジュアル体験を閲覧するために最新バージョンのFlash Playerが必要であることを案内したり、あわせてダウンロードページへのリンクを提供することも可能です。SWFObject 2のダイナミックパブリッシングを使用する場合は、より最新のJavaScriptサポートが必要になることも追記することをお勧めします。

前出のサンプルを更新したもの(example_2フォルダのindex_updated.html)が、Flash Player非対応のビジターによって表示されると図12のようになります。

最新バージョンのFlash Playerのインストールを促す代替コンテンツ
図12. 最新バージョンのFlash Playerのインストールを促す代替コンテンツ

検索エンジンにも優しいコンテンツの作成

これまで何年もの間、検索エンジン最適化(SEO)のベンダおよびコンサルタントの大半は、Flash Playerを多用するWebサイトの開発を避けるようアドバイスしていました。これは、SWFファイルが、検索エンジンにインデックス可能な内容を提供していなかったためです。また、パブリッシュ方法としても2重タグの手法が多用されていたため、代替コンテンツもほとんど使われていませんでした。しかし、SWFObjectやUFOといった、より最近のFlash埋め込み方法が登場したことにより、検索エンジン向けのダイナミックパブリッシングを使用した代替HTMLコンテンツの提供が、とても有効であることが確認されています。

2008年7月、アドビはGoogleやYahoo!をはじめとする大手の検索エンジンベンダと連携し、Flashコンテンツのインデックス対応性を高めることに着手しました。この結果、これらのサイトでも、SWFファイル上のテキスト情報やリンクが、あたかも実際のビジターがアプリケーションの様々なステートをフォローしているかのように、インデックス化されるようになっています。

では、代替コンテンツを使用して検索エンジンがコンテンツをインデックス化できるようにすることのメリットと理由を考えてみましょう。理由はいつくもあります。

まず、一部の検索エンジンがFlashコンテンツをインデックス化できないことが挙げられます。

次に、通常、SWFファイルにはマルチメディアコンテンツが多用されているため、引き続き多くのコンテンツが検索エンジンには認識できないことが挙げられます。したがって、既に代替コンテンツを利用して最新鋭テクノロジ非対応のユーザに説明用のコンテンツを提供し、Flash Playerのダウンロードページを手軽に見つけられるようにしているのであれば、ごくわずかな手順を追うだけで、いわば「一石三鳥」の状態を達成することができます。

3つ目は、これが任意の選択肢として与えられるわけではないということです。検索エンジンは、Flashコンテンツと代替コンテンツの両方をインデックス化する恐れがあります。(実際にGoogleはそうしています。)Web制作者の立場では、コンテンツの重複は、より多くのユーザをターゲットにしたWebコンテンツが制作できるという点でベストプラクティスであると捉えられていますが、検索エンジンベンダの立場からみた場合は、どの項目を検索結果に含めれば良いかなどの判断、あるいは、どのようにしてインデックス化が悪用されるのを防ぐかといったことに関して(クローキング)、様々な課題が投げかけられることになります。

検索エンジンとの相性に優れたコンテンツを作成するには、この二面性を念頭におくことが重要です。ここでは、HTMLコンテンツにFlashコンテンツが十分反映されていることを確認するようにし、後は検索エンジンに何が最適な検索結果であるかの判断を委ねるようにします。例えば、代替コンテンツでは次の点に注意するようにします。

  • リッチメディアコンテンツ内のリンクと完全に一致するリンクを使用する
  • マルチメディアコンテンツの内容を表すテキストコンテンツや画像を追加する
  • 所定のユーザ体験を実現するために何が必要であるかと、Flash Playerをどこからダウンロードできるかについての説明文を追加する
  • スタイルの定義、HTMLの位置指定、およびWebページ視覚要素の維持のためにCSSを追加する(詳しくは、DreamweaverデベロッパーセンターのCSSトピックのエリアを参照してください)

HTMLには階層的な構造と暗示的なセマンティックが採用されているため、HTMLコンテンツはいくつかの点でリッチメディアコンテンツより豊富なメリットを提供します。これらはいずれも、Webコンテンツにその骨格と意味を与えることから、検索エンジンとの相性に優れたコンテンツを作成するにあたっても重要な要素になります。

HTMLには、次に示すように有意味なタグが豊富に用意されています。

  • titleおよびmeta
  • h1~h6およびp
  • ul、olおよびdl
  • strongおよびem
  • blockquoteおよびcite
  • abbr、acronymおよびcode
  • fieldset、legendおよびlabel
  • caption、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オーサリングガイドラインも参照するようにしてください。

  • Flashインデックスの強化
  • ビデオチュートリアル:WebマスターのためのGoogle

また、Dreamweaverデベロッパーセンターも是非ご覧ください。WebサイトやWebアプリケーションの作成・開発を始める上で有用なチュートリアルやリソースへのリンクが多数掲載されています。

製品

  • 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