2009 年 2 月 6 日 6
SWFObject を使用してFlashファイルをページに埋め込み、iPhone用に代替画像を表示
先日とある知人からWebに関してに相談されました。
「FlashがiPhoneで表示されなくて困ってる。ページを開くと変なアイコンがでるだけ。なんとかしてほしい」
と。確かiPhoneは現時点ではFlashに対応してない。でも最近はiPhoneを持っている人が町中でもちらほら見かけるので、無視できない存在なんでしょうね。私はiPhoneは持っていませんが、同じブラウザSafariを搭載したiPod touchは持っているので、それで確認してみた。
たしかに変なアイコン出ています。おそらく対応するプラグインは入ってないぞという意味でしょう。
Flashに関しては大昔多少かじった程度であまりくわしくありません。その大昔もFlash2の時代で太古の昔です。でも確かSWFに書き出すときにブラウザが対応していない場合、代替GIF画像を表示するようにオプションがあったような・・・などと思ったんですが、手元にFlashがないので、確認のしようがありません。
いろいろ調べているとSWFObjectというJavascriptライブラリで出会いました。SWFObject はFlashをWebページに埋め込みをするのに便利なJavascriptライブラリで、本家Adobe Flashのアプリケーションが書き出すHTMLコードよりもすっきりきれいなHTMLになったり、Flashプレイヤーのバージョンが検出できたりなどなにかと便利なライブラリです。今回はこれを使ってみました。
Google Codeからダウンロードできます。2009年2月現在の最新バージョンは2.1です。
使い方は簡単で、ほとんどそのまんまサンプルコードのコピペで動きました。
１, ヘッダにてJSの読み込み、swfobject.registerObjectメソッドを追加
<head>タグないでJSファイルの読み込みをおこないます。よくあるパターンですね。まあ<head>タグ以外でもいいんですけど
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">swfobject.registerObject("title", "9.0.0", "/img/expressInstall.swf");</script>
<!-- 第1引数で実際に表示するHTML内のIDを指定する(title)。第2引数で再生に必要なFlashバージョン。第3引数はexpressInstall.swfのパス-->
expressInstall.swfはFlash Playerのバージョンが、再生に必要なバージョンに満たない場合に自動的に実行され簡単にバージョンアップできるようです。
2, 実際のHTMLの場所にFlashを埋め込み
先ほどswfobject.registerObjectメソッドで指定したID付きの<object>タグを実際Webページ位置に埋め込む
<object id="title" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="750" height="250"> <param name="movie" value="/img/index_title.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="/img/index_title.swf" width="750" height="250"> <!--<![endif]--> <div><img src="/img/title.gif" width="750" height="250" alt="Title Logo" /></div> <!-- ↑ここで代替画像を指定する。別に画像でなくてもテキスト等でも可 --> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
<object>タグ途中の<div>タグで代替画像を入れます。別に画像でなくてもテキストなどでもかまいません。
まあこんな感じです。アップロードして、再度iPod touchのSafariで確認したところ、きちんと代替GIF画像が表示されてました。
でもiPhone用のFlashプレイヤーは開発中のようなので、じきに代替画像ではなく、きちんとしたムービーが再生できる日が来ると思います。
