Web Tech Log by 1KB » flash http://1kb.jp/blog Web開発、Webデザイン、SEO、携帯コンテンツなどWebにまつわるテクノロジーを追っかけるブログ。旧名「Web屋に復帰した人間のリハビリ日記」 Fri, 13 Aug 2010 12:38:27 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 SWFObject を使用してFlashファイルをページに埋め込み、iPhone用に代替画像を表示 http://1kb.jp/blog/archives/233 http://1kb.jp/blog/archives/233#comments Fri, 06 Feb 2009 07:48:57 +0000 1kb http://1kb.jp/blog/?p=233 先日とある知人からWebに関してに相談されました。

「FlashがiPhoneで表示されなくて困ってる。ページを開くと変なアイコンがでるだけ。なんとかしてほしい」

と。確かiPhoneは現時点ではFlashに対応してない。でも最近はiPhoneを持っている人が町中でもちらほら見かけるので、無視できない存在なんでしょうね。私はiPhoneは持っていませんが、同じブラウザSafariを搭載したiPod touchは持っているので、それで確認してみた。

20090206ipodflash

たしかに変なアイコン出ています。おそらく対応するプラグインは入ってないぞという意味でしょう。

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プレイヤーは開発中のようなので、じきに代替画像ではなく、きちんとしたムービーが再生できる日が来ると思います。

]]> http://1kb.jp/blog/archives/233/feed 1