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 ファイルに追加します。

Kotlin

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

Groovy

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()、 例を示しています。

Kotlin

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

Java

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

onCreate() に WebView を追加する

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

Kotlin

val myWebView = WebView(activityContext)
setContentView(myWebView)

Java

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

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

Kotlin

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

Java

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

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

Kotlin

// 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")

Java

// 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 で無効になっています。この API を有効にするには、 WebSettings が WebView に接続されました。次を使用して WebSettings を取得します。 getSettings()してから、有効にする JavaScript: setJavaScriptEnabled()。

次の例をご覧ください。

Kotlin

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

Java

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

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

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

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

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

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

Kotlin

/** 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()
    }
}

Java

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()。次の例をご覧ください。

Kotlin

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

Java

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）

ユーザーがタップしたリンクを開くには、WebView の WebViewClient を指定します。 setWebViewClient()。 ユーザーがタップしたすべてのリンクは WebView に読み込まれます。より細かく管理したい場合は、 クリックしたリンクが読み込まれた場合、WebViewClient独自の shouldOverrideUrlLoading() メソッドを呼び出します。次の例では、MyWebViewClient が内部クラスであることを前提としています。 /Activity。

Kotlin

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
    }
}

Java

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 のインスタンスを作成します。

Kotlin

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

Java

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

これで、ユーザーがリンクをタップすると、 shouldOverrideUrlLoading() メソッド: URL ホストが一致するかどうかを確認します。 上記の例で定義されているように、特定のドメインを指定します。一致する場合は メソッドは false を返し、URL の読み込みをオーバーライドしません。これにより、 WebView は通常どおり URL を読み込みます。URL ホストが一致しない場合、 Intent が作成され、デフォルト URL を処理するための 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() メソッドで次のように処理できます。 これを次のように使用します。

Kotlin

// 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
    }
}

Java

// 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 に対して false を返すようにしてください。 WebView ハンドル。ただし、インテントは起動することに限定されません。Google Chat では 上記のコードのカスタム動作で起動インテントを置き換える 提供します

WebView が URL の読み込みをオーバーライドすると、 アクセスしたウェブページの履歴前後に移動するには、 goBack() および goForward()。

たとえば、Activity がデバイスの「戻る」を使用する方法を示します。 戻るには、次のボタンがあります。

Kotlin

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)
}

Java

@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 以降を使用している場合は、以前の スニペットをご覧ください。

Kotlin

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

Java

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 を使用して、複数のファイルを開く際の独自の動作を指定できます。 表示されます。

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