iPhoneやタブレットでFlashを表示するには!?

直接的にWordPressの話じゃないんですけど…

iPhoneやiPadなどiOSはFlashに対応していませんね。

その他の携帯デバイスも、さりげなくFlashから手を引いていますし、Adobeでは『Flash Professional CC』を『Animate CC』に変更しました。

という訳で、Flashは完全逆風ですから、よほどクライアントさんがFlashを要望されない限り、新しいサイトにFlashを組み込むということはないのですが

 

レスポンシブ化に

立ちはだかる壁

です(@_@)

 

Flashの含まれたサイトをレスポンシブ化して!。という案件はけっこうあります。

プレイクポイントがPCと携帯だけなら、スマホ版からはFlashを取り除いてしまえば良い場合が多いでしょうが、タブレット表示も考えなければならない場合に、やたらと厄介です。

静止画にするとか、アニメーションgifにするか、それとも、わざわざ別コンテンツをはめ込むのか…

 

どれも面倒(T_T)

 

そんなときには、swf2js.js でしょうとGoogleが教えてくれました。

 

swfファイルをリアルタイムにHTML5に変換してくれます。

つまり、これまでのFlashムービーがそのまま使用できるということです。

 

コードのダウンロードはコチラから

https://github.com/ienaga/swf2js

 

やることは3つ

①ダウンロードしたスクリプトファイルを/jsなどのディレクトリーにアップロード

②<head>タグの中でスクリプトを読み込む

③<body>タグ内にscriptを書き、再生したいswfのURLを、swf2js.loadの引数にセット

これだけ

と、あちこちに書いてありますが、これだけでは表示されませんでした。

そこで、GitHub のサンプルコードを見てみると、表示領域を確保して(幅と高さを設定)、その表示領域のidを第二引数にセットしてやる必要があるみたいです。

つまり、こんな感じ

ということですね。