モバイルアプリ開発において、既存のWebコンテンツをアプリ内で表示したい場面は多い。そんな時に役立つのが WebView だ。Android Studioを使えば、わずかなコードでブラウザ機能をアプリに組み込める。この記事では、WebViewアプリの基本的な作り方からカスタマイズのコツまで、実践的な手順を解説する。
WebViewとは？
WebView は、Androidアプリ内でウェブページを表示するためのコンポーネント。ネイティブアプリとWeb技術をシームレスに連携させられるため、ハイブリッドアプリ開発で重宝される。例えば、既存のウェブサイトをラップしてアプリ化したり、動的に更新されるコンテンツを埋め込んだりするのに最適だ。
WebViewのメリット
- 開発コスト削減：既存のWebサイトを再利用できる
- メンテナンス性向上：サーバー側の更新が即座に反映される
- クロスプラットフォーム対応：Web技術を使うため、iOS版も比較的簡単に作れる
Android StudioでWebViewアプリを作成する手順
1. 新規プロジェクトの作成
Android Studioを起動し、Empty Activity テンプレートを選択。プロジェクト名は「WebViewDemo」など分かりやすいものにしよう。
2. レイアウトファイルの編集
activity_main.xml を開き、WebViewを追加する。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3. MainActivityのコードを記述
MainActivity.kt にWebViewの設定を追加。
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val webView = findViewById<WebView>(R.id.webView)
webView.webViewClient = WebViewClient() // デフォルトブラウザを開かず、アプリ内で表示
webView.settings.javaScriptEnabled = true // JavaScriptを有効化
webView.loadUrl("https://www.google.com") // 表示するURLを指定
}
}
4. インターネット権限の追加
AndroidManifest.xml に以下の権限を追加。
<uses-permission android:name="android.permission.INTERNET" />
これで、基本的なWebViewアプリが完成。ビルドして実行すれば、指定したURLがアプリ内で表示されるはずだ。
WebViewのカスタマイズ方法
ページ読み込みの進捗を表示
WebViewClient を拡張して、読み込み状態を監視できる。
webView.webViewClient = object : WebViewClient() {
override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
super.onPageStarted(view, url, favicon)
// 読み込み開始時の処理（例：プログレスバー表示）
}
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
// 読み込み完了時の処理（例：プログレスバー非表示）
}
}
戻るボタンの処理
ユーザーが「戻る」を押した際、WebViewの履歴を遡れるようにする。
override fun onBackPressed() {
if (webView.canGoBack()) {
webView.goBack()
} else {
super.onBackPressed()
}
}
JavaScript連携
WebViewとネイティブコードの連携も可能。例えば、WebページのボタンクリックでAndroidのToastを表示させるには：
webView.addJavascriptInterface(object {
@JavascriptInterface
fun showToast(message: String) {
Toast.makeText(this@MainActivity, message, Toast.LENGTH_SHORT).show()
}
}, "Android")
HTML側では以下のように呼び出せる：
<button onclick="Android.showToast('Hello from Web!')">Click Me</button>
よくある問題と解決策
| 問題 | 解決方法 |
|---|---|
| 白い画面が表示される | webView.settings.domStorageEnabled = true を追加 |
| リンクをタップすると外部ブラウザが開く | WebViewClient を設定し、shouldOverrideUrlLoading をオーバーライド |
| HTTPSサイトでエラー | onReceivedSslError をハンドリング（本番環境では適切な証明書を使用） |
セキュリティ対策
WebViewには潜在的な脆弱性があるため、以下の対策が推奨される：
- JavaScriptの無害化：
setJavaScriptEnabled(true)は必要な場合のみ使用 - ファイルアクセスの制限：
webView.settings.allowFileAccess = false - 安全なコンテンツのみ許可：
android:usesCleartextTraffic="false"をマニフェストに追加
まとめ
Android StudioのWebViewを使えば、ウェブコンテンツを手軽にアプリに統合できる。基本的な実装からカスタマイズ、セキュリティ対策まで押さえれば、よりリッチなユーザー体験を提供可能だ。
次は何を作る？
- 複数ページを切り替えるタブ付きWebView
- オフラインでも動作するキャッシュ機能の実装
- WebViewとFirebaseを連携したプッシュ通知
Android開発の可能性は無限大。この記事を参考に、あなただけのWebViewアプリを作ってみよう。
参考：
