2009 年 2 月 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プレイヤーは開発中のようなので、じきに代替画像ではなく、きちんとしたムービーが再生できる日が来ると思います。
[...] [...]
[...] – Web Tech Log by 1KB http://1kb.jp/blog/archives/233 プラグインのインストールを促すのでは無く、代わりの画像を表示。 [...]
初めまして。
同じ問題に直面して、検索していたらこの記事に辿り着きました。
すごく参考になりました。
有り難うございます。
ただ、MacのブラウザOpera 9.27で確認したところ、Flashが動いていませんでした。
PCでもiPhoneでも同じページを閲覧させたいので、Operaで上手く見られないとすごく残念です。。。
何か対策はありますか？
すみません、自己解決しました。
と入れたらPC版のOperaでも上手く動作しました。
あと、私はDreamWeaverで編集しているのですが、保存するときに下記のエラーが出ます。
===
このドキュメントには、存在しないSWFオブジェクトを対象とした次のJavaScriptコードが含まれています。このコードを削除しないと、ページをロードしたときにブラウザにJavaScriptエラーが表示される場合があります。DreamWeaverでこのコードの全てのインスタンスを検索しますか？
swfobject.registerObject(“FlashID”)
===
これって放置しても良いものでしょうか？
プレビューしてみてもどのブラウザでもエラーは発生していませんでしたが。
TANIMUさん
ご返信おそくなりました。私は、現在Dream Weaverを使用していないので、よく分かりませんが、ブラウザでエラーが出ていなければ無視して構わないと思います。
ありがとうございます。
毎回保存の度にエラーが出て若干煩わしいですが（笑）、
特に問題無いのであれば無視することにします。