はじめに
ハイブリッドアプリの場合、通常標準のWebViewを使います。
通常のWebViewの場合、機種によって挙動が異なったり、パフォーマンスが悪い場合があります。
そこでCrosswalkを使用することで、それらの問題を解決することができます。
CrosswalkはChromiumベースのレンダリングエンジンをアプリ内に内包することで、
標準Webviewを使用せずCrosswalkのレンダリングエンジンを使用することができます。
●注意点
・Android 4.0以降のみ対応
・レンダリングエンジンを内包する為、アプリの容量が大きくなる（10MBくらい）
◎Crosswalkをダウンロード
下記ページよりCrosswalkをダウンロードする。
Crosswalk downloads
ARM用とx86(intel製)用のツールセットが準備されているので、ターゲットにあったものを使います。
現状ARMの機種のほうがシェアが多いようです。
◎サンプルプロジェクトを作成
上記でダウンロードしたCrosswalkファイルを展開後、
展開したディレクトリ内のbin/createを実行
bin/create <path_to_new_project> <package_name> <project_name>
path_to_new_project ・・・ 新規crosswalkプロジェクトのパス
package_name ・・・ プロジェクトID(com.hoge.hoge)
project_name ・・・ プロジェクト名
package_nameがandroidのパッケージのネーミングルールに沿っていない場合下記のエラーがでます。
Package name must look like: com.company.Name
androidのパッケージルール
・The first character after a period must not be a number
・The first character must be a letter or underscore
・Usually the app id is your company's reversed Internet domain name.
・The app id must consist of letters, numbers, and underscores.
プロジェクト(app)が作成される。
├── CONTRIBUTING.md
├── LICENSE
├── NOTICE
├── README.md
├── RELEASENOTES.md
├── VERSION
├── app
├── bin
├── framework
├── package.json
├── spec
└── test
◎アプリをビルドする
作成されたプロジェクトファイル内の構成は下記。
cordova内のrunを実行することでアプリをビルド&デバイス（シミュレーター）で表示する。
.
├── AndroidManifest.xml
├── CordovaLib
├── assets
├── bin
├── build.gradle
├── build.xml
├── cordova
├── gen
├── libs
├── local.properties
├── out
├── project.properties
├── res
├── settings.gradle
└── src
//ビルドと、アプリを表示
app/cordova/run
//ビルドのみ
app/cordova/build
◎アプリケーションのソースの配置先
雛形ファイル(app)内の下記を変更。
assets/www
//www配下内のcordova.jsを消すとjsエラーとなるので消さないようにする
その他
◎Cordova5からCordovaプラグインとしてCrosswalkを使用できるようになったようです。
詳しくは下記が参考になります。
◎プラグインを入れる場合
plugmanを使用してインストールしました（他の方法もあると思います）。
$ plugman install --platform android \
--plugin https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview.git \
--project .