swf2js で Flash ファイルを再生してみた

Flash Player のサポートが2020年末をもって終了し、ブラウザ上で Flash (SWF) ファイルを直接再生することはできなくなった。

今回、swf2js という JavaScript 製のライブラリを使うと SWF ファイルがブラウザ上で表示・再生できることを知り、試してみた。

目次

swf2js とは

swf2js は、国産のライブラリ。JS ファイルを一つ読み込んでおくだけで、元々あった SWF ファイルを読み込んで変換し、canvas 要素にうまいこと描画してくれるのだ。

上が公式ページだが、導入手順がイマイチ分からなかったので、色々試行錯誤してみた。

swf2js を CDN から読み込む

swf2js の JS ファイルは以下にある。コレをダウンロードして利用するのが確実だろう。

一方、CDN として読み込めそうな URL は以下の2つを見つけた。いずれも、本稿執筆時点の最新版である v0.7.8 のソースコードで同一である。

以下のサンプルでは GitCDN から読み込むことにした。

実際に使ってみる

SWF ファイルがある場所と同じディレクトリに、次のような HTML を作ってみる。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Practice swf2js</title>
    <!-- ↓ swf2js を読み込んでおく -->
    <script src="https://gitcdn.xyz/cdn/swf2js/swf2js/d9ec7ebe4a886d5337417a595caba49effdea5dd/swf2js.js"></script>
  </head>
  <body>
    <!-- ↓ コレで指定した SWF ファイルが再生される -->
    <script>swf2js.load('./my-flash.swf');</script>
  </body>
</html>

HTML ファイル内には、swf2js.load() という関数を1行書いただけ。相対パスで SWF ファイルを指定している。この script 要素の直後に canvas 要素が挿入されるので、ページレイアウトを調整する際はこの script 要素を囲む親要素で配置などしてやる。

JS 経由で SWF ファイルを非同期読み込みするので、ローカルに作った HTML ファイルを直接ブラウザで開くと、CORS エラーが発生してしまう。適当な開発サーバを立ててやると、ローカルでも動作させられる。

# 「serve」パッケージを使って、カレントディレクトリを起点に `http://localhost:5000/` で開発サーバを立てる
$ npx serve ./

開発サーバ上で HTML ファイルを開いてやると、swf2js が動作してちゃんと SWF ファイルが再生されているはずだ。

swf2js のオプション

swf2js には他にも色々オプションがあるので、以下で紹介する。

<!-- Flash を表示したい位置に ID を付与した要素を置いておく -->
<div id="my-flash-container"></div>

<script>
  swf2js.load('./my-flash.swf', {
    // 画質指定 : 未指定時のデフォルトは `medium`
    quality: 'high',
    // Flash を埋め込む要素の ID を指定する : 指定した要素内の末尾に `canvas` 要素が挿入される
    // 装入される要素は左寄せ表示になるよう勝手に調整されているので、中央揃えなどでレイアウトしたい場合は親要素で予め位置を揃えておく
    tagId: 'my-flash-container',
    // サイズ指定 : 未指定の場合は対象要素の幅に合わせて目一杯広げて表示される
    width: 600,
    height: 400,
    // 背景 : `transparent` も指定できる
    bgcolor: '#ffffff'
  });
</script>

swf2js.load() 関数の第2引数で色んなオプションが取れる。quality や bgcolor などのオプションは、SWF ファイルを object 要素や embed 要素で配置していた時に指定していた項目と同じ要領だ。

tagId というオプションを指定すると、SWF ファイルの挿入位置を任意の要素内に変更できる。script 要素を HTML 内に直接書くのが嫌な場合はこの指定が使えるだろう。

以上

ホントに JS ファイルを1つ読み込むだけで、SWF ファイルがそのまま活用できるところがしンプルで良い。このサイトにも昔作った Flash 作品を展示してある頁があるので、そこに仕込んでおこうかな。