Tatsuro のテックブログ

アプリ開発の技術情報を発信します。

トップ > Android > 【Android × Kotlin】WebView でアプリ組み込みの Web ページを表示する

【Android × Kotlin】WebView でアプリ組み込みの Web ページを表示する

Android Kotlin WebView

今回は、WebView でアプリ組み込みの Web ページを表示する方法を解説します。

なお、ここに掲載しているソースコードは以下の環境で動作確認しています。

WebView による Web ページの表示

WebView は、HTML などの Web ページを表示できる View です。

例えば、マニフェストファイルにインターネットアクセス権限を付与して、以下のように URL を指定することにより、その URL の Web ページを表示できます。

val webView: WebView = findViewById(R.id.webView)
webView.loadUrl("https://www.example.com")

一方で、表示する Web ページのファイルをアプリに組み込み、それを表示することも可能です。

ここでは、その方法について解説します。

Web ページのファイルをアプリに組み込む

まず、Web ページのファイルを保存する assets ディレクトリを、アプリモジュールに作成します。

アプリモジュールのディレクトリを右クリックして、New -> Directory の順番でクリックします。

New Directory のウィンドウが表示されるので、src/main/assets をクリックします。

そうすると、アプリモジュールに assets ディレクトリが作成されます。

この assets ディレクトリに以下のような HTML ファイルを保存します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

以上で、Web ページのファイルのアプリ組み込みは完了です。

ローカルの Web ページを表示する

アプリに組み込んだ Web ページを WebView に表示してみます。

WebView を表示する Activity を以下のように実装します。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WebView(this).apply {
            setContentView(this)
            loadUrl("file:///android_asset/index.htm")

            settings.allowFileAccess = true
        }
    }
}

今回は XML のレイアウトファイルを使わずに、WebView のインスタンスを Activity の setContentView に直接渡します。

WebView(this).apply {
    setContentView(this)
    ︙
}

その後、WebView#loadUrl に 表示したい Web ページのファイルパスを指定します。このとき、ファイルパスは、file:///android_asset/{ファイル名} となるように指定します。

    loadUrl("file:///android_asset/index.htm")

最後に、WebView に対してファイルアクセス許可を有効にする必要があります。この設定値は、Android 11 以降、デフォルト値が false に変更されているため、true に設定します。

    settings.allowFileAccess = true

これで、WebView にローカルの Web ページが表示されるようになります。

関連記事

WebView の JavaScript からネイティブコードを呼び出す方法について、以下で解説しています。

tatsurotech.hatenablog.com