フロントエンド開発Blog

オレには鈍器がある

cordova , css , enchant.js , javascript , phonegap , three.js , unity , webgl

最近、WEBアプリやブラウザゲームのnative展開がそこここで見られるようになりました。新規プロジェクトではUnityで作る、Cocos2Dで作ることでWEBもnativeも同時開発、なんてことが可能ですが過去の資産をwebからnativeに置換することは手間がかかります。

そこでwebviewでラッピングして最小限の労力でnative展開できないか、皆さん考えるかと思います。

色々なツールがあると思いますが今回はいろんな方法でブラウザゲームをnativeアプリ化してツール比較としゃれこもうかと思います。

対象ゲーム

今回native化を検討しているゲームは以下の2つ。

オレには鈍器があるについて
  • enchant.js(canvas2D)で作ったゲーム
  • android2.3くらいの端末にも対応
  • サウンドなし
  • LAMPによるセーブデータはオンライン保存
INFINITELY SCOUTについて
  • enchant.js(canvas2D) + three.js(WEBGL)
  • もともとPC向けでandroid5.0以上の端末でもハイエンドモデルじゃないと厳しい
  • サウンド有り
  • localstorageにセーブ

ざっと要約するとこんな感じ。

ゲーム名 2D or 3D 必要スペック サウンド ネットワークの有無
オレには鈍器がある 2D android2系 有(セーブデータ)
INFINITELY SCOUT 3D android5系以上(ハイエンド)

アプリ配布方法

apkを野良状態で配布することにします。サーバ上にapkを生のまま置いてダウンロードしていただくという男らしい配布スタイルで。


調査前計画

  1. ネットワーク通信不要にしたい、アプリ内でセーブ、アセット、プログラム全て完結させたい
  2. 音はできればつけたい
  3. anroid4.4以上で動けばいい

1に関しては、オレドンのセーブ方式がAJAXによるサーバ保存方式のためローカル方式への大幅な変更が必要そうなイメージ。2についてもオレドンはそもそも音無ゲーなので余力があればつけるが、INFINITELY SCOUTはそもそもブラウザゲームの時点で音有りなので、何らかの事情でサウンド再生ができないようならapkリリースはできない。3に関してはそもそもINFINITELY SCOUTはプレイが難しいかも(スペック的に)

・・・以上のことからオレドンのセーブ方式を変更してブラシアップしてapk化するのが最終的なゴール設定になりそうです。


動作確認環境

KindleFire(Android5.0相当)とAndroid4.1.2端末で動作確認します。

また、リリースまでにはapkに全部いりにしたいのですが今回は実験ですのでネットワークアクセスしても良いことにします。(既存のWEBに乗ってるゲームをそのまま再生する、でもオッケーとする)

変換方法

色々調べて以下の3つを候補とします。

  1. Unity3Dのwebview (gree/unity-webview)
  2. cordovaのwebview (Apache Cordova)
  3. cordova + crosswalkでchrome-webview (Apache Cordova Crosswalk)

1については商用サービスでも結構やられている気がします。再現性が高いこと、ネイティブ連携が必要になったときにC#で諸々拡張がしやすくナレッジが豊富に蓄積されているというアドバンテージがあります。

2についてはAndroidSDKとnodeさえ入っていればすぐに利用できる手軽さが売りですね。コマンドラインだけで完結可能でnpm install -g cordovaと入力するだけで開発環境が整います。

3は2の亜種というか。WEBアプリケーション再生プレイヤーとしてchromiumブラウザを同梱してapk化するというプラグインを使います。デバイス毎の相違点を極力少なくした状態で動作させることが可能らしいです。

・・・ほかにもtitanium mobileのwebviewとかも手軽でいいなーとか、cocoonJSとかもいいなーと思ったんですが、何かに躓いたときに情報が出てこないと詰むかもしれないので今回は候補からはずしました。Unityなら情報がザクザクでてくるし、cordovaもそれなりにユーザーが多くプラグインも豊富ですからね。

前置きが長くなりましたが、環境構築して実際に動作検証していきましょう。


AndroidSDKの導入

最近はAndroidStudioというオールインワンなIDEを導入するのが主流らしいのでInstallerをゲットしてポチポチなにも考えずに導入。

DOWNLOAD ANDROID STUDIOをクリックしてインストーラを起動するとJDKを入れろ、といわれるのでJAVAインストール。

JDKの導入、AndroidStudioの導入が完了。試しにサンプルプロジェクトをBuildしてみました。

しょっぱなからエラー

は?サンプルもまともに動かないの?って感じですが落ち着いてエラー内容を見たりぐぐったりします。

どうやらAndroidStudio同梱のSDKだとうまく動作しない(なんですと!?)ことがあるらしいです。そんなときはSDK単品でzipで取得し、exeファイルだけ上書きするといいらしい。なんと言う民間療法・・・

CLIツール群の中にひっそりとzipバージョンがあるのでそれを取得。

AndroidStudioインストール時に一緒に入ったSDKは「C:/Users/{ユーザー名}/AppData/Local/Android/android-sdk」にあるかと思いますが、その中の「tools」のなかのexeをzip版のexeで上書きします。念のため、上書きする前のexeはどっかべつのフォルダにでも退避させておきましょう。

上記の民間療法で無事Buildが通るようになりました。

AndroidAVD設定

実機があるためエミュレータは不要です。ここは割愛。適当に作ったまま放置してます。

AndroidSDKの必要パッケージをインストール

スタートメニューなどからAndroid SDK Managerを開いてSDKパッケージを導入します。とりあえず

  • Android 6.0(API23)
  • Android 5.1.1(API22)
  • Android 5.0.1(API21)
  • Extra - Android Support Repository
  • Extra - Android Support Library
  • Extra - Google USB Driver

ここらへんを導入しておきます。API23 - API21は特に選択しなくても私の場合はプリインストールされていました。(AVD適当に設定したときに入った・・?)


Unity導入

自分は既にインストール済みだったのでこの工程はいらなかったんですが念のためリンク張っておきます。インストーラたたくだけでよいので特に大変ではないかなと思います。1点注意があって、インストール時に「対応環境」を選択させられますがiosやらandroidはチェックが外れているので必ずつけてください。


Apache Cordovaの導入

CordovaとphoneGapは中身一緒なのでどっちでもいいですがCLIでコマンドを入力するときにcordovaのほうが個人的に入力しやすかったのでCordovaにしました。

npm install -g cordova

と一行打つだけでOKです。ひとまず環境構築は終わり。次は実際に変換かけていきます。


Unity3D + gree/unity-webview

「unity webview」で検索するとすぐさま候補に挙がってきます。それだけユーザが多く、ナレッジも溜まっているはず。今回の本命もこちらのプラグインだったりします。

2Dでも3Dでもいいですがプロジェクトを作ります。そしてctrl + sを押してsceneを保存します。mainとか名前付けておきます。

次に、「File > Build settings」を開いてAddOpenSceneで先ほど保存したmainシーンをセットします。そしてAndroidのBuildモードに変更し、Player Settingsを開きます。

↑の画像ですでにネタバレですがこのプレイヤー設定をしておかないとBuildにコケたりapkインストールしても動かなかったりします。

今回はWEB上のゲームをwebviewでそのまま再生しようと思うのでinternet accessも可能な設定にします。

そして空のGameObjectを配置して、そこにC#スクリプトを割り当てます。


  using UnityEngine;
  using System.Collections;

  public class attachWevView : MonoBehaviour {
  	private string url = "http://oredon.guitarkouza.net/game/";
  	WebViewObject webViewObject;
  	
  	// Use this for initialization
  	void Start () {
  		webViewObject = (new GameObject("WebViewObject")).AddComponent();
  		webViewObject.Init((msg) => {
        //JSでUnity.call("aaa")ってやるとここのmsg="aaa"の状態で実行されるよ、native連携できるよ
  			Debug.Log(msg);
  		});
  		webViewObject.LoadURL(url);
  		webViewObject.SetMargins(0, 0, 0, 0);
  		webViewObject.SetVisibility(true);
  	}
  	
  	// Update is called once per frame
  	void Update () {
  	
  	}
  }

なんかこういう感じです。ぐぐったらさっと見つかると思います(適当)そしてBuildしてapkを端末に送ります。

Unity3D + gree/unity-webview 結果

ゲーム名 操作性 サウンド 2D再現力 3D再現力 実行速度
オレには鈍器がある
Android4.1.2
- -
オレには鈍器がある
Android5.0
- -
INFINITELY SCOUT
Android4.1.2
×
INFINITELY SCOUT
Android5.0
×

2Dゲームはほぼ完全再現といっても良いでしょう。素晴らしい動作再現力でした。3Dゲームは操作こそできるものの、3Dレンダリングが一切されませんでした。私のゲームだけの問題なのかもしれませんが、WEBGLそもそもに非対応な4.1.2はまだしもブラウザなら問題なくゲームができていた5.0で3Dレンダリングがまったくされないとは思ってもいませんでした。

うーんUnityのwebviewで3Dレンダリングってそもそもできないのかもしれませんね。まぁ3Dなら素直にUnityで作れって話ですよね。


cordova

unityのwebviewに比べて手数は少ないです。まずはコマンドプロンプトでcordovaプロジェクトを作成します。

$ cordova create oredon com.kidukilab.oredon oredon

プロジェクト名、パッケージ名、フォルダ名という引数を指定してプロジェクトを作成しました。するとoredonというフォルダが現れます。そのなかにwwwというフォルダがあるのでそこにwebアプリケーション一式を入れます。

ただ、index.htmlだけは上書きしないようにします。index.htmlはプロジェクト作成したときに自動生成されたものを使います。

index.htmlを編集し、scriptやlinkタグを設定してjsやCSSを読み込みます。次にwww/js/index.jsを編集します。


  onDeviceReady: function() {
        onLoaded();
        //app.receivedEvent('deviceready');
    }

のように変更し、デバイスの準備状態が完了したらonLoadedという関数を呼び出すようにします。そのonLoadedはゲームの初期化処理を実行するようにつなげます。要は、window.onloadみたいなもんですね。


function onLoaded(){
  game.init();
}

みたいな感じです。

次にcordovaでandroid向けにbuildします。


$ cordova platform add android
$ cordova build android

するとapkが「./platforms/android/build/outputs/apk/」というふかーいところに生成されます(気づきにくいですよね・・もっと浅いディレクトリに出力してほしかった)

それを実機に転送して実行します。

Cordova 結果

ゲーム名 操作性 サウンド 2D再現力 3D再現力 実行速度
オレには鈍器がある
Android4.1.2
- -
オレには鈍器がある
Android5.0
× - -
INFINITELY SCOUT
Android4.1.2
×
INFINITELY SCOUT
Android5.0
×

Android5系だと十字キーの感度が異常に悪くなりました。どうやらタップの長押しをうまく処理できていない様子。これだとゲームには不向きですね。HTMLベースのポチポチゲーならいいですが、バーチャルゲームパッド必須のCANVASゲームの場合はちょっと導入前にテストしたほうがよさそう。ただ、Android5.0ならWEBGLによる3Dレンダリングもできるようで、3D表現だけはUnityよりも良い結果になりました。バーチャルパッドさえ動けばUnity以上に再現力の高い「ネイティブキング」として正式採用しようと思いましたが今回は採用見送ります。

あと、Unityと比較して動作がひっかかることが多かった印象です。


cordova + crosswalk

cordovaにcrosswalkプラグインを導入します。

$ cordova plugin add cordova-plugin-crosswalk-webview
$ cordova build android

chromiumを同梱、ということでapkサイズは膨れちゃいましたがパフォーマンスや操作性はどうでしょうか。

ゲーム名 操作性 サウンド 2D再現力 3D再現力 実行速度
オレには鈍器がある
Android4.1.2
- -
オレには鈍器がある
Android5.0
× - -
INFINITELY SCOUT
Android4.1.2
× × × × ×
INFINITELY SCOUT
Android5.0
× × × × ×

3D、起動すらしませんでした。うーんないほうが安定しているようですね。十字キーの問題も解消されず。むしろパフォーマンスが落ちてカックカクになりました。これは・・・導入しないほうがよさそうです。

総括

やっぱりというかなんというか、Unity版が最強じゃね?という予感は的中しました。今回はgree様のwebviewパッケージを使わせていただきましたが、他にもwebviewプラグインはあるようですね。それぞれ動作や表現力に差があるかもしれないので、「AでだめだったらB」という選択肢の幅があることも強みかもしれません。

うーんお金があれば試したい・・・

いろいろやってみましたが、やはりwebviewはブラウザと違ってパフォーマンス面や動作不良が出やすいですね。5年前のWEBアプリを作っているような、慎重さとバグにへこたれない心が必要だと思いました。

ページトップへ

関連ページ

ページトップへ