Android AppでWebViewを使うサンプル

はじめに

Android アプリでは、WebView を使ってウェブページをアプリ内に表示することができます。
今回は、最もシンプルな WebView アプリの作成方法をご紹介いたします。

プロジェクトの作成

WebView を扱う Android アプリのプロジェクトを作成します。

Android Studio を起動
起動画面の「New Project 」をクリック
「Empty Activity」を選択し、「Next」をクリック
「Name」に「WebViewApps」を入力し、「Finish」をクリック

AndroidManifest.xml の編集

WebView を使用する場合、アプリにインターネットへのアクセス権限を付与する必要があります。
AndroidManifest.xml を編集して、権限を付与しましょう。

[app] > [src] > [main] > [AndroidManifest.xml] をクリック
以下のコードを AndroidManifest.xml に追加

 インターネット権限
<uses-permission android:name="android.permission.INTERNET" />

AndroidManifest.xml にインターネットアクセス権限追加

Activity の定義

画面（Activity）に WebView を表示するため、WebView のレイアウトを指定します。

[app] > [src] > [main] > [res] > [layout] > [activity_main.xml] をクリック
以下のコードを activity_main.xml に追加

 WebViewのレイアウト
<WebView
android:id="@+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="1dp" />

activity_main.xml へレイアウトの追加

SANACHAN

layout_width と layout_height に wrap_content を指定することで、
WebView を表示するために十分なサイズを自動で調整してくれるようになります。

Activity の実装

準備が整いましたので、実際に Activity の実装をしていきましょう。

[app] > [src] > [main] > [java] > [com.example.webviewapps] > [MainActivity.java] をクリック
以下のようにコードを実装

package com.example.webviewapps;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    static final String URL = "https://www.google.co.jp/";
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Web Viewの初期設定
        webView = (WebView) findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl(URL);
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent e) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (webView != null && webView.canGoBack()) {
                webView.goBack();
            }
            return true;
        } else {
            return super.onKeyDown(keyCode, e);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (webView != null) {
            String url = webView.getUrl();
            webView.loadUrl(url);
        }
    }
}

package com.example.webviewapps;

import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;

import android.os.Bundle;

import android.view.KeyEvent;

import android.webkit.WebView;

import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

static final String URL = "https://www.google.co.jp/";

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Web Viewの初期設定

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

webView.setWebViewClient(new WebViewClient());

webView.getSettings().setJavaScriptEnabled(true);

webView.loadUrl(URL);

}

@Override

public boolean onKeyDown(int keyCode, KeyEvent e) {

if (keyCode == KeyEvent.KEYCODE_BACK) {

if (webView != null && webView.canGoBack()) {

webView.goBack();

}

return true;

} else {

return super.onKeyDown(keyCode, e);

}

@Override

protected void onResume() {

super.onResume();

if (webView != null) {

String url = webView.getUrl();

webView.loadUrl(url);

}

解説

先ずは利用するパッケージのインポートを追加します。
今回は、WebView 関連と、「戻る」ボタンのアクションを追加するため、 KeyEvent を追加しています。

 shortcode
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

次に、WebView の部品を覚えておくためのオブジェクトと、
最初にアクセスするウェブページの URL をクラス内定数・変数で定義します。

 shortcode
static final String URL = "https://www.google.co.jp/";
private WebView webView;

Android アプリが起動した際、最初に呼び出されるメソッドが onCreate になります。
WebView の初期化を行ってあげます。

 shortcode
// Web Viewの初期設定
webView = (WebView) findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClient());
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(URL);

残る onKeyDown と onResume はオマケです。参考までにどうぞ。

Android アプリの実行

では最後に、完成したアプリを実行してみましょう。

右上の Tool Bar にある「▶」のボタンを押すと、
仮想デバイスが起動して作成したアプリが実行されます。

Google の検索ページが表示されれば完成です。

トラブルシューティング

文字化けしたエラーが表示される

こちらの Qiita 記事を参考にどうぞ。
Build Output の文字化けを解消する方法です。

「～シンボルが見つかりません」というエラーが出る

必要なパッケージが読込めていない可能性があります。
import しているパッケージの一覧を、先のサンプルコードと比較してみてください。