Android
 Computer >> コンピューター >  >> プログラミング >> Android

Android WebViewでJavaScriptを使ってHTMLボタンのクリックを検出する方法

この記事では、AndroidアプリのWebViewに表示したHTMLページ内のボタンがクリックされたことを、JavaScriptインターフェースを介してネイティブ側で検出する方法を解説します。

WebView上のHTMLとAndroidアプリは、addJavascriptInterface()を使うことで相互に連携できます。HTML側のボタンクリックイベントをJava側のメソッドで受け取り、Toastでメッセージを表示するまでの流れを、手順を追って見ていきましょう。

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

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

ステップ2：res/layout/activity_main.xml にコードを追加する

レイアウトファイルに、Webページを読み込むためのボタンを配置します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_margin="16dp"
    tools:context=".MainActivity">

    <Button
        android:onClick="loadPage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Load web Page" />
</RelativeLayout>

ステップ3：assets/page.html を作成する

次に、assetsフォルダに表示用のHTMLファイル「page.html」を作成します。姓と名の入力欄を設け、JavaScriptの関数で両者を連結した文字列を組み立てます。ボタンがクリックされるとok.performClick()が呼び出され、入力値がネイティブ側へ渡されます。

<html>
   <body>
      First name: <input type="text" name="fname" id="txtfname"><br>
      Last name: <input type="text" name="lname" id="txtlname"><br>
      <script>
         function getValues() {
            document.getElementById("btnOK").value =
               document.getElementById("txtfname").value + " "
               + document.getElementById("txtlname").value;
         }
      </script>
      <button type="button" value="" id="btnOK"
         onclick="getValues();ok.performClick(this.value);"> OK </button>
   </body>
</html>

ステップ4：MainActivity.java にコードを追加する

アクティビティ側では、ボタンが押されたタイミングでWebViewがローカルのHTMLを読み込むようにします。ポイントはaddJavascriptInterface()です。ここで登録したオブジェクトのメソッドを、HTML側のJavaScriptから「ok」という名前で呼び出せるようになります。なお、APIレベル17以降では、JavaScriptから呼び出されるメソッドに@JavascriptInterfaceアノテーションを付ける必要がある点に注意してください。

package app.tutorialspoint.com.sample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

   public void loadPage(View view) {
      WebView browser = new WebView(this);
      browser.getSettings().setJavaScriptEnabled(true);
      browser.loadUrl("file:///android_asset/page.html");
      setContentView(browser);

      WebSettings ws = browser.getSettings();
      ws.setJavaScriptEnabled(true);

      browser.addJavascriptInterface(new Object() {
         @JavascriptInterface // API 17以降で必須
         public void performClick(String strl) {
            Toast.makeText(MainActivity.this, strl, Toast.LENGTH_SHORT).show();
         }
      }, "ok");
   }
}

ステップ5：AndroidManifest.xml にコードを追加する

マニフェストには、作成したMainActivityをランチャーアクティビティとして宣言します。このサンプルでは特別なパーミッションは不要です。

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

    <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端末をパソコンに接続した状態で、Android StudioのツールバーにあるRunアイコンをクリックし、接続した実機を選択して実行します。

まず「Load web Page」ボタンをタップするとWebViewが表示されます。姓名を入力して「OK」ボタンを押すと、入力した内容がそのままToastとして画面に表示されます。これにより、HTMLボタンのクリックイベントがJavaScriptインターフェース経由でネイティブ側に正しく伝わっていることが確認できます。

Android WebViewでJavaScriptを使ってHTMLボタンのクリックを検出する方法

補足：本記事のコードはサポートライブラリ時代の記述例です。最近のプロジェクトでは、android.support.v7.app.AppCompatActivityをandroidx.appcompat.app.AppCompatActivityに置き換えて利用してください。

  1. AndroidでHTMLを解析する方法！Jsoupを使った実装手順をステップごとに解説

    この記事では、AndroidアプリでHTMLを解析（パース）する方法を、人気のJavaライブラリ「Jsoup」を使ったサンプルコードとともに解説します。Webサイトのタイトルやリンク情報を取得して画面に表示するまでの一連の流れを、初心者にもわかるようにステップごとに紹介します。HTML解析にはJsoupが便利AndroidでHTMLを扱う場合、HTMLパーサーライブラリのJsoupを利用するのが定番です。Jsoupを使えば、URLからHTMLを取得し、CSSセレクタに近い直感的な記法で任意の要素を簡単に抽出できます。スクレイピングやWeb上のデータ取得処理を少ないコード量で実装できるのが大きな

  2. Androidスマートフォンかタブレットかを判定する方法【サンプルコード付き】

    この記事では、Androidアプリで使用中のデバイスが「Androidスマートフォン」か「Androidタブレット」かをプログラムで判定する方法を解説します。 判定の仕組み デバイスの種類を判定するには、TelephonyManagerクラスのgetPhoneType()メソッドを利用します。このメソッドはデバイスが持つ電話機能の種類を返却し、結果がTelephonyManager.PHONE_TYPE_NONE（電話機能なし）であればタブレット、それ以外であればスマートフォンであると判断できます。 実装手順 ステップ1：新規プロジェクトの作成 Android Studioで新しいプロジェクト