【WEB制作】HTMLに1行コードを記述するだけ！？FlashをHTML5に簡単変換

vToTv

一昔前のwebサイト(ホームページ)では、フラッシュ(以下、flash)が結構使われていました。
動きがあるフルflashのwebサイトというのは、昔はリッチなデザインイメージがありました。
目的によりますが、今からみれば、フルflashのwebサイトはSEO上ではよくないのですが…。

ちなみに、Macromedia FLASH 1としてFlashが登場したのは1996年です。
以来，2002年の”MX”，2005年の”8″など、数々のバージョンと進化を経て，2007年にはCS3に到りました。

アクションスクリプトの高速化やサーバーとの連携強化は，Flashで制作された各種コンテンツを，立派な「商品」として利用できるレベルに高めています。ブロードバンドの普及やデバイスの進歩も手伝い，リッチなWeb体験をユーザーが享受しやすい環境になった現在，Flashを用いたWebサイトは安定した普及期に入ったと言えるでしょう。

そのflashですが、2020年度末に、ついに、アドビはflashのサポートを終えるようです。

参考：Adobe Flash Playerサポート終了情報ページ

flashサポート終了後、WEBサイトにあるflashを動作させるには

flashを動けるようにリニューアルするのは結構手間も費用の負担も必要なので、
二の足を踏んでいるお客様は多いんじゃないでしょうか。

そこで、swf2jsというjsを使えば、HTMLに1行コードを記述するだけ！？FlashをHTML5に簡単変換できるようです。
但し、無料版ですので、できることとできないことがあるようです。
例えば、Androidのメジャーなバグは回避してますが、どうしても、端末固有のバグはあるようです。
以下は、無料版の設置方法となります。

swf2js ダウンロードサイト

SWF/FlashをHTML5に変換

HTMLに1行コードを記述するだけで変換が可能になるjsです。

flashのファイルであるswfをHTML5に変換するjsを設置するだけで簡単に表示させることが可能です。
SWF2JS」はflashのSWFファイルをHTML5に自動変換し、IPHONE、ANDROIDなどのスマートフォンで再生する事ができるサービスです。

下記WEBサイトからJSをダウンロード
github版swf2js

「swf2js」の使い方

1.swf2js.jsをアップ

2.headにswf2jsを記述

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

head内に記述した下記のコードを記述することでjsの働きによってフラッシュがhtml5に変換されるのです。

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

3.表示させたい場所body内にタグを設置しswfのパスを指定する。

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

これでHTML5にて表示できます。

swf2js無料版のメリットとデメリット

メリット

〇SWFファイルがそのまま使える
本来であれば、既存のflaファイルから
毎回HTML5Canvasで出力する必要があります。
swf2jsならswfを活用して使用できるのでHTMLのタグを書き換えるだけで改修が完了可能です。
今までと変わらずタブレットやスマホでも使うことが可能のようです。

〇画面の自動リサイズ
swfは画面の大きさに合わせて自動的にリサイズ。
swf2jsはこのリサイズ機能も実装しているので画面の大きさを気にする必要はないです。

デメリット

メジャーなバグは回避しているようですが
どうしても、端末固有のバグはあるようです。

最後に

ホームページ内のflashをHTML5に簡単変換に使えるツールを簡単に解説させていただきました。
HTMLに1行コードを記述するだけでFlashがHTML5に簡単変換できるなんて楽ですよね。
但し、できることとできないことがあるようなのでご利用の場合は、自己責任でお願いいたします。
なお、有料版もあるようです。バグが気になる方はこちらの有料版がいいかもしれません。
参考：https://swf2js.com/

コラム