WebViewを確認するアプリをつくる

概要

AndroidでWebViewを利用している箇所のデバッグする方法が全くわからなかったので、調べながらまとめてみました
Android StudioでWebViewを確認できるだけの簡易的なアプリをつくっていきます

Android Studioをダウンロードする

Download Android Studio & App Tools - Android Developers

時間かかる

Projectをつくる

New Project
Empty View Activityを選択する

ファイル作成

インストールが終わったらファイルを書き換えていく

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</RelativeLayout>

package com.example.myapplication;

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.web_view);

        webView.setWebViewClient(new WebViewClient());

        // JavaScriptを有効に
        webView.getSettings().setJavaScriptEnabled(true);

        // デバッグ可能に
        WebView.setWebContentsDebuggingEnabled(true);

        webView.loadUrl("https://www.hatenablog.com/");
    }
}

<?xml version="1.0" encoding="utf-8"?>
<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"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MyApplication"
        android:usesCleartextTraffic="true" // 暗号化されていないトラフィックを送信または受信するかどうか。localhostでのデバッグをするので追加
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

ビルドする

ファイルが準備できたら、ビルドする(ツールバーのBuild-Make Project)

エミュレーターを起動する

Device Manager > 端末を指定して起動、RUNを実行する

WebViewでlocalhostをロードする

url部分を書き換える。エミュレーター自身が127.0.0.1を指すため、開発マシンのlocalhostは10.0.2.2を指定する

Android Emulator のネットワークをセットアップする | Android Studio | Android Developers

// 略

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

// 略

        webView.loadUrl("http://10.0.2.2:3000"); // http://10.0.2.2:<ポート番号>/
    }
}