このページは Cloud Translation API によって翻訳されました。

WebView でウェブアプリを作成する

WebView を使用して、クライアントアプリケーションの一部としてウェブアプリケーションまたはウェブページを配信します。WebView クラスは、Android の View クラスの拡張であり、アクティビティレイアウトの一部としてウェブページを表示できます。この値には、ナビゲーションコントロールやアクセスします。WebView は、デフォルトではウェブページを表示するだけです。

WebView は、アプリ内に必要な情報を提供するのに役立ちますエンドユーザー契約やユーザーガイドなどの更新に関与する場合もあります。Android アプリ内で次のフィールドを含む Activity を作成できます。 WebView と入力し、それを使用してオンラインでホストされているドキュメントを表示します。

WebView は、API 呼び出しを必要とするユーザーにアプリがデータを提供する場合にも役立ちます。メールなどのデータを取得する必要があります。この場合はウェブを表示する WebView を Android アプリで作成する方がネットワークリクエストを実行せずに、すべてのユーザーデータを含むデータを解析して Android レイアウトにレンダリングするその代わりに Android デバイス向けにカスタマイズしたウェブページを作成し、ウェブページを読み込む Android アプリ内の WebView。

このドキュメントでは、WebView の使用を開始する方法と、ウェブページから Android アプリのクライアントサイドコードへ JavaScript を送信する方法ページナビゲーションの処理方法と、WebView 使用時のウィンドウの管理方法。

以前のバージョンの Android で WebView を操作する

アプリの最新の WebView 機能をデバイスで安全に使用するには、追加する場合は、AndroidX Webkit ライブラリを使用します。これは、以前のプラットフォームバージョンでは使用できない android.webkit API を使用するようにアプリに追加できる静的ライブラリです。

次のように build.gradle ファイルに追加します。

KotlinGroovy

dependencies {
    implementation("androidx.webkit:webkit:1.8.0")
}

dependencies {
    implementation ("androidx.webkit:webkit:1.8.0")
}

WebView について例をご覧ください。

アプリに WebView を追加する

アプリに WebView を追加するには、<WebView> 要素をまたは、Activity ウィンドウ全体を WebView として設定します。 onCreate()。

アクティビティレイアウトに WebView を追加する

レイアウト内のアプリに WebView を追加するには、次のコードをアクティビティのレイアウト XML ファイル:

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
/>

WebView でウェブページを読み込むには、次の例に示すように loadUrl() を使用します。

KotlinJava

val myWebView: WebView = findViewById(R.id.webview)
myWebView.loadUrl("http://www.example.com")

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl("http://www.example.com");

onCreate() で WebView を追加する

代わりに、アクティビティの onCreate() メソッドでアプリに WebView を追加するには、次のコマンドを使用します。次のようなロジックになります。

KotlinJava

val myWebView = WebView(activityContext)
setContentView(myWebView)

WebView myWebView = new WebView(activityContext);
setContentView(myWebView);

次のように、ページを読み込みます。

KotlinJava

myWebView.loadUrl("http://www.example.com")

myWebView.loadUrl("https://www.example.com");

または、HTML 文字列から URL を読み込みます。

KotlinJava

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
val unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
val encodedHtml = Base64.encodeToString(unencodedHtml.toByteArray(), Base64.NO_PADDING)
myWebView.loadData(encodedHtml, "text/html", "base64")

// Create an unencoded HTML string, then convert the unencoded HTML string into
// bytes. Encode it with base64 and load the data.
String unencodedHtml =
     "<html><body>'%23' is the percent code for ‘#‘ </body></html>";
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(),
        Base64.NO_PADDING);
myWebView.loadData(encodedHtml, "text/html", "base64");

アプリがインターネットにアクセスできる必要があります。インターネットアクセスを取得するには、次の例に示すように、マニフェストファイルで INTERNET 権限をリクエストします。

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

次のいずれかの方法で WebView をカスタマイズできます。

全画面表示のサポートを有効にするには、 WebChromeClient。このクラス WebView がホストアプリの UI を変更する権限を必要とする場合にも呼び出されます。ウィンドウの作成や閉じたり、JavaScript ダイアログをできます。このコンテキストでのデバッグの詳細については、ウェブアプリをデバッグするをご覧ください。
コンテンツの表示に影響するイベント（フォームのエラーなど）の処理ナビゲーションを WebViewClient。また、 URL の読み込みをインターセプトします。
変更による JavaScript の有効化 WebSettings。
JavaScript を使用して、挿入した Android フレームワークオブジェクトにアクセスする WebView に変換します。

WebView で JavaScript を使用する

WebView に読み込むウェブページで JavaScript を使用する場合は、 WebView で JavaScript を有効にします。JavaScript を有効にすると、アプリコードと JavaScript コードの間にインターフェースを作成する。

JavaScript を有効にする

デフォルトでは、JavaScript は WebView で無効になっています。WebView に接続された WebSettings で有効にできます。次を使用して WebSettings を取得します。 getSettings()してから、有効にする JavaScript: setJavaScriptEnabled()。

次の例をご覧ください。

KotlinJava

val myWebView: WebView = findViewById(R.id.webview)
myWebView.settings.javaScriptEnabled = true

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

WebSettings では、その他のさまざまな設定にアクセスできます。便利です。たとえば、Android アプリの WebView 専用に設計されたウェブアプリケーションを開発している場合は、setUserAgentString() を使用してカスタムユーザーエージェント文字列を定義し、ウェブページでカスタムユーザーエージェントをクエリして、ウェブページをリクエストしているクライアントが Android アプリであることを確認できます。

JavaScript コードを Android コードにバインドする

Android アプリで WebView 専用のウェブアプリケーションを開発する場合は、JavaScript コードとクライアント側 Android コードの間にインターフェースを作成できます。たとえば、JavaScript コードは Dialog を表示する Android コード JavaScript の alert() 関数を使用する代わりに、

JavaScript と Android のコードの間に新しいインターフェースをバインドするには、addJavascriptInterface() を呼び出し、JavaScript にバインドするクラスインスタンスと、クラスにアクセスするために JavaScript が呼び出すことができるインターフェース名を渡します。

警告: addJavascriptInterface() を使用すると、JavaScript で Android アプリを制御できます。これは便利な機能ですが、危険なセキュリティ問題となる可能性もあります。WebView の HTML が信頼できない場合（HTML の一部またはすべてが不明なユーザーまたはプロセスによって提供されるなど）、攻撃者は、クライアント側のコードを実行する HTML、および攻撃者が選択した任意のコードを含めることができます。そのため、WebView に表示されるすべての HTML および JavaScript を記述しない限り、addJavascriptInterface() を使用しないでください。ユーザーが WebView 内で自分のウェブページ以外のウェブページに移動できないようにします。代わりに、ユーザーのデフォルトのブラウザアプリケーションで外部リンクを開くようにします。デフォルトでは、ユーザーのウェブブラウザがすべての URL リンクを開くため、この警告は主に、次のセクションで説明するように、ページナビゲーションを自分で処理する場合に適用されます。

例として、Android アプリに次のクラスを含めることができます。

KotlinJava

/** Instantiate the interface and set the context.  */
class WebAppInterface(private val mContext: Context) {

    /** Show a toast from the web page.  */
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
    }
}

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context. */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page. */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

この例では、WebAppInterface クラスを使用して、ウェブページで showToast() を使用した Toast メッセージメソッドを呼び出します。

このクラスを、WebView で実行される JavaScript にバインドするには、次のコマンドを使用します。 addJavascriptInterface()。次の例をご覧ください。

KotlinJava

val webView: WebView = findViewById(R.id.webview)
webView.addJavascriptInterface(WebAppInterface(this), "Android")

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

これにより、Android というインターフェースが作成され、 WebView。この時点で、ウェブアプリケーションは WebAppInterface クラス。たとえば、次の HTML と JavaScript は、ユーザーがボタンをタップしたときに、新しいインターフェースを使用してトーストメッセージを作成します。

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

JavaScript から Android インターフェースを初期化する必要はありません。「 WebView により、自動的にウェブページで利用可能になります。ユーザーがボタンをタップすると、showAndroidToast() 関数が Android インターフェースを使用する WebAppInterface.showToast() メソッドを呼び出すことができます。

ページナビゲーションを処理する

ユーザーが WebView のウェブページでリンクをタップすると、デフォルトでは Android は URL を処理するアプリを起動します。通常、デフォルトのウェブブラウザが開き、はリンク先 URL を読み込みます。ただし、デフォルトの環境では、この動作をオーバーライドして、 WebView。リンクは WebView 内で開きます。その後、このユーザーにウェブページ履歴をさかのぼって移動し、（WebView）

ユーザーがタップしたリンクを開くには、setWebViewClient() を使用して WebView に WebViewClient を提供します。ユーザーがタップしたすべてのリンクは WebView に読み込まれます。クリックしたリンクの読み込み先をさらに制御したい場合は、shouldOverrideUrlLoading() メソッドをオーバーライドする独自の WebViewClient を作成します。次の例では、MyWebViewClient が内部クラスであることを前提としています。 /Activity。

KotlinJava

private class MyWebViewClient : WebViewClient() {

    override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
        if (Uri.parse(url).host == "www.example.com") {
            // This is your website, so don't override. Let your WebView load
            // the page.
            return false
        }
        // Otherwise, the link isn't for a page on your site, so launch another
        // Activity that handles URLs.
        Intent(Intent.ACTION_VIEW, Uri.parse(url)).apply {
            startActivity(this)
        }
        return true
    }
}

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        if ("www.example.com".equals(request.getUrl().getHost())) {
      // This is your website, so don't override. Let your WebView load the
      // page.
      return false;
    }
    // Otherwise, the link isn't for a page on your site, so launch another
    // Activity that handles URLs.
    Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl());
    startActivity(intent);
    return true;
  }
}

次に、以下のとおり、WebView 用に新しい WebViewClient のインスタンスを作成します。

KotlinJava

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webViewClient = MyWebViewClient()

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

これで、ユーザーがリンクをタップすると、 shouldOverrideUrlLoading() メソッド: URL ホストが一致するかどうかを確認します。上記の例で定義されているように、特定のドメインを指定します。一致する場合はメソッドは false を返し、URL の読み込みをオーバーライドしません。これにより、 WebView は通常どおり URL を読み込みます。URL ホストが一致しない場合、Intent が作成され、URL 処理用のデフォルトの Activity が起動されます。この Activity は、ユーザーのデフォルトのウェブブラウザに解決されます。

カスタム URL を処理する

WebView は、リソースのリクエスト時とリンクの解決時に制限を適用します実装する方法を学びましたたとえば、shouldOverrideUrlLoading() や shouldInterceptRequest() などのコールバックを実装すると、WebView は有効な URL に対してのみコールバックを呼び出します。

たとえば、WebView が shouldOverrideUrlLoading() メソッドを呼び出さないことがあります。次のようなリンクがあります。

<a href="showProfile">Show Profile</a>

上記の例のような無効な URL は WebView で不整合に処理されるため、代わりに適切な形式の URL を使用することをおすすめします。組織で利用しているドメインのカスタムスキームまたは HTTPS URL を使用できます。できます。

前の例のようにリンクに単純な文字列を使用する代わりに、次のようなカスタムスキームを使用します。

<a href="example-app:showProfile">Show Profile</a>

その後、この URL を shouldOverrideUrlLoading() メソッドで次のように処理できます。これを次のように使用します。

KotlinJava

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
const val APP_SCHEME = "example-app:"

override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
    return if (url?.startsWith(APP_SCHEME) == true) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length), "UTF-8")
        respondToData(urlData)
        true
    } else {
        false
    }
}

// The URL scheme must be non-hierarchical, meaning no trailing slashes.
private static final String APP_SCHEME = "example-app:";

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith(APP_SCHEME)) {
        urlData = URLDecoder.decode(url.substring(APP_SCHEME.length()), "UTF-8");
        respondToData(urlData);
        return true;
    }
    return false;
}

shouldOverrideUrlLoading() API は主に、特定の URL のインテントを起動することを目的としています。実装する際は、WebView ハンドルの URL に対して false を返すようにしてください。ただし、起動インテントに限定されません。上記のコードサンプルでは、起動インテントを任意のカスタム動作に置き換えることができます。

ウェブページの履歴を操作する

WebView が URL の読み込みをオーバーライドすると、アクセスしたウェブページの履歴が自動的に蓄積されます。履歴を前後に移動するには、goBack() と goForward() を使用します。

たとえば、Activity でデバイスの [戻る] ボタンを使用して後方に移動する方法は次のとおりです。

KotlinJava

override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean {
    // Check whether the key event is the Back button and if there's history.
    if (keyCode == KeyEvent.KEYCODE_BACK && myWebView.canGoBack()) {
        myWebView.goBack()
        return true
    }
    // If it isn't the Back button or there isn't web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event)
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // Check whether the key event is the Back button and if there's history.
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }
    // If it isn't the Back button or there's no web page history, bubble up to
    // the default system behavior. Probably exit the activity.
    return super.onKeyDown(keyCode, event);
}

アプリで AndroidX AppCompat 1.6.0 以降を使用している場合は、前のスニペットをさらに簡素化できます。

KotlinJava

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack()
    }
}

onBackPressedDispatcher.addCallback {
    // Check whether there's history.
    if (myWebView.canGoBack()) {
        myWebView.goBack();
    }
}

canGoBack() メソッドは、ユーザーがアクセスできるウェブページ履歴がある場合に true を返します。同様に canGoForward() を使用して次のことを行えます。転送履歴があるかどうかをチェックします。このチェックを行わない場合、ユーザーが履歴の最後に到達すると、goBack() と goForward() は何も行いません。

デバイス設定の変更を処理する

アクティビティの状態変化は、実行時にデバイスの構成が変化したときに発生します。ユーザーがデバイスを回転させたときやインプットメソッドエディタを閉じたときなど、変更したとき（IME）。これらの変更により、WebView オブジェクトのアクティビティが破棄され、新しいアクティビティが作成される。これにより、読み込まれる新しい WebView オブジェクトも作成され、破棄されたオブジェクトの URL。アクティビティのデフォルトの動作を変更するには、マニフェスト内の orientation の変更の処理方法を変更できます。関連資料実行時の構成変更の処理については、構成の処理変更します。

ウィンドウを管理する

デフォルトでは、新しいウィンドウを開くリクエストは無視されます。このことは JavaScript またはリンクの target 属性によって開かれます。WebChromeClient をカスタマイズして、複数のウィンドウを開く動作をご自身で提供できます。

アプリのセキュリティを高めるには、アプリの起動時に表示されるポップアップや新しいウィンドウをあります。この動作を最も安全に実装する方法は、setSupportMultipleWindows() に "true" を渡しつつ、setSupportMultipleWindows() が依存する onCreateWindow() メソッドをオーバーライドしないことです。このロジックにより、リンクで target="_blank" を使用するページは読み込まれなくなります。

WebView でウェブアプリを作成する

以前のバージョンの Android で WebView を操作する

アプリに WebView を追加する

アクティビティ レイアウトに WebView を追加する

onCreate() で WebView を追加する

WebView で JavaScript を使用する

JavaScript を有効にする

JavaScript コードを Android コードにバインドする

ページ ナビゲーションを処理する

カスタム URL を処理する

ウェブページの履歴を操作する

デバイス設定の変更を処理する

ウィンドウを管理する

アクティビティレイアウトに WebView を追加する

ページナビゲーションを処理する