ひきぷろのプログラミング日記

プログラミングの日記です。

過去のFlashコンテンツをどのように再利用するか

Adobeが2020年にFlashのサポートを終了することを発表しました。

jp.techcrunch.com

つい数時間前 (2017/7/26 23:30時点)、Yahooゲームにある、Flash製のクマのプーさんを残すのかみたいな記事も出ています。

nlab.itmedia.co.jp

Webコンテンツ製作者の中には、過去の資産をどう活かしたら良いか気になってる人も多いと思うので、個人的に再利用方法だけ書いてみようと思います。お仕事で10年ほど前から5年前くらいにかけてFlash製作に関わっていたこともあるので、その経験から考えられることを書いてみます。なお、5年前からFlashコンテンツを作っていないため、新しい動向には詳しくありません。具体的な方法について気になる方は、より詳しい記事を探してみてください。

では、Flashコンテンツの再利用方法について書いてみます。

SWFファイルをJavaScriptのライブラリ内で実行する

詳しく調べられていませんが、Mozilla (ブラウザのFirefoxを作っている会社) が、ShumwayというJavaScript製のFlashプレーヤーを作っています。
github.com

このプレイヤー上でSWFを再生することができれば、SWFファイルをHTML + JavaScriptに変換する手間をかける必要がなくなりそうです。実際にこのプレイヤーを使用したことはないので、気になるかたは実行して試してみるか、他の記事を検索してみてください。

FlashコンテンツをHTML5に変換する

上で紹介したShumwayで再生できない場合や、大きなライブラリをHTML読み込み時にロードしたくない場合は、何らかの方法で変換する必要が出てきます。FlashコンテンツをHTMLに変換する場合は、次の2つのうち、ケースに応じて方法を考える必要があります。

  • 手元にSWFファイルのみ残っている場合
  • 手元にソースコードが全て残っている場合

手元にSWFファイルのみ残っている場合

flaファイル、画像・音声ファイル、ActionScriptソースコード等が残っていないケースが多々あると思います。Flash製作を外注していた場合はこのケースが当てはまることがあるでしょう。

SWF変換サービスを利用する

無料の変換ツールもいくつかあるようです。SWFの変換サービスを提供している会社も何社かあります。日本語で問い合わせが可能な会社もあるので、自力でどうにもならなさそうな場合は相談してみてください。
wordpress.ideacompo.com

SWFをHTML5に変換する時の注意点

どんなコンテンツでも完全に変換できるかというと、そうでもないようです。というのは、そもそもAdobeがSWFフォーマットの完全なドキュメントを公開していないこともあり、ドキュメントに書かれていない機能は、変換サービスの提供者が手探りで変換する必要があるからです。SWFフォーマットの資料は次のURLにあります。

www.adobe.com

ほとんど労力をかけず、正常に変換できるのは、次の全てに当てはまる場合だけだと思います。

  • ActionScriptを使用していない
  • FlashVideo (flv) を使用していない
  • ベクタ画像のアニメーションを使用していない
  • SWF内に他のSWFを埋め込んでいない

このリストのいずれかに反するケースでは、変換が困難になるか、かなりのコスト増になると思います。Webのエンジニアでも、Flashのファイルフォーマットに深く精通している人以外は、簡単には解決策が見つからないと思います。

  • まずはSWFからHTMLに変換するツールを試してみる
  • お金をかけて短期間で解決したい場合は、変換サービスの提供会社に見積もりをお願いする
  • ノウハウを溜める必要がある場合、もしくはお金がかけられない場合は、さらに詳しい記事を検索する

手元にソースコードが全て残っている場合

部分的にではなく、完全なSWFが出力できるソースコードが残っている場合について書きます。部分的にしか残っていない場合は、上の、"手元にSWFファイルのみ残っている場合" と同じ状況になると思います。ここでは、こういう方法が考えられるのでは?という、エンジニア向けの方法論についてだけ書いてみます。

Animate CCで変換する

AdobeのAnimate CCを使うことで、簡単なSWFであれば変換できるようです。サポートしている機能については、Adobeのサイト等で調べてみてください。数年前の段階では、ActionScriptを使用したFlashコンテンツの変換はサポートされていませんでした。
helpx.adobe.com

手作業で変換 - flaファイルの変換

flaファイル無しで、FlashDevelop等のエンジニア向け開発ツールのみを使って作られたFlashコンテンツを変換する場合に比べると、flaファイルを使っている状況では、変換する作業が1段階難しくなりそうです。flaファイル内には、さまざまなアセット (画像、音声、アニメーション等) を含めることができるのですが、その1つ1つについて、外部に出力する等の前処理をしておく必要があるからです。また、Flashのアニメーションにはベクタ画像を含むことができるので、いまだにHTML5の機能を使っても移植が容易ではない印象があります。

画像ファイルの処理

通常Webで使われるラスタ画像については、パーツごとに、flaファイル内からJPGやPNGファイルを抜き出すことで、JavaScriptから扱いやすくできると思います。ベクタ画像については、個人的にはSVGではなく、PNGで出力しておいた方が良いと思います。SVGをブラウザ内で扱う場合は、実装方法によっては対応デバイスの範囲を狭めることになるかもしれません (数年前のブラウザや、スマホ、ゲーム機上のブラウザをサポート範囲に含めるのは難しいかもしれません)。

flaファイル内にベクタアニメーションが作られている場合は、さらにHTMLへの変換が難しくなると思います。小刻みにGIFアニメーションを出力するか、フレームごとに連番PNGファイルを出力しておく必要がありそうです。ベクタ画像のモーフィングアニメーションが含まれる場合は、SVGへの変換を諦める方が良いと個人的には思います。モーフィングアニメーションが少ない場合は、Paper.js等のライブラリを使うことで、ベクタ形式のまま、地道に1つずつ移植することもできるかもしれません。

音声ファイルの処理

音声については、1つずつmp3やogg等の形式に変換すると、JavaScriptで扱いやすくなると思います。

動画ファイルの処理

FlashVideo (flv) は、videoタグで再生することが難しいため、mp4へ変換しておくのが良いと思います。

手作業で変換 - ソースコードの変換

ActionScriptソースコードを、JavaScriptに変換する場合について書きます。ActionScriptのコードは、JavaScriptに似ています。また、TypeScriptにより良く似ています。簡単なトランスレータを作ることで、TypeScriptに変換する処理は難なくこなせる気がします。トランスレータは自分で書かなくても、検索すればすでにライブラリがあるかもしれません。自力で書く場合でも、既存のプリプロセッサ (m4とか) が使えるかもしれません。PerlRubyソースコードの変換処理を書いても良いかもしれません。

いったんTypeScriptに変換しておくことで、TypeScriptからJavaScriptへの変換時にES5やES6等、対応ブラウザに合わせてJavaScriptの出力形式を選ぶことができます。

ActionScriptのコードが変換できたとしても、Flashの組み込みクラスの移植はどうするのか?という問題が残ります。変換対象となるActionScriptのコードの複雑さによって移植の方針を変えた方が良いかもしれません。

画像の処理

  • CreateJSの機能の呼び出しに変換することができないか調べてみる (CreateJSはAdobeの人が作っていた気がします。ActionScriptAPIに似せてあります。)
  • ラスタ画像のみを使用している場合は、HTML5Canvasへの描画クラスを新たに追加する (個人的にはCanvasを直接操作するのではなく、PixiJS経由でCanvas操作をするのがおすすめです。)
  • ベクタ画像を使用している場合は、ベクタ画像を扱うことができるJavaScriptのライブラリを試してみる (Paper.jsとか)
  • Canvas内に全て描画するか、上にdivタグを載せて描画した方が良いか切り分ける
  • Canvasを何層にも上に積み重ねて、レイヤー構造にした方が描画が簡単になる場合もありそう (PCだけでしか使えないテクニックかも。。)

音声の処理

  • CreateJSの機能の呼び出しに変換することができないか調べてみる
  • Web Audio APIの機能を呼び出すクラスを新たに追加する (Web Audio APIでは、波形の生成が必要な場合でもActionScriptのSoundクラスと似たAPIで呼び出すことができます。)
  • Web Audio APIを使用することができないデバイスをサポート範囲に含める場合、映像と音声の同期、音声ファイルのプリロード、動的な波形の生成等の処理ができない、もしくは実装が難しい可能性があります。

動画の処理

  • FlashVideoを動画エンコードソフトでmp4形式に変換しておく
  • videoタグの機能でやりくりできる範囲を調べる (HTMLのvideoタグはActionScriptの動画の処理に比べて、できることが少ない印象があります。)

developer.mozilla.org

  • RTMP形式のストリーミングビデオを扱う必要がある場合は、video.jsが代わりに使えそう

github.com


その他の処理

  • 入力可能なテキストエリアがFlash内に作られている場合は、Canvas上にinputタグを載せる等の対応が必要になりそうです。入力欄が多い場合は、簡単には移植できない可能性があります。
  • JavaScriptではEmbedメタデータタグが使用できないため、すべてのアセットを動的に読み込むコードに変換する必要があります (TypeScriptでは、ts-embedというライブラリを組み込むことでEmbedと同じことができそうです)。
  • 3D画像を扱う必要がある場合は、Three.js等、代替となるライブラリを探す必要があります。自力でWebGLを扱うのは労力的におすすめできません。
  • Flexを使ったFlashコンテンツは、場合によってはFlash組み込みクラスの移植量が数倍に膨れ上がることが予想できるため、JavaScriptで1から実装しなおした方が良いかもしれません。
  • Flashライブラリ (SWC) を使ったコードが含まれる場合は、同等の機能を実現するJavaScriptライブラリを組み込み、ActionScriptで書いていたライブラリ依存のインターフェイスを全て書き換える必要がありそうです。
  • FlasCC (Adobe Alchemy) を使ってCのコードをActionScriptに変換していた場合は、Emscriptenが代わりに使えるかもしれません。

まとめ

  • Shumwayで再生できなかったら、変換処理はコストがかかる (労力的にも金銭的にも)
  • 簡単に使える変換ツールで変換できない場合は、変換コストが大幅に大きくなる
  • 変換元のFlashコンテンツの複雑さによっては、完全な移植ができない場合がある
  • 変換すると動作サポート対象が狭まる場合がある
  • ソースコードから移植する場合は、エンジニアの負担が大きい