[contact-form-7 id="1781" title="ご意見・ご要望・お問い合せ"]

Technical note

Flashと代替コンテンツをswfobject.jsで切り替え

2009.08.18

仕事でFlashの代替画像を入れる必要があったので、Flashのパブリッシュ時に書き出されるAC_RunActiveContent.jsで出来るのか試してみましたが… javaScriptオン、FlashPlayerオフ、もしくは使用できない状態では代替画像を表示する事は無理なようで、他に代わるものは無いかと調べてみたら、swfobject.jsといういいものがありました。しかも設置はとても簡単で-->

ダウンロード先：swfobject - Project Hosting on Googole Code

設置方法は２通りあります。

1）オブジェクトタグを使って静的に埋め込む 2）javascriptを使って動的に埋め込む

1）の方法だと、IEでアクティブコントロールの許諾要求がでるようなので、2）の方法で記述してみます。

<head>〜</head>タグ内に以下のコードを記述

Javascript
<script src="swfobject.js" type="text/javascript"></script>

swfもしくは代替コンテンツを表示したい場所に以下のように記述

Javascript
<!-- swfの表示 -->
<script type="text/javascript">
  swfobject.embedSWF(
    "hoge.swf", //swfファイルへのパス
    "noFlash",//代替コンテンツを表示するオブジェクトのid
    "720",//表示されるswfの幅
    "520",//表示されるswfの高さ
    "9.0.0"//flashPlayerのバージョン
  );
</script>

<!-- 代替コンテンツの表示 -->
<div id="noFlash">
  <img src="hoge.jpg" alt="代替画像" width="720" height="520" />
</div>

swfobject.embedSWFの引数に代替コンテンツを表示するオブジェクトのidを指定するだけで代替コンテンツが表示されるようになっています。とても便利。 代替コンテンツの表示部分にはもちろん画像だけでなく、いろいろと要素も入れられます。 このスクリプトの良い所は、JavaScriptオフ、FlashPlayerオン、またはその逆、またはどちらもオフの場合でも代替コンテンツが表示される事です。 これからかなりお世話になりそうなアイテムです。

このサイトに詳しい事が載っています。

»SWFObject v2.0 ドキュメント日本語訳

今までSWFが見られない人のために代替コンテンツを埋め込む事など、あまり意識していなかったのでWebデザイナーとして恥ずかしい限りなのだが、現在のユーザの端末は、PCだけでなく、携帯へも広がっていてPCの様にリッチなFlashコンテンツを読込めないものもあり、今後は意識していかなければならないことでしょうね。

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

RERATION POSTS