HTML5で作ったアプリを、iOS/Androidで動かす方法をいくつか紹介します。
私自身がゲーム開発で使いたいために調べたものなので、少しゲーム寄りの情報になっています。
なお、HTML5で開発したアプリを対象としているため、独自のAPIをJavaScriptで
バインディングした方式のものは除外しています。(Titaniumとか)
#間違った記載がある場合や、他に良いものがあるよ、という場合はコメントいただけると嬉しいです。
#Apache Cordova (PhoneGap)
https://cordova.apache.org/
Cordovaは老舗で有名なのであまり書くことがありませんが。。。
CordovaはHTML5のAPIに加え、Cordova APIが追加されており、それによってネイティブの機能を呼び出すことができます。
オープンソースなので拡張がしやすく、Cordovaをベースにしたツールが数多く存在します。
(Monacaとか、Intel XDKとか)
Cordova標準では組み込みのWebViewを使うので、パフォーマンスが悪くゲームにはあまり向きません。
このWebViewのパフォーマンス対策として、Crosswalkというランタイムが開発されています。
これはBlinkをベースにしたWebViewで、AndroidでこのCrosswalkのWebViewを使用することで、
パフォーマンスが改善されるようです。
上記のXDK、MonacaではこのCrosswalkを選択することができます。
なお、iOSはWKWebViewが代替策となりますが、これはiOS8以上である必要があります。
#CocoonJS
https://www.ludei.com/cocoonjs/
CocoonJSはCordova同様、モバイル環境でHTML5アプリを動かすためのフレームワークです。
HTML5アプリが動作する環境を、用途に合わせて以下の3つから選択することができ、
そらによってCordovaよりも高速に動作することが可能です。
Cordovaを内蔵しており、System Webviewを選択した場合はCordovaを使うようです。
- Canvas+
WebGL、Canvasを使ったゲーム向けの環境です。
Canvas周りのAPIが高速に動作しますが、代わりにDOM操作系のAPIが制限され、
一部が使用できません。
私の勝手な想像ですが、以下で紹介するEjectaのような実装ではないかと思います。
- WebView+
Androidの場合はChromiumベースのWebViewを使用し、Android4.0以上で動作します。(Crosswalk?)
iOSの場合はWKWebViewを使用し、iOS8.0以上で動作します。
システム組み込みのWebViewよりも高速に動作します。
- System WebView
Cordovaです。
CocoonJSは基本的にクラウド環境でビルドします。
CocoonJSの"DEV PORTAL"ページにログインし、端末の種類、実行環境等を選択して
「Compile project」ボタンを押すと、数分後にダウンロードできるようになります。
中に含めるHTML5のソース一式をZIPでアップロードするのですが、30MBまでの制限があります。
Premiumユーザは500MBまでの制限にアップするようですが、Premiumユーザになるには
フォームから問い合わせる必要があるようです。
上記のクラウドビルド以外に、CLIが用意されているのですが、これはCanvas+には対応していないようです。
Ejecta
EjectaはImpactというJavaScriptゲームエンジンで使用されているフレームワークです。
Impact自体は有料のツールでソースも公開されていませんが、Ejectaはオープンソースで公開されています。
EjectaはWebGLをWebViewのCanvasではなく、そのままOpenGLで描画します。
WebViewを介さないため、無駄がなく高速に動作します。
ただし、DOM自体が存在しないため、DOM系のAPIは大きく制限され、使えないものが多いです。
(最低限のAPIは呼び出せるようにエミュレートされています)
Ejectaは残念ながらiOS用となり、Androidでは動作しませんが、Androidで動くように実装された
Ejecta-XというプロジェクトがGitHubに存在しています。
https://github.com/Wizcorp/Ejecta-X
ただ、これは個人が作っているもののようで、最近は更新も滞っているようです。
Ejecta、Ejecta-X共に動かしてみましたが、どちらもサンプルは問題なく動作しました。
#おわりに
結局はオープンソースで拡張もしやすいCordovaが使いやすいです。
CrosswalkやWKWebViewを使うことでパフォーマンスも向上します。
個人的にはEjecta、Ejecta-Xには是非頑張ってほしいです。