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

やることは３つ

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

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

<head>
     〜
     <script type="text/javascript" src="js/swf2js.js"></script>
     〜
</head>

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

<body>
    <script type="text/javascript">
        swf2js.load("sample.swf");
    </script>
</body>

これだけ

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

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

つまり、こんな感じ

<div id="dispswf" style="width: 600px; height: 220px;"></div>
    <script type="text/javascript">
        swf2js.load('top.swf', {tagId: "dispswf"});
    </script>

ということですね。

WebDesignのヨリドコロ

ページ内目次

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