Flashコンテンツのスマホアプリ(iOS/Android)への移植手法に関して
あけましておめでとうございます、鴨田です。
今年一本目のアシアルブログの投稿になります。
今年もどうぞよろしくお願いいたします。
さて、昨年末に弊社で開発を行った案件として、
FlashコンテンツのiOS/Androidアプリ移植というのがありました。
Flashの移植では、いろいろと手法はあると思いますが、
今回は純粋にネイティブアプリに移植しました。
開発手法の選定や開発中の試行錯誤について、お話ししたいと思います。
手法の決定に関して
まず、元のFLAファイルが一つだけではなく、
複数のFLAファイルに分かれていたこと、
元のFLAファイルが存在しないコンテンツが存在していた、
ActionScriptがそもそも2.0だった、などのことから、
Abobe AIR for iOS/Androidを使うことはありませんでした。
いろいろな情報を集めた限りでは、
AIRで出来るのであれば、AIRを使うのがいいのかなと思います。
その次に考えたことは、CreateJSを使うことです。
弊社でも実績があるため、結構有力な方法として考えていました。
試しにいくつかのコンテンツでCreateJSを使用して、
HTML5に書き出してみました。
結果として、うまくいくコンテンツもあれば、
オブジェクト数が多すぎて、アプリ内のWebViewではもちろんのこと、
Androidの標準ブラウザにおいても、
処理が重すぎてまともに動作しないものもありました。
(PCのブラウザではサクサク動くのに・・・)
ということで、最終的にはネイティブアプリで作成することとしました。
ネイティブアプリで使う素材を準備する
まず、元のFLASHのメニュー部分などは、画角が合わないため、
スマートフォン端末用にレイアウトの組み直しと、
一部デザインの修正を行いま した。
単純にムービーを再生するだけのコンテンツに関しては、
「Swivel」という、SWFを動画変換できるフリーソフトを使用して、
H264書き出しを行いました。
ActionScriptまで読み取って変換してくれるいいソフトです。
あとは、タップ時などにアニメーションを行うというのが、
元になったコンテンツで主に使用されるアクションだったので、
Flashから各オブジェクトを連番PNGの形で書き出して、
ものによってはスプライト化、あるいは、ムービー化しました。
ネイティブアプリで実装する
前述したように、基本的にはオブジェクトがアニメーションするというのが、
アプリのコンテンツに共通した内容であったため、
連番PNGあるいはスプライト画像を使用して、
パラパラアニメーションを行うというのが主な実装内容でした。
これだけを聞くとすぐに実装できそうです。
事実、iOSでは特に問題なく、実装が完了したのですが、
Androidに関しては、OSバージョン、機種依存の問題が多々あり、
思うように実装が進みませんでした。
そのほとんどはAndroidのバグなので、
実装方法が悪いというわけでもなく、
どうにかこうにかやり過ごしましたが、
いろいろと煮え湯を飲まされました。
特に悩まされたこととして、
VideoViewとSurfaceViewの重なり順がおかしくなる、
というのがあるのですが、結局解決しなかったため、
重ならないようにレイアウト変更を行うことで避けたりしまし た。
FlashのiOS/Androidへの移植関連で検索しても、最近の記事が見あたらないので、
もしかしたら、最近はあまり移植が行われていない可能性もありますが、
そのような案件があれば、参考にしてもらえたらと思います。。
まとめとしては、
ネイティブで開発する場合はクロスプラットフォームという意味では難がありますが、
いろいろと柔軟に対応できるのはとても魅力だと思います。
AIRで問題ないコンテンツであれば、もちろんAIRが第一選択になります。
クロスプラットフォームという意味でも問題ありませんし、
最近のAIRであれば、ネイティブ機能を使うことも問題ないようです。
今はまだ実用的とは言い難いですが、CreateJSなどを使用して、
HTML5化するというのも、今後は十分視野に入ると思いますし、
そうなって欲しいと願っています。
