XWalkでChromiumのWebViewを使おう!

  • 20
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

XWalkとは

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

手順

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

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

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

%PROJECT_ROOT%/build.gradle
// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.2.3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()

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

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

%PROJECT_ROOT%/app/build.gradle
apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "22.0.1"

    defaultConfig {
        applicationId "com.eje_c.xwalk"
        minSdkVersion 19
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

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

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

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

使い方

特定のURLを読み込む

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        XWalkView view = new XWalkView(this, this);
        setContentView(view);
        view.load("http://www.google.com", null);
    }
}

assetsディレクトリからHTMLを読み込む

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        XWalkView view = new XWalkView(this, this);
        setContentView(view);
        view.load("file:///android_asset/index.html", null);
    }
}

Java文字列をHTMLとして読み込む

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        XWalkView view = new XWalkView(this, this);
        setContentView(view);
        view.load(null, "<h1>Hello World!!!</h1>");
    }
}