2023/7/21

【Kotlin/Android Studio】WebViewの実装方法！WebサイトやHTMLを表示する

この記事からわかること

Kotlin/Android StudioでWebViewの使い方
Webサイトをアプリから表示させる方法
リロードや1つ戻る/1つ進むの実装
HTMLやJavaScriptなど
Webpage not available The webpage at URL could not be loaded because: net::ERR_CACHE_MISSの解決法

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

参考文献：公式リファレンス：WebView でのウェブアプリの作成

環境

Android Studio：Flamingo
Kotlin：1.8.20

WevViewでAndroidアプリからWebサイトを表示させる

AndroidアプリからWebサイトを表示させるにはWevViewクラスを使用します。AndroidのView クラスの拡張として定義されているため、ライブラリなどの導入は不要ですぐに利用することが可能です。ナビゲーション機能やアドレスバーなどの機能は含まれないので注意してください。

【Kotlin/Android Studio】WebViewの実装方法！WebサイトやHTMLを表示する

またアプリ内にHTMLで記述したローカルファイルを用意してそのページを表示させることも可能になっています。

WebViewの使い方

AndroidアプリからWebサイト表示させるためにはまず設定を変更する必要があります。デフォルトではインターネットアクセスが許可されていないので「AndroidManifest.xml」に<uses-permission android:name="android.permission.INTERNET" />を追加する必要があります。

AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
+   <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"

これで設定は終了したので「activity_main.xml」内にWebViewを設置して表示させる場所を確保します。

activity_main.xml
<WebView
  android:id="@+id/web_view"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  />

最後に「MainActivity.kt」からloadUrlメソッドを呼び出せばWebサイトが表示されるようになると思います。引数には有効なURLを指定してください。

MainActivity.kt
val myWebView: WebView = findViewById(R.id.web_view)
myWebView.loadUrl("https://appdev-room.com/")

画面をリロードする

ページをリロードするにはreloadメソッドを実行します。

myWebView.reload()

ページを1つ戻る

ページを戻るにはgoBackメソッドを実行します。

myWebView.goBack()

ページを1つ進む

ページを進むにはgoForwardメソッドを実行します。

myWebView.goForward()

注意点

Webサイトを表示できた後に実際に触ってみると分かりますが、画面遷移などはアプリ内では実行することができずブラウザが立ち上がります。またこの状態ではJavaScriptが機能していないためUIが崩れたり、必要な機能が提供されていない可能性があります。

JavaScriptを有効にする

JavaScriptを有効にするにはonCreateメソッドの上に@JavascriptInterfaceアノテーションをloadUrlメソッドの前にmyWebView.settings.javaScriptEnabled = trueを追加します。

@JavascriptInterface
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val myWebView: WebView = findViewById(R.id.web_view)
    myWebView.settings.javaScriptEnabled = true
    myWebView.loadUrl("https://appdev-room.com/")
}

Webpage not available The webpage at URL could not be loaded because: net::ERR_CACHE_MISS

Webサイトを表示させようとした際に上記のようなエラーが発生することがあります。

Webpage not available
The webpage at https://appdev-room.com/ could not be loaded because:
net::ERR_CACHE_MISS

最後に書いてあるERR_CACHE_MISS部分がエラーの内容でこれはAndroidアプリ側というよりWebページアクセス時に問題がある際に起きるエラーです。例えばERR_CACHE_MISSはWebページのキャッシュの取得に失敗した際に発生します。他にはERR_NAME_NOT_RESOLVEDはDNSがサイトのIPアドレスを見つけられない時に発生するエラーです。どちらもキャッシュ絡みのエラーのようです。

「AndroidManifest.xml」に<uses-permission android:name="android.permission.INTERNET" />を追加していない場合でも発生することがあるようなので確認してみてください。