Flash フリーサンプル素材 >> Flash 外部ファイルの作り方一覧 >> Flashの埋め込みにSWFObjectを使う方法(SEO対策に有用)
スポンサードリンク

Flashの埋め込にSEO対策に有用なSWFObjectを使う方法

 SWFObjectとは・・・

Macromediaの標準のFlashの埋め込み方は既にご存知のことと思います。
Objectタグと、Embedタグを併用する方法です。
これは最も一般的なFlash埋め込み方法で、Macromedia Flashのソフト上からパブリッシュした際のデフォルトの出力方法になっています。
そして、この方法は互換性も高く、多くのブラウザをカバーしています。
しかしながら、最も一般的なFlash埋め込み方法にも関わらず、いくつかの問題点があります。
プラグイン検出がないので、ユーザーによっては、コンテンツ表示が崩れたり、見れなかったりします。
プラグインをインストールしていないIEユーザーには「ActiveXをインストールしますか?」というダイアログボックスが表示されます。
Mozillaベースのブラウザでも、似たような問題が起こります。
ユーザーは一度Flash画面をクリックして「activate」させてからでないと、操作できないという問題があります。
特に、embedというタグは、どのバージョンのHTML、XHTMLにもありません。しかし、object タグの仕様の違い(あるいは、サポートしていない、バグの多さ)の為に、保険としてembedタグが使われています。

そこで、HTMLにswfファイルを埋め込む際にembedタグやobjectタグを使わずにSWFObjectを使うという方法があります。
このSWFObjectを使うと最近のIEのアップデートによる、「クリックしないといけません」現象(activate化)も回避でき、設定で、Flashの表示をしない場合には代替機能でimg画像を表示してくれ、alt属性を利用することでFlashに不利と云われているSEO(検索エンジン最適化)対策にもなります。

Flashの埋め込にSWFObjectを使う方法
JavaScriptを有効にされるとFlashが表示されます。

上のFlashは、SWFObjectを使って表示しています。

SWFObjectの仕組みは、ある要素の中身をswfを表示するための文字列に置き換えるというMacromedia Flashのswfを埋め込むためのJavascriptです。
埋め込み方法も簡単で、検索エンジン最適化(SEO)にもなり、HTML、XHTML 1.0に使用できます。
  ※ページはtext/htmlにて利用してください。application/xhtml+xmlのページでは使えません。

 作成手順・・・SWFObjectのダウンロード

http://blog.deconcept.com/swfobject/#download からDownload SWFObject 1.5をダウンロードしてください。
  解凍してできたフォルダの中に「swfobject.js」があるかを確認しておきます。
  ダウンロード ⇒  http://blog.deconcept.com/swfobject/#download

 作成手順・・・JavaScriptの記述・・・

1) Webサーバーのwwwルート(トップページのindex.htmlを置いている階層)に任意のフォルダ(ここでは「js」)を作り、その中にswfobject.jsを入れます。
※このページを例にしています。

2) HTMLページにJavascriptを記述します。

  このページを例にしたFlashムービーを埋め込む為の記述が以下です。
   <div id="flash_contents">
   <script type="text/javascript" src="js/swfobject.js"></script>
   <img src="img/flash_ssplan_s.gif" alt="Flashの埋め込みにSWFObjectを使う方法" /><br />
   JavaScriptを有効にされると<br />Flashが表示されます。
   <script type="text/javascript">
   var so = new SWFObject("ssp.swf", "ssp", "100", "100", "6", "#F8F5F7");
   so.write("flash_contents");
   </script>
   </div>
  

以上が、このページで記述しているJavaScriptです。

 各コードの説明

   <div id="flash_contents">
   <script type="text/javascript" src="js/swfobject.js"></script>
   <img src="img/flash_ssplan_s.gif" alt="Flashの埋め込みにSWFObjectを使う方法" />

   HTML内に、Flashムービーを入れる為の要素(ここでは任意のdivタグ)を用意します。
   swfが実行されない時には、代替機能としてimg画像が表示されます(alt属性が検索エンジン最適化にもなりますので、SEOに不利といわれるFlashの対策にもなります)。

   var so = new SWFObject("ssp.swf", "ssp", "100", "100", "6", "#F8F5F7");

   新規にSWFObjectをつくり、必要なパラメーターを渡します。
   "ssp.swf"  埋め込むswfのファイル名をパスで指定します。
   "ssp"  オブジェクトやembedタグのIDとなります。任意の名前で構いません。
   "100"  Flashムービーの幅 (width)
   "100"  Flashムービーの高さ(height)
   "6"   必要とするFlashPlayerのバージョン(version)。 「メジャーバージョン.マイナーバージョン.リビジョン」のようにドット区切りの数字で指定することができます。(例: "6.0.65")メジャーバージョンの数字だけを"6"のように指定することもできます。
   "#F8F5F7"  背景色(background color)を指定できます(例:#F8F5F7)

   so.write("flash_contents");
   

(ユーザーの環境に条件を満たすバージョンがあった時に)ページにFlashコンテンツを表示させるスクリプトを出力するように命令します。これはHTML要素の中身を置き換えることで実行されます。

対応ブラウザ

  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のバージョン3以降の検出ができます。またユーザーに対し「activating」問題(※クリックしないといけません)に関する余計なクリックを求めることもありません。

Bookmark All-in-Service
20のソーシャルブックマークに対応しています。