Kotlinで WebView を扱うことは、Androidアプリ開発においてネイティブアプリとWeb技術を統合するための中核的なテーマです。
WebViewは単に「Webページを表示する部品」ではなく、
- 既存Webサービスのアプリ内展開
- SPA（React / Vue / Next.js 等）の内包
- JavaScriptとKotlin間の双方向連携
- ログイン・決済・管理画面の実装
といった ハイブリッドアプリ構築 に不可欠な存在です。
本記事では、基本構造 → 実装 → 設定 → JavaScript連携 → セキュリティ → 実務上の注意点 まで、誤解の生じやすい点を避けながら詳しく解説します。
WebViewとは何か
WebViewは、Androidアプリの画面内に Webブラウザ機能を埋め込むUIコンポーネント です。
内部的には Android System WebView（Chromiumベース）を利用しています。
WebViewで可能なこと
- HTML / CSS / JavaScript の表示・実行
- Webページのアプリ内表示
- JavaScript ⇄ Kotlin のデータ連携
- Webアプリのネイティブ化
Chrome Custom Tabs と異なり、UIや挙動をアプリ側で完全に制御できるのが特徴です。
WebViewの基本構成
WebViewは以下の要素で構成されます。
- WebView本体（表示領域）
- WebSettings（挙動設定）
- WebViewClient（ページ遷移・ロード制御）
- WebChromeClient（高度なブラウザ機能）
これらを正しく組み合わせないと、意図しない挙動が発生します。
レイアウトへの配置
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
一般的には ConstraintLayout や FrameLayout 内に配置します。
Kotlinでの基本初期化
val webView = findViewById<WebView>(R.id.webView)
webView.loadUrl("https://example.com")
ただし、この状態では JavaScriptは無効 であり、実務では不十分です。
WebSettings（必須設定）
val settings = webView.settings
settings.javaScriptEnabled = true
settings.domStorageEnabled = true
settings.loadWithOverviewMode = true
settings.useWideViewPort = true
settings.cacheMode = WebSettings.LOAD_DEFAULT
主な設定項目の意味
| 設定 | 内容 |
|---|---|
| javaScriptEnabled | JavaScriptの有効化（必須） |
| domStorageEnabled | localStorage / sessionStorage |
| useWideViewPort | レスポンシブ対応 |
| cacheMode | キャッシュ制御 |
| userAgentString | UAカスタマイズ（分析・制御用途） |
WebViewClient（ページ遷移制御）
なぜ必要か
WebViewClientを設定しない場合、リンククリック時に 外部ブラウザが起動 します。
webView.webViewClient = WebViewClient()
shouldOverrideUrlLoading の正しい理解
override fun shouldOverrideUrlLoading(
view: WebView,
request: WebResourceRequest
): Boolean
- true：アプリ側で処理する（WebViewには任せない）
- false：WebViewに処理を任せる（WebView内で開く）
実務でよくある例
override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {
val url = request.url.toString()
return if (url.startsWith("tel:") || url.startsWith("mailto:")) {
// Intentで外部アプリへ
true
} else {
false
}
}
WebChromeClient（拡張ブラウザ機能）
以下の機能を使う場合、WebChromeClientが必要です。
- JavaScriptの
alert / confirm - ページ読み込み進捗
<input type="file">- console.log のLogcat出力
webView.webChromeClient = WebChromeClient()
※ <input type="file"> を完全に動作させるにはonShowFileChooser などの 追加実装が必要な場合が多い 点に注意してください。
JavaScript ⇄ Kotlin 連携
Kotlin → JavaScript
webView.evaluateJavascript(
"javascript:showMessage('Hello')",
null
)
JavaScript → Kotlin
class WebAppInterface(private val context: Context) {
@JavascriptInterface
fun showToast(message: String) {
Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
}
}
webView.addJavascriptInterface(WebAppInterface(this), "Android")
Android.showToast("こんにちは")
@JavascriptInterface は必須
読み込み先URLを厳密に制御しないと 重大なセキュリティリスク になります
ローカルHTML（assets）の読み込み
webView.loadUrl("file:///android_asset/index.html")
- オフライン対応
- WebViewアプリ化
- SPAビルド成果物の配置
※ この場合、ファイルアクセス制限を一律に無効化すると動作しない可能性があります。
戻るボタン制御（推奨実装）
onBackPressedDispatcher.addCallback(this) {
if (webView.canGoBack()) {
webView.goBack()
} else {
finish()
}
}
WebViewアプリではUX向上のため 必須実装 です。
セキュリティ設定（ユースケース依存）
ファイル・コンテンツアクセス
settings.allowFileAccess = false
settings.allowContentAccess = false
- 外部Web表示のみ → 無効化推奨
- assets運用 → 必要範囲で許可
Mixed Content
settings.mixedContentMode = WebSettings.MIXED_CONTENT_NEVER_ALLOW
- HTTPS内のHTTPリソースを遮断
- 古いWebサイトでは表示崩れの可能性あり
- 要件次第で調整が必要
Cookieとログイン保持
WebViewはCookieを保持できますが、ログイン問題は以下が絡みます。
- CookieManager設定
- サードパーティCookie
- SameSite属性
- WebViewデータ削除
- リダイレクト構造
「Cookie未設定＝保持されない」と単純化できないため、Web側設計との連携が重要です。
WebViewの適性
向いている用途
- 会員ページ・管理画面
- SPAのアプリ内展開
- LP / CMS / EC
- 既存Web資産の流用
向いていない用途
- 高速描画UI
- ゲーム
- OS深部連携が多い処理
実務でのベストプラクティス
- WebViewは用途ごとに分離
- JavaScript Interfaceは最小限
- 読み込み先URLはホワイトリスト管理
- エラー・通信失敗をWeb側でも考慮
- Android System WebViewの差異に注意
まとめ
- WebViewは「アプリ内ブラウザ」ではなく 設計が重要なプラットフォーム
- 初期設定不足が不具合の原因になりやすい
- セキュリティ設定は 一律ではなく用途依存
- JavaScript連携は強力だが慎重に扱う必要がある
以上、Kotlinのwebviewについてでした。
最後までお読みいただき、ありがとうございました。
