CrosswalkでChromiumのWebViewを使おう！ #Android

Crosswalkとは、Androidの標準WebViewを置き換えるChromiumベースのViewコンポーネントです。これを使うことで端末ごとの微妙なWebViewの実装・バージョン差を気にすることなく最新のChromiumベースのアプリケーションを開発することができます。

※2017年8月9日追記: Crosswalkはバージョン23を最後にメンテナンスを終了することが発表されました。
現在のAndroidはChromiumのエンジンでWebViewをレンダリングできるようになったので、今後はCrosswalkを使う必要がなくなるだろうという判断らしいです。

手順

AndroidStudioのプロジェクトでCrosswalkを使うための設定手順です。

プロジェクトルートのbuild.gradleにmavenリポジトリの追加設定をする。
アプリケーションのbuild.gradleにdependencyを追加
必要なパーミッションを追加

プロジェクトルートのbuild.gradleにmavenリポジトリの追加設定をする。

Crosswalkは標準のjcenterリポジトリには置かれていないので、Crosswalkを取ってくるためのリポジトリを追加する必要があります。プロジェクトのルートにあるbuild.gradleに以下のmaven {}のブロックを追加します。

%PROJECT_ROOT%/build.gradle

...

allprojects {
    repositories {
        jcenter()

        // ↓これを追加
        maven {
            url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
        }
    }
}

アプリケーションのbuild.gradleにdependencyを追加

アプリケーションのモジュールに依存ライブラリとしてorg.xwalk:xwalk_core_library_beta:23.53.589.4を追加します（2017/08/09時点の最新バージョンです）。

%PROJECT_ROOT%/app/build.gradle

...

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'org.xwalk:xwalk_core_library_beta:23.53.589.4' // これを追加
}

必要なパーミッションを追加

Crosswalkを使用するためには最低限以下のパーミッションが必要です。

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

その他、使用するAPIにより以下のパーミッションが必要になる場合があります。

位置情報にアクセスする場合:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

カメラ・ビデオ・マイクへアクセスする場合:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

外部ストレージにデータを書き込む:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

スクリーンをオンにし続ける:

<uses-permission android:name="android.permission.WAKE_LOCK" />

使い方

WebViewの代わりにorg.xwalk.core.XWalkViewを使用します。
例えばレイアウトの中に入れる場合は以下のようにします。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<org.xwalk.core.XWalkView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Androidのassetsの中にあるindex.htmlを読み込むには、WebViewと同じようにfile:///android_asset/index.htmlを指定します。

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        XWalkView view = findViewById(R.id.webView);
        view.loadUrl("file:///android_asset/index.html");
    }
}

WebViewとは違ってXWalkViewはデフォルトでJavaScriptが利用でき、動画や音声の再生をユーザーのジェスチャーなしで行えます。よりネイティブアプリらしい使い方が、少ないコードで実現可能です。