AndroidのWebViewの使用例チュートリアル

2年 ago
夏樹, 風
4 minutes

Android WebViewは、Androidアプリ内でHTMLを表示するために使用されます。Android WebViewを使用して、HTMLページをAndroidアプリに読み込むことができます。

アンドロイドのWebView

AndroidのWebViewコンポーネントは、Viewのサブクラスとして実装された完全なブラウザであり、Androidアプリケーションに埋め込むためのものです。

Android WebViewの重要性

HTMLコードの範囲が限定されている場合、HTMLユーティリティクラスに属するstaticメソッドfromHtml()を使用して、HTML形式の文字列の解析とTextViewでの表示が行えます。TextViewは、スタイル（太字、斜体など）、フォントの種類（セリフ、サンセリフなど）、色、リンクなどの簡単な書式設定を表示することができます。しかし、HTMLに関して複雑な書式設定や広範な範囲が必要な場合、TextViewではうまく処理できません。例えば、Facebookの閲覧はTextViewではできません。そのような場合は、より適切なウィジェットとしてWebViewがあります。WebViewはより広範なHTMLタグを処理することができます。また、WebViewはCSSやJavaScriptも処理でき、Html.fromHtml()では無視される場合もあります。WebViewは、履歴リストや戻る・進むナビゲーションのサポートなど、一般的なブラウジングのメタファーも利用できます。ただし、TextViewに比べてWebViewはメモリ消費量が多く、より高価なウィジェットとなります。この増加したメモリの理由は、WebKit/BlinkによってパワードされたオープンソースのWebレンダリングエンジンで、Chromeなどのブラウザでコンテンツを表示するためです。

Android WebViewの例

Android WebViewコンポーネントは、WebViewを表示するレイアウトにXMLレイアウトファイルに挿入されます。この例では、activity_main.xmlファイルに以下のように挿入します。

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

アンドロイドスタジオのWebViewコード

以下のコードスニペットに示すように、MainActivityでactivity_main.xmlで定義されたidを使用してWebViewコンポーネントが初期化されます。

WebView webView = (WebView) findViewById(R.id.webview);

アンドロイドの WebView で、URL を読み込んでください。

WebViewを参照できたら、それを設定してHTTP経由でURLを読み込むことができます。以下に示すように、WebViewのloadUrl()メソッドを使用してURLを読み込みます。

webView.loadUrl("https://www.scdev.com");

URLを弄る前に、私たちは見ておくべき2つの重要な側面があります。

    1. JavaScriptのサポート：WebViewウィジェットでは、デフォルトでJavaScriptはオフになっています。そのため、JavaScript参照を含むウェブページは正常に動作しません。JavaScriptを有効にするには、以下のスニペットをWebViewインスタンスで呼び出す必要があります：

 

    1. getSettings().setJavaScriptEnabled(true);

パーミッションの追加：WebViewでURLを取得および読み込むために、アプリ内からインターネットへのアクセスを許可するためのパーミッションを追加する必要があります。以下のコード行をAndroidManifest.xmlファイルのapplicationタグの上に追加する必要があります（下記のように表示されます）：

 

 

 

 

以下のMainActivityクラスには、今までのすべての機能が含まれています。

package com.scdev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

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

        WebView webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.loadUrl("https://www.scdev.com");
    }

}

WebViewClientを設定する

ウェブページ内のリンクをクリックした場合、デフォルトの動作はシステムのデフォルトブラウザアプリが開くことです。これはアプリユーザーのユーザーエクスペリエンスを損ねる可能性があります。ウェブビュー内とした場合、ページナビゲーションを保持するために、WebViewClientのサブクラスを作成し、shouldOverrideUrlLoading(WebView webView, String url)メソッドをオーバーライドする必要があります。下記はそのようなWebViewClientのサブクラスの見本です。

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        return false;
    }
}

shouldOverrideUrlLoading()メソッドがfalseを返すと、パラメータとして渡されたURLはブラウザではなく、WebView内で読み込まれます。アプリ内とブラウザ内で読み込まれるURLを区別するために、shouldOverrideUrlLoading()メソッドに以下のコードを追加する必要があります。

if(url.indexOf("scdev.com") > -1 ) return false;
        return true;

注意：trueを返すことは、URLがブラウザーアプリで開かれることを示すものではありません。実際、URLはまったく開かれません。URLをブラウザーに読み込むためには、インテントを発行する必要があります。以下のサブクラスには、私たちが追加したすべての設定が含まれています。

package com.scdev.webview;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class WebViewClientImpl extends WebViewClient {

    private Activity activity = null;

    public WebViewClientImpl(Activity activity) {
        this.activity = activity;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        if(url.indexOf("scdev.com") > -1 ) return false;

        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        activity.startActivity(intent);
        return true;
    }

}

以下は、ブラウザでインテントを起動するためにActivityをパラメーターとして受け取るコンストラクターです。MainActivityでこのサブクラスのインスタンスを作成する前に、別の重要な機能を見てみましょう。

バックボタン付きのナビゲーションWebView

これまでに開発されたアプリでバックボタンをクリックすると、WebView内のいくつかのページを移動したにもかかわらず、アプリはホーム画面に戻ります。バックボタンを押した際にページの閲覧履歴をたどるためには、以下のスニペットに示すようにバックボタンの機能を変更する必要があります。

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

以下のオプションでネイティブに日本語で言い換えてください:
onKeyDown() メソッドは、最初に WebView が戻ることができるかどうかをチェックする実装でオーバーライドされています。ユーザーが最初のページから WebView 内でナビゲーションを行っている場合、WebView は戻ることができます。WebView は通常のブラウザと同様に履歴を保持しています。履歴がない場合は、デフォルトのバックボタンの動作であるアプリの終了となります。以下に、上記の機能が含まれた MainActivity のコードがあります。

package com.scdev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView = null;

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

        this.webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        webView.loadUrl("https://www.scdev.com");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}
android webview example

WebViewでコンテンツを読み込むための代替方法

これまで私たちは、WebView内のコンテンツをロードするためにloadUrl()メソッドを使用してきました。ここでは、loadUrl()の使い方の概要を簡単に説明した後、他のコンテンツをロードする方法を見ていきます。loadUrl()は以下の方法と一緒に使用できます。

  • https:// and https://URLs
  • file:// URLs pointing to the local filesystem
  • file:///android_asset/ URLs pointing to one of your applications assets
  • content:// URLs pointing to a ContentProvider that is publishing content available for streaming

loadUrl()ではなく、loadData()を使用することで、メソッド内でHTMLコードの断片または全体を表示することができます。loadData()には2つのオプションがあります。よりシンプルなオプションでは、コンテンツ、MIMEタイプ、エンコーディングをすべて文字列として提供することができます。通常、MIMEタイプはtext/htmlであり、エンコーディングは以下のように一般的にUTF-8です。

webView.loadData("<html><body>Hello, world!</body></html>",
                  "text/html", "UTF-8");

以下は、上記のスニペットがMainActivityに追加された際の出力です。

package com.scdev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView = null;

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

        this.webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        //webView.loadUrl("https://www.scdev.com");
        webView.loadData("<html><body>Hello, world!</body></html>", "text/html", "UTF-8");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}
android webview
String baseUrl    = "https://www.scdev.com";
String data       = "Relative Link";
String mimeType   = "text/html";
String encoding   = "UTF-8";
String historyUrl = "https://www.scdev.com";

webView.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);

これによって、Android WebViewの使用例チュートリアルは終了します。最終的なAndroid WebViewプロジェクトは、以下のリンクからダウンロードできます。

Android WebView のサンプルプロジェクトのダウンロード

コメントを残す 0

Your email address will not be published. Required fields are marked *

✖
广告
広告は10秒後に閉じます。
bannerAds