富山のホームページ製作会社・グリーク スタッフブログ - ブログ -
  1. グリークトップ
  2. プログラマー
  3. ブログ

Androidアプリ開発~WebViewの進化版!CROSSWALKを使ってみた

android_crosswalk

Androidアプリを担当してます、乾です。

アプリ制作にあたり、WebViewを使用することが多々あるのですが、今回は通常のWebViewではなくCROSSWALKなるものを使ってみたのでご報告したいと思います!

CROSSWALKって?

CROSSWALKとは、簡単に言うと、WebViewと置き換わるViewコンポーネントです。

AndroidのWebViewは、Android4.3までWebKitベース、Android4.4からはChromiumベースとなりました。
さらにAndroid5.0からはWebViewをOSから切り離してGoogle Play経由でアップデートされるようになり、各OSのバージョンによってレンダリングエンジンが異なっています。

そうなると当然、各OSでwebviewの挙動が異なってきますよね。
バージョンを気にしないといけないなんて、なんて開発者泣かせなのでしょう・゜・(PД`q。)・゜・

この悩みを解決するのが、CROSSWALKというWebViewエンジンです!
通常のWebviewがOSに基づくエンジンだったのに対し、このCROSSWALK、なんとアプリにWebViewエンジンそのものを組み込んじゃおうというものなんです!
アプリに組み込んでしまえば、OSのバージョンなんて関係ないですよね♪

導入方法

私の場合、Android Studioを使用してるので、app/build.gradleにライブラリを追加するだけでOK☆

【build.gradle】

repositories {
  maven {
   url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
  }
}

dependencies {
   compile 'org.xwalk:xwalk_core_library:10.39.235.15'
}

また、通常のWebView同様、AndroidManifest.xmlにパーミッションを追加します。

【AndroidManifest.xml】

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

これで準備は完了です。

CROSSWALKでWebViewを表示しよう

いよいよWebViewを表示します。

表示も通常のWebViewと何ら変わりません。

【activity_main.xml】

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <org.xwalk.core.XWalkView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></org.xwalk.core.XWalkView>

</LinearLayout>

呼び出すコンポーネントが<WebView>じゃなくて<org.xwalk.core.XWalkView>に変わるだけ。

【MainActivity.java】

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

    String url = "http://xxxxx.xxx";
    XWalkView webView = (XWalkView) view.findViewById(R.id.web_view);
    webView.load(url, null);
}

こちらも通常WebViewと使い方はほぼ同じですね。

ここからは、WebViewと違っていて私が困ったことをご紹介します!

WebView内のリンクを外部ブラウザで開きたい

WebViewにリンクが含まれるとき、そのリンク先をアプリではなくブラウザで開きたいときがあります。
WebViewだと、WebViewClientを呼び出してshouldOverrideUrlLoadingを実行しますが、
このWebViewClientに対応するものが何かを探すのになかなか情報がなく苦労してしまいました。

CROSSWALKの場合は、XWalkResourceClientらしいです。

webView.setResourceClient(new XWalkResourceClient(webView){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
       Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       startActivity(intent);
       return true;
    }
});

これで解決☆

ScrollViewの中に入れ込むと消えちゃった!?

ページに他のViewコンポーネントとWebViewを配置してページ全体をスクロールしたいとき、
そんなときはScrollViewで括るのが一般的ですが、なんとそれをするとWebViewが表示されなくなっちゃいました・゜・(PД`q。)・゜・

結果としては、ScrollViewに

android:fillViewport="true"

を追加するだけでした。

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <org.xwalk.core.XWalkView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
</ScrollView>

これで表示できます。

WebViewの高さが取れない!!

これ、一番はまりました。

通常のWebViewの場合、getContentHeight()でWebViewで読み込むページの高さが取得できるのですが、
CROSSWALKで対応するようなものがありません。。

そこで、javascriptのdocument.body.scrollHeightを使います。

webView.setResourceClient(new XWalkResourceClient(webView){
    @Override
    public void onLoadFinished(XWalkView view, java.lang.String url) {
        view.evaluateJavascript("document.body.scrollHeight", new ValueCallback() {
            @Override
            public void onReceiveValue(String value) {
                int height = Integer.parseInt(value);
            }
        });
    }
});

これでページの高さが取得できました。
もしこの高さを使ってアプリに表示する場合は、取得したページの比率とアプリの画面比率が違う場合があるので、比率から正しい高さを算出する必要がありますので、ご注意ください。

使ってみた感想

とにかく情報が少ないです。
基本的な使い方についてはいろんな方が載せてくださっていますが、自分がしたいことや困ったことを調べようと思っても全然情報がありません。
あっても全部英語だったり。。
リファレンスを見ながらそれっぽいメソッドを調べたり試したりしてやっていくしかないので大変です。
でも、うまく表示できれば、通常のWebViewよりも早くページを表示することができるので、今後もぜひ使っていきたいです。
OSのバージョンを気にしなくていいというのも魅力的ですしね♪
もし同じような内容でお困りの方がいましたら、この記事がお役に立てれば光栄です。

この記事を書いたスタッフ
乾 真由美
フロントエンドエンジニア
乾 真由美