PexJSを使ってスマホのブラウザでもFlashを再生する

はじめに
PexJSをダウンロードする
Flashを再生させる
エラーが出たら
pex.jsを生成する
あらためてエラーを分析する
CWSからFWSへ変換する
あらためてFlashを再生してみる

はじめに

これは開発者のための記事です。
利用者として、訪問したページ内にあるFlashを再生させたい場合は、Androidではドルフィンブラウザを使うのがいいと思います。

参考: Android4.4、5.x以降でもFlashを再生する方法【ドルフィンブラウザ+Hacked Flash】 | TeraDas－テラダス

スマホのブラウザではAdobe Flash Playerのブラウザプラグインを使えないので、Flashを再生できません。
しかし、PexJSを使えばスマホのブラウザでも再生できるようです。

参考: PexJS - これまでの資産を活かす！JavaScript製のFlash Liteランタイム MOONGIFT

PexJSをダウンロードする

入手: https://github.com/PexJS/PexJS

「bin」フォルダの中から「pex.min.js」を取り出します。

Flashを再生させる

HTMLで下記のように利用します。
とても簡単で、エラーが出なければこれで完了です。

<!DOCTYPE html>
<html>
<body>
<!-- canvasタグを設置 -->
<canvas id="flash-area"></canvas>

<!-- PexJSを読み込む -->
<script src="pex.min.js"></script>
<script>
// 第1引数はswfファイルへの相対パス、
// 第2引数は埋め込む場所のid属性
var pex = new Pex("old-video.swf", "flash-area");
</script>
</body>
</html>

エラーが出たら

私の場合は、Flashが再生されずに「invalid swf signature: CWS」というエラーがブラウザのデベロッパーモードのコンソールに表示されました。
「swf シグネチャ cws」で検索してみると、SWFファイルを圧縮している場合は文頭に「CWS」、そうでない場合は「FWS」と記述されるようです。

参考: ＳＷＦファイルの豆知識！ | _level0 - KAYAC Front Engineer Blog

しかし、ソースコードが1行に圧縮されているため、具体的にどんなエラーなのかが分かりません。

そこで、圧縮されていないソースコードを生成することにします。

pex.jsを生成する

公式ページの「To build:」の項目に書かれているとおりに実行すれば、圧縮されていない「pex.js」を生成できます。

Node.jsをインストールする。
https://nodejs.org/en/

jakeをインストールする。
コマンドプロンプトに下記のコマンドを入力する。

npm install -g jake

(下記のように表示されれば成功)
jake@8.0.12 C:\Users\insatsu026\AppData\Roaming\npm\node_modules\jake
├── async@0.9.2
├── utilities@1.0.4
├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1)
├── minimatch@0.2.14 (sigmund@1.0.1, lru-cache@2.7.3)
└── filelist@0.0.4 (utilities@0.0.37, minimatch@0.3.0)

依存パッケージをインストールする。
ダウンロードしたPexJSフォルダの直下で実行すること。
「package.json」に記述されているパッケージが、新しく作られる「node_modules」フォルダ内にインストールされる。

npm install

(下記のように表示されれば成功。「WARN」は気にしなくてよい)
npm WARN package.json Pex@0.0.1 No repository field.
npm WARN package.json Pex@0.0.1 No license field.
ejs@2.5.1 node_modules\ejs

サブモジュールを更新する。
「.gitmodules」に記述されているソースコードが最新の状態になる。

git submodule update --init --recursive

ようやく、ビルドできる。
「output」フォルダが作られるので、「js」フォルダの中にある「pex.js」をコピーして利用する。

jake

(何も表示されなければ成功)

あらためてエラーを分析する

読み込むファイルを「pex.min.js」から「pex.js」に変更して、あらためてコンソールにエラーを表示させます。

7708行目付近のソースコードを読んでみると、原因が分かりました。
PexJSではシグネチャがFWSのもの、つまり非圧縮のSWFファイルしか扱えないようです。
下記のように、文頭の3文字が「FWS」でなければ、「invalid swf signature: 」というエラーメッセージの後に文頭の3文字をくっつけて、コンソールで表示させているようです。

if(binary[pos] != "F".charCodeAt(0) ||
  binary[pos + 1] != "W".charCodeAt(0) ||
  binary[pos + 2] != "S".charCodeAt(0)) {
  // signature check missed
  var errorMessage = "invalid swf signature: " + String.fromCharCode.apply(null, binary.slice(0, 3));
  onerror && onerror(errorMessage);
  EngineLogE(errorMessage);
  return 0;
}