AndroidでWebViewを実装する方法を具体例つきで徹底解説

WebViewとは？基本をおさえておこう

WebViewの実装手順に入る前に、まず「WebViewとは何か」を簡単におさらいしましょう。WebViewはAndroidのViewクラスを拡張したウィジェットで、HTMLコンテンツやWebページをアプリ内に表示するために使用されます。ニュースアプリやショッピングアプリのように、Webコンテンツをそのまま埋め込みたいケースでよく活用される重要なコンポーネントです。

WebViewで利用できる主なメソッド

WebViewには、挙動を制御するためのさまざまなメソッドが用意されています。代表的なメソッドは以下の通りです。

• clearHistory() − WebViewの閲覧履歴を消去します。

• destroy() − WebViewの内部状態を破棄します。

• getUrl() − 現在表示中のURLを返します。

• getTitle() − 現在表示中のページのタイトルを返します。

• canGoBack() − 戻る履歴が存在するかどうかを判定します。

リンクをアプリ内で開くには

WebViewでリンクをタップすると、デフォルトでは端末の標準ブラウザが起動してしまいます。アプリ内でページ遷移を完結させたい場合は、以下のようにshouldOverrideUrlLoadingをオーバーライドした独自のWebViewClientを用意します。

private class MyWebViewClient extends WebViewClient {
   @Override
   public boolean shouldOverrideUrlLoading(WebView webView, String url) {
      return false;
   }
}

この例では、AndroidでWebViewを実装する具体的な手順を紹介します。

AndroidでWebViewを実装する手順

ステップ1：新規プロジェクトを作成する

Android Studioを起動し、メニューから「File → New Project」を選択します。必要な項目をすべて入力して、新しいプロジェクトを作成してください。

ステップ2：レイアウトファイルにWebViewを配置する

res/layout/activity_main.xmlに以下のコードを追加します。画面全体にWebViewを配置したシンプルな構成です。

<?xml version = "1.0" encoding = "utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
   xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent">

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

</androidx.constraintlayout.widget.ConstraintLayout>

ステップ3：MainActivityに処理を記述する

src/MainActivity.javaに以下のコードを追加します。

package com.example.andy.myapplication;

import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

   private WebView simpleWebView;

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

      simpleWebView = findViewById(R.id.webView);
      simpleWebView.setWebViewClient(new WebViewClient());
      simpleWebView.getSettings().setLoadsImagesAutomatically(true);
      simpleWebView.getSettings().setJavaScriptEnabled(true);
      simpleWebView.setScrollBarStyle(View.VISIBLE);
      simpleWebView.getSettings().setBuiltInZoomControls(true);
      simpleWebView.getSettings().setSupportZoom(true);
      simpleWebView.getSettings().setLoadWithOverviewMode(true);
      simpleWebView.getSettings().setUseWideViewPort(true);
      simpleWebView.getSettings().setAllowContentAccess(true);
      simpleWebView.loadUrl("https://www.tutorialspoint.com/");
   }

   @Override
   public void onBackPressed() {
      if (simpleWebView.canGoBack()) {
         simpleWebView.goBack();
      } else {
         super.onBackPressed();
      }
   }
}

上記のloadUrl()には、表示したい任意のWebサイトのURLを指定できます。また、バックキーを押した際にcanGoBack()で戻る履歴の有無を判定し、履歴があれば前のページへ戻る処理を実装している点にも注目してください。

ステップ4：インターネット権限を追加する

AndroidManifest.xmlに以下のコードを追加します。ネットワーク上のWebサイトを読み込むため、INTERNETパーミッションの宣言が必須です。

<?xml version = "1.0" encoding = "utf-8"?>
<manifest xmlns:android = "https://schemas.android.com/apk/res/android"
   package = "com.example.andy.myapplication">

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

   <application
      android:allowBackup = "true"
      android:icon = "@mipmap/ic_launcher"
      android:label = "@string/app_name"
      android:roundIcon = "@mipmap/ic_launcher_round"
      android:supportsRtl = "true"
      android:theme = "@style/AppTheme">

      <activity android:name = ".MainActivity">
         <intent-filter>
            <action android:name = "android.intent.action.MAIN" />
            <category android:name = "android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>

   </application>

</manifest>

ステップ5：文字列リソースを定義する

res/values/string.xmlに以下のコードを追加します。

<resources>
   <string name = "app_name">My Application</string>
   <string name = "erroopsproblem">Something error</string>
</resources>

アプリを実行して動作を確認する

それでは、実際にアプリをビルドして実行してみましょう。ここでは実機のAndroidスマートフォンをPCに接続しているものとして説明します。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーのRunアイコンをクリックしてください。デバイス選択画面で自分のスマートフォンを選ぶと、アプリがインストールされ、初期画面が表示されます。

次に、画面内のリンクをタップしてみましょう。たとえば上図のHTMLアイコンをタップすると、以下のようにページがアプリ内で切り替わります。

補足：AndroidXライブラリについて

本記事のコード例では、現在のAndroid開発で標準となっているAndroidXライブラリ（androidx.appcompat.app.AppCompatActivity、androidx.constraintlayout.widget.ConstraintLayout）を使用しています。旧来のandroid.support系ライブラリはすでに非推奨となっているため、新規プロジェクトではAndroidXを利用するようにしましょう。