すだみなさまこんにちは〜！
メモリアインクのすだです。
本日は、
KotlinのWebViewClient使って、
WebView表示処理にカスタマイズを加える方法を徹底解説していきます！
この記事を読んでわかること…
・WebViewClientの使い方
・shouldOverrideUrlLoadingの使い方
・onPageStarted、onPageFinishedの使い方
・onReceivedErrorの使い方
WebView表示の基本については、以下の記事で詳しく紹介しています！
ぜひあわせてご覧くださいね！
環境
- Kotlin (ver 1.9.0)
- Android Studio (Giraffe | 2022.3.1 Patch 3)
WebViewClientとは？
WebViewClientは、Androidアプリの中でWebViewを使う際に、
WebViewの動作をカスタマイズするためのクラスです。
通常、WebViewにURLを読み込むと
クリックしたリンクやリダイレクトによって、外部のブラウザが開いてしまうことがあります。
WebViewClientを設定すると、このような動作を制御し、
WebView内でページの遷移やエラーハンドリングなどをカスタマイズできるようになります。
webView.webViewClient = object : WebViewClient() {
...
}上記のようにwebView.webViewClientにカスタムのWebViewClientを設定します。
これにより、WebViewのリンク遷移やURL処理を自分でコントロールできるようになります。
それでは早速、WebViewClientの様々な使い方でカスタマイズしていきましょう！
特定のURLだけを許可する方法
「特定のURLはWebView内で開き、それ以外は外部ブラウザで開く」という挙動を実装してみます。
webView.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView?, request: android.webkit.WebResourceRequest?): Boolean {
val url = request?.url.toString()
return if (url.startsWith("https://www.memoriainc.com")) {
false // WebView内で開く
} else {
// 他のURLは外部ブラウザで開く
val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
startActivity(intent)
true
}
}
}また、Intent.ACTION_VIEWとは Androidの標準アクションの一つで、
「指定されたURIを適切なアプリケーションで開く」という動作を指示します。
これにより、「他のURLは外部ブラウザで開く」という挙動を実現できます。
ページの読み込み状態を監視
ページが読み込まれるタイミングで処理を実行できます。
ここでは実際に、「ローディング中にスピナーを表示し、完了後に非表示にする」という処理を作成してみましょう。
webView.webViewClient = object : WebViewClient() {
override fun onPageStarted(view: WebView?, url: String?, favicon: android.graphics.Bitmap?) {
super.onPageStarted(view, url, favicon)
// ローディングスピナーを表示
progressBar.visibility = View.VISIBLE
}
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
// ローディングスピナーを非表示
progressBar.visibility = View.GONE
}
}読み込みエラーの処理
ネットワーク接続がない場合や、サーバーエラーが発生した場合に、エラー画面を表示するよう実装してみます。
webView.webViewClient = object : WebViewClient() {
override fun onReceivedError(
view: WebView?,
request: android.webkit.WebResourceRequest?,
error: android.webkit.WebResourceError?
) {
super.onReceivedError(view, request, error)
println("エラーが発生: ${error?.description}")
// エラーページを表示する処理など
}
}
特定のリソースをブロックする
広告や特定のスクリプトを読み込まないようにしたい場合に、リソースのURLをフィルタリングすることもできます。
webView.webViewClient = object : WebViewClient() {
override fun shouldInterceptRequest(
view: WebView?,
request: android.webkit.WebResourceRequest?
): android.webkit.WebResourceResponse? {
val url = request?.url.toString()
if (url.contains("ads")) {
// 広告リソースをブロック
return android.webkit.WebResourceResponse(
"text/plain", "UTF-8", null
)
}
return super.shouldInterceptRequest(view, request)
}
}このコードは、WebView内で読み込まれるリソースのURLをチェックし、
特定の条件（ここではURLに”ads”が含まれる場合）に該当するリソースをブロックしています。
return super.shouldInterceptRequest(view, request)条件に該当しないリソース（広告でないリソース）は、上記のように通常通りWebViewに読み込ませます。
キャッシュの無効化
WebViewでWebページを表示する際に、キャッシュを使用しないように設定することもできます。
キャッシュを無効にすることで、WebViewは常に最新のデータを取得し、サーバーから新しいリソースを読み込みます。
webView.webViewClient = object : WebViewClient() {
override fun onPageStarted(view: WebView?, url: String?, favicon: android.graphics.Bitmap?) {
super.onPageStarted(view, url, favicon)
webView.settings.cacheMode = android.webkit.WebSettings.LOAD_NO_CACHE
}
}まとめ
おつかれさまでした！いかがでしたでしょうか！
ただWebViewを表示するだけでなく、WebViewを表示する箇所で様々にカスタマイズしてあげることによって
ユーザー体験の向上につながることがあります！
ぜひぜひマスターしてくださいね！
すだ技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか？
それではまた次の記事でお会いしましょう！
コメント