新しい記事を書く事で広告が消せます。
Ads by Google
[カテゴリ:スポンサー広告]SWFObject.jsを使ってIE上でFlashをアクティブ化する
[カテゴリ:Javascript]IEでFlashがあるサイトを訪れるとFlashのSWFファイルの周りに点線入った上に、下の画像のようなメッセージが表示されますね。

「このコントロールをアクティブ化して使用するにはクリックしてください。」
って、使用しない人いるんですか?これってなんの意味があるんでしょうね?
Flashを利用したセキュリティホールへの対応とかなんでしょうか?
他のブラウザではそういうのないとこみるとなくてもいいもんなんでしょう、多分w
なにより点線も邪魔だし、メッセージが出るのも嫌いなんです。いちいちクリックしなきゃならんのもイヤなんです。
またもや自分が嫌いだからって理由でユーザビリティ無視して消しちゃいますw
今回はSWFObject.jsってJavascriptライブラリを使います。
さっそくdeconcept > SWFObjectの「Download
SWFObject 1.5」ってとこからダウンロードしてきます。
設置方法は
<head>〜</head>内に
<script type = "text/javascript" src="swfobject.js"></script>
Flashを挿入する部分に
<div id = "flashContent">
Flashが表示されない時に表示される部分。この「flashContent」内がSWFファイルと入れ替わる形になります。
画像でもHTMLでも可。検索ロボットのクロールにも拾われるのでSEO対策にもなります。
</div>
<script type = "text/javascript">
var so = new SWFObject("ファイル名.swf", "名前", "横サイズ", "縦サイズ", "必要とされるFlashのヴァージョン(半角数字で)", "背景色");
so.write("flashContent");
</script>
複数のFlashを配置する時は<div id = "flashContent">の名前を変えてください。
サンプルを用意しましたので、どんな風になるかIEで見てみてください。
SWFObject.jsで出来るのはそれだけではありません、Flashを使うなら是非導入したい機能がたくさんあります。
背景を透明にするなどのパラメーターを追加するのも簡単。
っていうか、Flashの背景を透明にするって今はIE以外でもできるんですね、どうせIEだけなんだろうと無視してました(^^;
var so = new SWFObject("ファイル名.swf", "名前", "横サイズ", "縦サイズ", "必要とされるFlashのヴァージョン(半角数字で)", "背景色");
の下に追加していきます。
- 背景透明なら
so.addParam("wmode", "transparent");- クオリティを変更するなら
so.addParam("quality", "autolow");- 表示位置を変更するなら
so.addParam("salign", "br");
他のパラメータとかはFlashで使える属性(パラメータ)の記事を参考にしてください。
Flashvarsパラメーターを使って、Flashに変数を渡すには
"flashvars"というパラメータは通常
変数名1=値1&変数名2=値2&変数名3=値3
といったように「変数名=値」をひとくくりに、「&」を使ってつなげていきますが、SWFObjectを使えばより簡単に、わかりやすく設定できます。
渡す変数値が決まっている場合は
so.addVariable("変数名1", "値1");
so.addVariable("変数名2", "値2");
so.addVariable("変数名3", "値3");
のように追加していきます。
URLから変数と値を読み込み、それをFlashに渡す場合は
URLの例:
http://www.sample.com/index.html?変数1=値1&変数2=値2
SWFObjectには上記の変数を受け取るスクリプトがちゃんと用意してあります。
so.addVariable("変数名1", getQueryParamValue("変数名1"));
so.addVariable("変数名2", getQueryParamValue("変数名2"));
を追加することで、変数を渡すことができます。
他にもFlash Playerがなかったら、インストールした後、また自分のサイトに戻ってくるとか、いろいろ便利な機能が使えるようになります。
trick7.com blog > SWFObjectのドキュメントを日本語に翻訳してみたよ で公式サイトを日本語化して説明してあります。


