Edited at

crosswalk導入メモ

More than 1 year has passed since last update.


はじめに

ハイブリッドアプリの場合、通常標準のWebViewを使います。

通常のWebViewの場合、機種によって挙動が異なったり、パフォーマンスが悪い場合があります。

そこでCrosswalkを使用することで、それらの問題を解決することができます。

CrosswalkはChromiumベースのレンダリングエンジンをアプリ内に内包することで、

標準Webviewを使用せずCrosswalkのレンダリングエンジンを使用することができます。


●注意点

・Android 4.0以降のみ対応

・レンダリングエンジンを内包する為、アプリの容量が大きくなる(10MBくらい)


◎Crosswalkをダウンロード

下記ページよりCrosswalkをダウンロードする。

Crosswalk downloads

Crosswalk   Downloads.png

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を使用できるようになったようです。

詳しくは下記が参考になります。


Cordova 5でCrosswalkプラグインを使ってみた

Crosswalk with Cordova 4.0


◎プラグインを入れる場合

plugmanを使用してインストールしました(他の方法もあると思います)。

$ plugman install --platform android \

--plugin https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview.git \
--project .