AndroidのWebViewでonClickイベント（タップ）を取得する方法を徹底解説

この記事では、AndroidアプリのWebView上でのクリック（タップ）イベントを取得する方法を、実際のサンプルコードとともにステップ形式で解説します。WebViewは通常のViewとは異なり、直接OnClickListenerが設定できないため、HandlerとOnTouchListenerを組み合わせるのが定番のテクニックです。

実装のポイント

WebView内のURLリンクがタップされたのか、それともWebView自体がタップされたのかを判別するために、以下の仕組みを使用します。

• OnTouchListener：WebViewへのタッチ操作を検出し、遅延メッセージを送信
• WebViewClient.shouldOverrideUrlLoading()：リンククリックを検出してメッセージをキャンセル
• Handler：どちらのクリックなのかを判定して処理を振り分け

手順1：新規プロジェクトを作成する

Android Studioを開き、「File」→「New Project」を選択して、必要な情報を入力して新しいプロジェクトを作成します。

手順2：レイアウトファイル（activity_main.xml）を編集する

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>

画面いっぱいにWebViewを配置するシンプルなレイアウトです。

手順3：MainActivity.javaを実装する

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

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnTouchListener,
Handler.Callback {
    private static final int CLICK_ON_WEBVIEW = 1;
    private static final int CLICK_ON_URL = 2;
    private final Handler handler = new Handler(this);
    WebView webView;
    WebViewClient client;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        webView.setOnTouchListener(this);
        client = new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                handler.sendEmptyMessage(CLICK_ON_URL);
                return false;
            }
        };
        webView.setWebViewClient(client);
        webView.setVerticalScrollBarEnabled(false);
        webView.loadUrl("https://www.google.com");
    }
    @Override
    public boolean handleMessage(Message msg) {
        if (msg.what == CLICK_ON_URL) {
            handler.removeMessages(CLICK_ON_WEBVIEW);
            return true;
        }
        if (msg.what == CLICK_ON_WEBVIEW) {
            Toast.makeText(this, "WebView clicked", Toast.LENGTH_SHORT).show();
            return true;
        }
        return false;
    }
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (v.getId() == R.id.webView && event.getAction() == MotionEvent.ACTION_DOWN) {
            handler.sendEmptyMessageDelayed(CLICK_ON_WEBVIEW, 500);
        }
        return false;
    }
}

コードの解説：

• タッチされた瞬間（ACTION_DOWN）に、500ミリ秒の遅延を持つメッセージ「CLICK_ON_WEBVIEW」を送信します。
• その間にリンクがクリックされると shouldOverrideUrlLoading() が呼ばれ、「CLICK_ON_URL」メッセージが送信されて、先ほどの遅延メッセージがキャンセルされます。
• 結果として、リンク以外の場所をタップした場合のみ「WebView clicked」というToastが表示されます。

手順4：AndroidManifest.xmlに権限を追加する

インターネットに接続するため、androidManifest.xml にインターネット権限を追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    <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>

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

それではアプリを実行してみましょう。Android端末をPCに接続していることを前提としています。Android Studioからプロジェクトのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックしてください。実行デバイスとして自分のモバイル端末を選択すると、端末にデフォルト画面が表示されます。

WebView上の空きスペースをタップすると「WebView clicked」というトーストが表示され、リンクをタップした場合は通常通りページが読み込まれます。これで、WebView上のクリックイベントを正しく判別できるようになりました。