サービスカテゴリ

サービスカテゴリ

法人・個人向け

法人・個人向け

価格帯

価格帯

サービス対応

サービス対応

Flashコンテンツの再利用方法について

Adobe(アドビ)が2020年にフラッシュプレイヤーやFlashのサポートを終了することを発表しました。
http://jp.techcrunch.com/2017/07/26/20170725get-ready-to-say-goodbye-to-flash-in-2020/

この記事では、Flash Pro CS6以前に作られた、ActionScriptのFlashコンテンツの再利用方法について考えてみたいと思います。

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

FlashコンテンツをHTMLに変換するには、以下の場合で対応が異なります。
それぞれの場合ついて書いていきたいと思います。

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

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

1-1-1.SWF変換ツールを利用する

JavaScriptのライブラリ、CreateJSの形式に変換できるツール

・Zoë | A tool for exporting SWF animations as EaselJS sprite sheets.
http://www.createjs.com/zoe

Googleが作っていたSWF変換ツールSwiffy (現在は開発停止) からフォークしたツール

・Search · swiffy
https://github.com/search?utf8=%E2%9C%93&q=swiffy&type=

1-1-2.SWFをデコンパイルしてソースコードに戻す

難読化の処理がなければ、書き直し可能な程度のソースコードに復元できる可能性があります。

・JPEXS Free Flash Decompiler – Opensource SWF decompiler and editor
https://www.free-decompiler.com/flash/

・SWF Decompiler: フラッシュデコンパイラトリーリックス – SWFデコンパイラ – フラッシュエディター – SWFからFLAへのコンバーター
http://www.flash-decompiler.com/jp/

・フリーで使えるFlash(SWF)のコンパイラ・逆コンパイルツール|てくめも@ecoop.net
https://www.ecoop.net/memo/archives/flash_swf_decompilers.html

1-1-3.SWF変換サービスを利用する

日本語で問い合わせが可能な会社もあるので、自分でどうにもできない場合は相談してみるのも良いです。
http://wordpress.ideacompo.com/?p=6403

1-1-4.SWFをHTML5に変換する時の注意点

全てのコンテンツが完全に変換できるわけではありません。そもそもAdobeがSWFフォーマットの完全なドキュメントを公開していません。

ドキュメントに書かれていない機能は、変換サービスの提供者が変換する必要があります。SWFフォーマットの資料は次のURLにあります。
http://www.adobe.com/jp/devnet/swf.html

次の項目全てに当てはまる場合は、変換に苦労することはあまり無いと思いますが、1つでも反すると変換困難またはコスト増になりそうです。

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

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

1-2-1.Animate CCで変換する

簡単なFlashコンテンツであれば変換できそうです。サポートしている機能については、Adobeのサイト等で確認してみてください。

1-2-2.手作業で変換 – flaファイルの変換

flaファイルを使っている状況では変換作業が難しくなります。

flaファイル内には、さまざまなアセット (画像、音声、アニメーション等) を含めることができますが、その1つ1つについて外部に出力するなど、前処理をしておく必要があります。

・画像ファイルの処理

通常Webで使われるラスタ画像については、パーツごとにflaファイル内からJPGやPNGファイルを抜き出すことで、JavaScriptから扱いやすくできると思います。

ベクタ画像についてはSVGではなく、PNGで出力しておいた方が良いと思います。

モーフィングアニメーションが含まれる場合は小さな単位でGIFアニメーションを出力するか、フレームごとに連番PNGファイルを出力しておく必要があると思われます。

SVGアニメーションで実装する方法は、ブラウザのサポート範囲が狭まるとので避けた方が良いと思います。

・音声ファイルの処理

1つずつmp3やogg等の形式に変換しましょう。JavaScriptで扱いやすくなると思います。

・動画ファイルの処理

FlashVideo (flv) は、videoタグではライブラリ無しで再生することが難しいです。mp4へ変換しておきましょう。

1-2-3.手作業で変換 – ソースコードの変換

ActionScriptのソースコードをJavaScriptに変換する場合です。ActionScriptのコードは、JavaScriptに似ています。さらにTypeScriptにより良く似ています。

簡単なトランスレータを作ることで、TypeScriptに変換処理がこなせると思います。

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

ここから処理内容ごとに、考えておいた方が良さそうなことを箇条書きで挙げてみます。

・画像の処理

☆CreateJSの機能の呼び出しに変換することができないか調べる

☆ラスタ画像のみを使用している場合は、HTML5のCanvasへの描画クラスを新たに追加する

☆ベクタ画像を使用している場合は、ベクタ画像を扱うことができるJavaScriptのライブラリを試す

☆Canvas内に全て描画するか、上にdivタグを載せて描画した方が良いか切り分ける

・音声の処理

☆CreateJSの機能の呼び出しに変換することができないか調べる

☆Web Audio APIの機能を呼び出すクラスを新たに追加する
・動画の処理

☆FlashVideoを動画エンコードソフトでmp4形式に変換しておく

☆videoタグの機能でやりくりできる範囲を調べる
https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement

☆RTMP形式のストリーミングビデオを扱う必要がある場合は、video.jsが使えそうです
https://github.com/videojs/video.js

・その他の処理

☆入力可能なテキストエリアがFlash内に作られている場合は、Canvas上にinputタグを載せる等の対応が必要と思います

☆JavaScriptではEmbedメタデータタグが使用できないため、すべてのアセットを動的に読み込むコードに変換する必要があります

☆3D画像を扱う必要がある場合は、Three.js等、代替となるライブラリを探す必要があります。自力でWebGLを扱うのはおすすめできません

☆Flexを使ったFlashコンテンツは、場合によってはFlash組み込みクラスの移植量が数倍に膨れ上がることが予想できるため、JavaScriptで1から実装しなおした方が良いでしょう

☆Flashライブラリ (SWC) を使ったコードが含まれる場合は、同等の機能を実現するJavaScriptライブラリを組み込み、
ActionScriptで書いていたライブラリ依存のインターフェイスを全て書き換える必要がありそうです

☆FlasCC (Adobe Alchemy) を使ってCのコードをActionScriptに変換していた場合は、Emscriptenが代わりに使えるかもしれません

3.デスクトップ上でスタンドアロンプレイヤーを使用する

Webではなく、デスクトップ上でのみ実行できれば良い場合は、Adobeのスタンドアロンプレーヤーを使用するのが良いでしょう。

・Adobe Flash Player – Debug Downloads
http://www.adobe.com/support/flashplayer/debug_downloads.html

—————————————————————-
ライター名:nezumi_san
プロフィール:情報工学部出身。主婦の傍ら在宅ワークを行っています。




弊社サービス

関連コンテンツ