泰延746「インタラクティブコンテンツをワンソースでクロスプラットフォームに対応させたい」、それはフロントエンドのデベロッパーであれば誰もが望むことではないでしょうか。Project」と題して一歩手前まで実現していましたが、iPhoneからFlashを締め出そうとするAppleの強硬な姿勢によって頓挫することになりました。尾野さん(しっぽさん)からの勧めもあり調べたのですが、「OpenFL」(オープンエフエル)というテクノロジーはさまざまな形式にインタラクティブコンテンツを出力できます。OpenFLを使えばワンソースでクロスプラットフォームを実現できるのです。今回はOpenFLからHTML5とFlashを出力することによってクロスプラットフォームを実現する方法を紹介します。クロスプラットフォーム開発が可能なOpenFLとはOpenFLは、ゲームやアプリケーションを構築するための環境を提供するフリーでオープンソースのソフトウェア開発キットです。スマホアプリ等)に出力でき、Flashとほぼ同じAPIを持ち合わせているのが特徴です。Playerはどちらが優勢かという話はさておき、現在も片方の技術だけではクロスプラットフォームを実現できません。8)で動作しませんし、過渡期のブラウザIE9/IE10でも動作が安定していません。Android)のブラウザでは再生できません。いった事情もあり、ブラウザでのクロスプラットフォームを実現するベストソリューションがないのが実情です。FAQ」によるとIE8は2016年1月にサポートが切れるそうですが、多くのエンドユーザーや大企業で旧式ブラウザは残っていくでしょう。※HTML5とCSS3で機能を制限すれば古いブラウザでもコンテンツを再生できますが、コンテンツのクオリティーや開発工数を犠牲になる可能性があります。ところが、今回紹介するOpenFLを使えばワンソースでHTML5とFlashの両方を出力できます。1つのソースコードからHTML5とFlashでまったく同じ見栄えのコンテンツを出力できるため、上記で示した問題を解決することができきるのです。特定の技術で何かしらの環境で動かないのであれば、HTML5とFlashの両方を出力して環境に応じて最適なフォーマットで再生するように分岐すれば、多くの環境で再生させることが可能になります。Unityはネイティブアプリ(iOSやAndroid、コンシューマゲーム機)には向いており、10以上のプラットフォームにパブリッシュできます。Web向けの書き出し機能が貧弱であまり使われていないのが現状です。5のWebGL書き出しは多くの課題がありほとんど採用事例がありません(出力したファイルサイズが巨大でWebサイトに載せるのが現実的ではない、WebGL未対応のブラウザがある、書き出し時間が長い、ワークフローが未成熟等々の数々の問題があります)。(SWF)書き出しをサポートしていた頃はまだ良かったのですが...。Chromeで問題なく動作します。公式サンプルでHTMLとFlashを試すOpenFLを使うとどのようなコンテンツを作ることができるのでしょう。GitHubからダウンロードできるサンプルを紹介します。FlashとHTML5の両方でサンプルを出力していますが、どちらも同じ表現とインタラクションが再現されているのがわかります。BunnyMark自作のコードでOpenFLを試すFlashやHTML5で作ったことのあるコードをOpenFLに移植し、OpenFLの使い勝手やパフォーマンスを試しました。Particle.hx)※Flash版のほうがHTML5版よりもパフォーマンスが良かったため、パーティクルの個数は別々に設定しています。Arrow.hx)さきほどOpenFLを使えば同じ見栄えのコンテンツを提供できると紹介しましたが、実際のところはFlashで出力したほうがHTML5のものより良好なパフォーマンスが得られました。以前も検証したことがありますが一般的にFlashのほうがHTML5より高いパフォーマンスが得られる傾向があります。Blog」を参考ください。OpenFLの始め方OpenFLとHaxeの始め方をビデオに録画しYouTubeにアップしました。次の2つのビデオはどちらも10分以内の短いものです。OpenFLを始められるのでぜチャレンジしてみてください。ソフトウェアはFlashDevelopが標準サポートしていて、強力なコード補完やコード生成を利用できます。Windows)にも展開できるとても利便性が高く理想的なツールです。FlashコンテンツをAIRランタイム(中間レイヤー)上で再生する形態をとるため、ネイティブで作られたコンテンツと比較するとパフォーマンスが劣ると言われています。AIRでGPUを活用できるため、描画面のパフォーマンスの差が埋まっています。AIRのパフォーマンス比較検証モバイルアプリ開発者必見!初期型から最新のAndroid端末まで、AIR製アプリのパフォーマンス徹底検証それに対してOpenFLはネイティブのコードに変換したうえで出力するので、各プラットフォーム上で高いパフォーマンスを得ることができます。ネイティブ出力するとさすがC++になっているだけあってかなり高速に動作しました。ちなみにWindowsネイティブアプリの出力にすると最もパフォーマンスが良い感じ。FlashやHTML5の6倍ほどのパフォーマンスが出ています。ちなみにNekoもなかなかパフォーマンスが良いです。クロスプラットフォームの可能性を実感この手のクロスプラットフォームの出力ツールは他にもあるのですが、OpenFLは出力の精度が良いことに驚きました。3.0と似たHaxe言語で開発することから、OpenFLはFlashの開発を経験したことがある方なら習得しやすいこともわかりました(私は上記のパーティクルデモをOpenFLを触り始めて1〜2時間ほどで作れました)。調べているとOpenFLはそれぞれの環境で完全な互換性がまだ実現できていないようです。いえ海外では事例もでてきているそうなので、将来のクロスプラットフォームの主力技術として注目しておきたいです。ShowcaseOpenFLフレームワークとHaxe言語の学習コストについて新しい技術を導入するには学習コストが気になります。おさえておきたい点として、繰り返しになりますがOpenFLはFlashとほぼ同じAPIを使って制御するためFlash開発者であれば学習コストが抑えられます。Flash開発の経験がない開発者にも利点があります。多くの描画向けJavaScriptライブラリ(たとえばCreateJSやPixi.jsなど)はFlashのAPIに似た構造になっているため、OpenFLを学べば学習コストが他にも転用できるのです。プログラミング言語としてのHaxeは、合理的で先進的な言語機能を有しているので学習する価値があります。HaxeはECMAScriptベースであるため業界標準として知っておいて損はないと思います。言語の勉強には2015年8月出版の「Haxeプログラミング入門」を参考にするのがいいでしょう。OpenFLは前身の「NME」を含めると2007年から開発がされており成熟度が高まってきています。平成27年7月30日に内容をメンテナンスしています。