[Android] WebView でウェブアプリの作成

webページを見たい場合や、ローカルで解説ページをhtmlファイルで作成して表示する場合にWebViewを使うことができます。
あるいはもっと簡単にIntentで既存のBrowser(Chromeなど)に飛ばすことも可能です。
　

Android Studio
2022.1.1

WebView の設定

　
Webページを見る方法は2通りあります。

WebViewを使う
端末の持っているChrome等のBrowserアプリに投げてそれで閲覧するやり方

目次
1. WebView
2. Browerアプリ起動
3. サンプルコード
4. サンプル動画

WebView

　
WebViewにはdefaultではJavaScriptやback keyなど通常のブラウザとしての機能は何もついていません。

Googleは通常のブラウザを使いたいのであればChrome等を使った方がいいと言っています。
WebView | Android Developers
　
ではどういったケースでの使用を目的としているのでしょうか、例えば、アプリの一部として使うということです。アプリの静的なヘルプ画面をHTML で作成することなどが考えられます。
　
WebViewの設定:　
基本的な使い方は、loadUrlにURLを指定してWebViewを開きます。
　

// レイアウトファイル web.xml を使ったケース
setContentView(R.layout.web);
WebView webView = findViewById(R.id.web_view);
webView.loadUrl("https://example.com/");

// コードで記述するケース
WebView webView = new WebView(this);
setContentView(webView);
webView.loadUrl("https://example.com/");

// レイアウトファイル web.xml を使ったケース

setContentView(R.layout.web);

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

webView.loadUrl("https://example.com/");

// コードで記述するケース

WebView webView = new WebView(this);

setContentView(webView);

webView.loadUrl("https://example.com/");

　
あるいはHTML文を直接読み込むこともできます。
　

 String summary = "<html><body>You scored <b>192</b> points.</body></html>";
 webview.loadData(summary, "text/html", null);

1 2	String summary = "<html><body>You scored <b>192</b> points.</body></html>"; webview.loadData(summary, "text/html", null);

　
この他の機能としてJavaScriptを使えるようにしたり、バックキーで戻る操作ができるようにすることもできます。
　

// Instagram等のページはJavaScriptやWeb Storageを有効にしないと表示されません
// JavaScriptを有効化
webView.getSettings().setJavaScriptEnabled(true);

// Web Storage を有効化
webView.getSettings().setDomStorageEnabled(true);

// HTML5 Video support のため
// Hardware acceleration on
getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

// Instagram等のページはJavaScriptやWeb Storageを有効にしないと表示されません

// JavaScriptを有効化

webView.getSettings().setJavaScriptEnabled(true);

// Web Storage を有効化

webView.getSettings().setDomStorageEnabled(true);

// HTML5 Video support のため

// Hardware acceleration on

getWindow().setFlags(

WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,

WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    // 戻るページがある場合
    if (event.getAction() == KeyEvent.ACTION_DOWN
            && keyCode == KeyEvent.KEYCODE_BACK){
        if(webView.canGoBack()){
            webView.goBack();
        }
        else{
            finish();
        }
        return true;
    }

    return super.onKeyDown(keyCode,  event);
}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

// 戻るページがある場合

if (event.getAction() == KeyEvent.ACTION_DOWN

&& keyCode == KeyEvent.KEYCODE_BACK){

if(webView.canGoBack()){

webView.goBack();

}

else{

finish();

}

return true;

}

return super.onKeyDown(keyCode, event);

}

Browerアプリ起動

　
Full Browseを期待するのであればintentで他のBrowserを起動させた方がいいでしょう。ただし、元のアプリとの連携はとれません。
　
Browserを起動させる場合はIntent.ACTION_VIEWでintentを投げます。

Uri uri = Uri.parse(accessUrl);
Intent intent = new Intent(Intent.ACTION_VIEW,uri);
startActivity(intent);

Uri uri = Uri.parse(accessUrl);

Intent intent = new Intent(Intent.ACTION_VIEW,uri);

startActivity(intent);

サンプルコード

　
両方の方法を試すテストコードです。
MainActivity.java

//package your.package.name;

package com.example.testwebview;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.content.Intent;
import android.net.Uri;
import android.view.KeyEvent;
import android.view.WindowManager;
import android.webkit.WebView;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private WebView webView;
    private final String accessUrl = "https://akira-watson.com/";

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

        Button button1 = findViewById(R.id.button_1);
        Button button2 = findViewById(R.id.button_2);

        // WebView
        button1.setOnClickListener(v -> {

            setContentView(R.layout.web);
            webView = findViewById(R.id.web_view);

            // JavaScriptを有効化(JavaScript インジェクションに注意)
            webView.getSettings().setJavaScriptEnabled(true);

            // Web Storage を有効化
            webView.getSettings().setDomStorageEnabled(true);

            // Hardware Acceleration ON
            getWindow().setFlags(
                    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
                    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

            webView.loadUrl(accessUrl);
        });

        // Browser
        button2.setOnClickListener(v -> {
            Uri uri = Uri.parse(accessUrl);
            Intent intent = new Intent(Intent.ACTION_VIEW,uri);
            startActivity(intent);
        });
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // 戻るページがある場合
        if (event.getAction() == KeyEvent.ACTION_DOWN
                && keyCode == KeyEvent.KEYCODE_BACK){
            if(webView.canGoBack()){
                webView.goBack();
            }
            else{
                finish();
            }
            return true;
        }

        return super.onKeyDown(keyCode,  event);
    }
}

//package your.package.name;

package com.example.testwebview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.content.Intent;

import android.net.Uri;

import android.view.KeyEvent;

import android.view.WindowManager;

import android.webkit.WebView;

import android.widget.Button;

public class MainActivity extends AppCompatActivity {

private WebView webView;

private final String accessUrl = "https://akira-watson.com/";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

Button button1 = findViewById(R.id.button_1);

Button button2 = findViewById(R.id.button_2);

// WebView

button1.setOnClickListener(v -> {

setContentView(R.layout.web);

webView = findViewById(R.id.web_view);

// JavaScriptを有効化(JavaScript インジェクションに注意)

webView.getSettings().setJavaScriptEnabled(true);

// Web Storage を有効化

webView.getSettings().setDomStorageEnabled(true);

// Hardware Acceleration ON

getWindow().setFlags(

WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,

WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

webView.loadUrl(accessUrl);

});

// Browser

button2.setOnClickListener(v -> {

Uri uri = Uri.parse(accessUrl);

Intent intent = new Intent(Intent.ACTION_VIEW,uri);

startActivity(intent);

});

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

// 戻るページがある場合

if (event.getAction() == KeyEvent.ACTION_DOWN

&& keyCode == KeyEvent.KEYCODE_BACK){

if(webView.canGoBack()){

webView.goBack();

}

else{

finish();

}

return true;

}

return super.onKeyDown(keyCode, event);

}

　
インターネットの使用許可を設定します
android.permission.INTERNET
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ...

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        ...
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

...

<uses-permission android:name="android.permission.INTERNET" />

<application

...

</application>

</manifest>

　
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:background="#dfe"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button_1"
            android:text="@string/button_1"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/button_2"
            android:text="@string/button_2"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" />

    </LinearLayout>
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="16dp"

android:background="#dfe"

android:orientation="vertical"

android:gravity="center"

tools:context=".MainActivity">

<LinearLayout

android:layout_marginTop="20dp"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button

android:id="@+id/button_1"

android:text="@string/button_1"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content" />

<Button

android:id="@+id/button_2"

android:text="@string/button_2"

android:layout_marginStart="10dp"

android:layout_marginEnd="10dp"

android:layout_width="0dp"

android:layout_weight="1"

android:layout_height="wrap_content" />

</LinearLayout>

　
WebView を表示させるxmlファイル
web.xml

<?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">
    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </WebView>

</LinearLayout>

<?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">

<WebView

android:id="@+id/web_view"

android:layout_width="match_parent"

android:layout_height="match_parent">

</WebView>

</LinearLayout>

　
strings.xml

<resources>
    <string name="app_name">TestWebView</string>
    <string name="button_1">WebView</string>
    <string name="button_2">Browser</string>
</resources>

<string name="app_name">TestWebView</string>

<string name="button_1">WebView</string>

<string name="button_2">Browser</string>

</resources>

サンプル動画

　
これを見てもらうと分かりますが、WebViewのこの設定ではreturnキーで戻っても、最初のアプリ画面には戻れません。Browserで開いた場合は戻ることが可能です。
　

　
WebViewを使って戻る場合は、WebView専用にActivityを作成してIntentで遷移させると戻ることができます。
　

Intent intent = new Intent(getApplication(), WebPage.class);
startActivity(intent);

1 2	Intent intent = new Intent(getApplication(), WebPage.class); startActivity(intent);

　
　
References:
WebView | Android Developers
Building Web Apps in WebView | Android Developers
Hardware Acceleration | Android Developers