Flashの埋め込みにSWFObjectを使う方法 /SSPlanning

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

　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（検索エンジン最適化）対策にもなります。

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の記述・・・

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

２） 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です。

　各コードの説明

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

　その他の外部ファイルの作り方一覧

・外部テキストファイルを読み込む場合の作り方は、こちらへ
・HTMLにObjectタグと、Embedタグを使わずにFlashを埋め込む方法は、こちらへ
・スクロールバー付テキスト枠に外部HTMLファイルを表示させる方法・作り方は、こちらへ

↑このページのTOPに戻る

FLASHのフリーサンプル素材

FLASHの制作に便利な情報や、ちょっとしたノート

FlashフラッシュのActionScriptSource一覧

↑このページのTOPに戻る

ブックマークに登録しておきませんか

ブックマークの案内
下記のブックマークに登録しておくと、いつでもどこでもインターネットに繋がる環境であれば、簡単にWebで閲覧することができます。（「お気に入り」のバックアップとしても利用できます）
下のボタンをクリックして、登録サイトを選んでください。（Googleは単独です）
　↓↓↓

　＆　

※ 登録情報 [ 入力例 ]
タイトル（サイト名）：　Flashのフリーサンプル素材 /SSPlanning
ＵＲＬ：　http://www.ssplanning.net/
タグ（ラベル）：　フラッシュ Flash 動画無料フリーサンプル素材ダウンロード
コメント（メモ）：　フラッシュFlashの動画サンプル素材を無料でダウンロード。
　　　　　　　　　　　サンプル素材は、外部ファイル読み込みなので、編集が楽。
　　　　　　　　　　　フラッシュFlashの外部ファイルの作り方ページ。

↑このページのTOPに戻る

■ ブックマークに登録 ■

＆

↓　Flash Page Menu　↓