【Android】composeでWebViewを実装する

以下に、Jetpack Composeを使用してAndroidアプリでWebViewを実装する方法を説明します。

必要な依存関係の追加

まず、build.gradleファイルに以下の依存関係を追加します。

dependencies { 
  implementation "androidx.compose.ui:ui:1.0.0"
  implementation "androidx.activity:activity-compose:1.3.0"
  implementation "androidx.compose.material:material:1.0.0" 
}

WebViewの実装

次に、ComposeでWebViewを使用するためにAndroidViewコンポーズを使います。

import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.viewinterop.AndroidView
import com.example.yourapp.ui.theme.YourAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourAppTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    WebViewScreen()
                }
            }
        }
    }
}

@Composable
fun WebViewScreen() {
    // AndroidViewを利用してWebViewをComposeのUIに統合
    AndroidView(factory = {
        WebView(it).apply {
            // WebViewの設定
            settings.javaScriptEnabled = true
            webChromeClient = WebChromeClient()
            webViewClient = WebViewClient()
            // ロードするURL
            loadUrl("https://www.example.com")
        }
    }, update = {
        // 必要があればWebViewの更新処理
    })
}

説明

Jetpack ComposeとWebViewの統合: AndroidViewコンポーズを使用することで、通常のAndroidビュー（この場合はWebView）をCompose内で利用できます。
WebViewの設定: JavaScriptの有効化やクライアント設定を行い、指定したURLをロードします。

このコードを使って、Jetpack Composeアプリ内でWebページを表示することができます。必要に応じて、さらに高度なカスタマイズも可能です。