目次
プロジェクトの目的と概要
本プロジェクトは、既存の Flash ベースの教育コンテンツを、HTML と CreateJS を用いて再構築することを目的としました。
移植プロセスにおいては、主に以下の技術的課題に取り組みました：
– オリジナルのflaファイルが存在しない場合のswfからの復元
– HTML環境における音声再生の互換性問題の解決
– ActionScriptコードからJavaScriptへの手動変換
– Adobe Animateのシーン分割によって生成されたコンテンツの統合
– HTML/CreateJS特有のDOM操作、アニメーション制御、イベント処理への対応
– 既存のC#/C++製デスクトップアプリケーションとの連携方式の再構築
特に、Adobe Animateとffdecを併用しながらActionScriptの動作を再現する作業には、相応の工数を要しました。このドキュメントでは、これらの課題に対する具体的なアプローチと、移植作業から得られた知見を共有します。
1. flaファイルからHTML Canvasへの変換
移植の第一段階として、Adobe Animate を使用して fla ファイルを HTML Canvas 形式に変換しました。
パブリッシュ時の設定では、様々な画面サイズに対応するためレスポンシブ機能を有効化しました。表示品質とパフォーマンスのバランスを考慮し、画質は32Bitに、解像度は 2.0 から 3.0 の範囲で調整しています。
※fla ファイル内に全角文字が含まれている場合、パブリッシュ時にエラーが発生します。
※レスポンシブ化についてはアスペクト比を保ったまま拡縮できるようになる程度ではあります。
（解像度設定など）
2. swfファイルしか残っていない場合
オリジナルの fla ファイルが入手できない場合は、ffdec（JPEXS Free Flash Decompiler）を用いて swf ファイルを fla ファイルに変換し、その後 Adobe Animate で HTML Canvas 形式に出力しました。
大量のファイルをflaファイルへ変換処理する必要があるケースでは、ffdec のコマンドラインインターフェースを活用して一括変換すると効率的です。
.\ffdec-cli.exe -export fla .\output\ .\input\3. 音声ファイルの抽出と再生
Adobe Animateを使用してHTML 形式へ変換した後、抽出された音声ファイルが raw データとして認識される、0 バイトで出力される、あるいは音程が変化するといった問題が発生する場合は、swfファイルに変換してffdecから抽出する対応を行いました。
音声再生処理については、ページが開かれた際に自動再生する必要がありましたが、現在のブラウザの仕様として自動再生はできないため、 C#や C++側で制御する方式を採用しました。
4. ActionScriptからJavaScriptへの移植
移植プロセスの中で最も工数を要した作業が、ActionScript から JavaScript へのコード変換です。Adobe Animate で HTML Canvas 形式に書き出しても、ActionScript は自動的に JavaScript へ変換されないため、全てのコードを手作業で書き換える必要がありました。
加えて、Adobe Animate で fla ファイルを開くとボタン等に設定されていた ActionScript が消失する問題があったため、アニメーションの動作を確認しながら機能を書き直すと同時に、ffdec で swf ファイルを開いて元のコードを参照するという二重の確認作業が必要となりました。
5. シーン分割と結合
Adobe Animateの仕様上、シーンごとにflaファイルを分割して出力する必要があったため、生成された複数のHTMLファイルとJavaScriptファイルを適切に統合する作業が発生しました。
この過程では、シーン間の遷移ロジック、データの受け渡し方法、共通リソースの管理などを再設計する必要がありました。特にHTML環境では、シーン間の変数や状態管理の仕組みがFlash環境と異なるため、これらを正しく連携させるための工夫が求められました。
6. HTML/CreateJS特有の実装上の注意点
HTML/CreateJS環境での実装においては、Flash環境とは異なる技術的な側面に配慮する必要がありました。以下に主要な注意点を挙げます。
6.1 DOM要素の利用 (テキスト入力など)
テキスト入力フィールドはCanvas上で直接実装できないため、CreateJSの `DOMElement` 機能を利用し、HTMLの `<input>` 要素をCanvas上に重ねて表示する方式を採用しました。
また、スクロールバーなどの標準的なUI要素もFlashのように組み込みで提供されていないため、自作する必要がありました。
6.2 座標計算とスケーリング
Canvasのサイズ取得には、`lib.properties` 内の `width`/`height` を参照します。マウス座標を取得する際には、`stage.scaleX` / `stage.scaleY` によって設定されたステージのスケーリング率を考慮する必要があります。単純にイベント座標 `(evt.stageX, evt.stageY)` をそのまま使用すると、表示スケールによっては意図した位置からずれてしまいます。
// スケーリングを考慮した座標計算の例
const localPoint = container.globalToLocal(stage.mouseX / stage.scaleX, stage.mouseY / stage.scaleY);
// または
const mouseX = evt.stageX / stage.scaleX;
const mouseY = evt.stageY / stage.scaleY;6.3 処理フローと非同期性
ActionScriptとJavaScriptでは、特に関数呼び出し後の処理フローが異なる場合があります。例えば、ActionScriptの `gotoAndPlay()` や `gotoAndStop()` は呼び出し後に即座に次のフレームへ移動しますが、JavaScript（CreateJS）で同様の関数を呼び出した場合でも、現在のフレームにおける残りのスクリプトは実行され続けます。`return` 文を適切に使用するなど、処理の継続性を意識したコーディングが必要でした。
6.4 イベント処理の違い
イベント名にも差異が存在します。例えば、マウスボタンを離した際のイベントは、ActionScriptでは `MouseEvent.MOUSE_UP` でしたが、CreateJSでは `pressup` イベントを使用します。
// CreateJSでのクリック（プレスアップ）イベント処理例
myButton.on("pressup", function(evt) {
console.log("Button pressed up!");
});6.5 表示オブジェクトの重なり順
CreateJSでは、表示オブジェクト（シェイプ、ビットマップ、コンテナ等）の重なり順（Zオーダー）は、基本的に `addChild()` または `addChildAt()` によってステージやコンテナに追加された順序に依存し、後から追加されたものが前面に表示されます。ActionScript 3.0のように `setChildIndex()` を用いて後から順序を変更することも可能ですが、初期の追加順が重なり順の基本となる点は留意が必要です。
7. C#やC++アプリケーションとの連携
HTMLへの移植において、C#/C++アプリケーションとの連携方法の再構築も重要な課題でした。従来のFlash環境で使用していた `ExternalInterface.call()` や `FSCommand` といった通信手段が利用できなくなるため、新たな連携方式を確立する必要がありました。
具体的には、以下のようなアプローチを採用しました。
– 画面遷移: JavaScriptの `location.href` を用いたページ遷移に変更。
– データ受け渡し: 重要な値の引き継ぎについては、遷移時にURLパラメータを利用するか、WebView2の機能（`postMessage` など）を通じてC#側にデータを渡し、次のHTMLコンテンツ読み込み時にC#側から初期データとして注入する方式を採用。
– ローカル実行環境: ローカルファイルとしてHTMLコンテンツを実行する際の制約（`file://` プロトコルの制限等）を回避するため、WebView2の `SetVirtualHostNameToFolderMapping` 機能を利用。これにより、ローカルフォルダを仮想的なドメイン（例: `local.contents.app`）にマッピングし、HTTP/HTTPSプロトコルと同様の動作環境を構築しました。この方法は、DNS名前解決の待機時間が発生しないため、パフォーマンス上の利点もありました。
これらの変更により、既存のデスクトップアプリケーションの構造を維持したまま、コンテンツ部分のみをHTML技術に置き換えることが可能となりました。
8. まとめと今後の課題
今回のFlashからHTML/CreateJSへの移植プロジェクトを通じて、ActionScript資産の移行、HTML特有の技術的制約への対応、そして既存アプリケーションとの連携再構築に関して、多くの実践的な知見を得ることができました。
主な学びと成果:
– Adobe Animateでの自動変換後、手動でのコード変更は不可避であり、元のActionScriptロジックの正確な理解が重要であること。
– 音声再生やDOM操作など、FlashとHTML間の環境差異に対する具体的な対応策を確立できたこと。
– WebView2を活用することで、デスクトップアプリケーションとの連携を維持しつつ、モダンなWeb技術スタックへ移行可能であること。
今後の課題:
– CreateJS自体の開発が停止していることを踏まえ、将来的なライブラリ移行（例: PixiJS, Phaser等）の検討。
– 今回移植したコンテンツにおけるパフォーマンスチューニングの実施。
– 移植プロセス自体の効率化や自動化に向けた可能性の検討。
このドキュメントが、今後の類似プロジェクト推進の一助となれば幸いです。
自社商品『完全攻略！ゲームで覚える英単8000』の
HTMLサンプルをお試しいただけます。
当社のFlashコンテンツの移植サービスについて
詳しくはこちらをご覧ください。