LoginSignup
28
27

More than 5 years have passed since last update.

HTML5アプリをiOS/Androidで動かすいくつかの方法

Posted at

HTML5で作ったアプリを、iOS/Androidで動かす方法をいくつか紹介します。
私自身がゲーム開発で使いたいために調べたものなので、少しゲーム寄りの情報になっています。
なお、HTML5で開発したアプリを対象としているため、独自のAPIをJavaScriptで
バインディングした方式のものは除外しています。(Titaniumとか)

#間違った記載がある場合や、他に良いものがあるよ、という場合はコメントいただけると嬉しいです。

Apache Cordova (PhoneGap)

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

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には是非頑張ってほしいです。

28
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
27