AndroidのWebViewでJavaScriptを有効にする方法をわかりやすく解説

Androidアプリ開発において、WebViewはアプリ内にWebページを表示できる便利なコンポーネントです。しかし、デフォルトの状態ではJavaScriptが無効になっているため、動的なWebサイトが正しく表示されないことがあります。この記事では、AndroidのWebViewでJavaScriptを有効にする具体的な手順を、サンプルコード付きで詳しく解説します。

全体の流れ

今回作成するサンプルアプリでは、WebViewを使ってGoogleのトップページ（google.com）を表示します。そのために必要な手順は以下の4ステップです。

1. Android Studioで新規プロジェクトを作成する
2. レイアウトファイル（activity_main.xml）にWebViewを配置する
3. MainActivity.javaでJavaScriptを有効化する
4. AndroidManifest.xmlにインターネット権限を追加する

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

まず、Android Studioを起動し、メニューから「File」→「New Project」を選択して新しいプロジェクトを作成します。プロジェクト名やパッケージ名など、必要な項目をすべて入力しましょう。テンプレートには「Empty Activity」を選択しておくとシンプルに始められます。

ステップ2：activity_main.xmlにWebViewを配置する

次に、res/layout/activity_main.xmlに以下のコードを記述します。

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:gravity = "center"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity"
   android:orientation = "vertical">
   <WebView
      android:id = "@+id/web_view"
      android:layout_width = "match_parent"
      android:layout_height = "match_parent" />
</LinearLayout>

このコードでは、画面いっぱいに表示されるWebViewを1つ配置しています。このWebViewを使ってGoogleのページを表示する仕組みです。

ステップ3：MainActivity.javaでJavaScriptを有効にする

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

package com.example.myapplication;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebView;
import android.widget.EditText;
public class MainActivity extends AppCompatActivity {
   @RequiresApi(api = Build.VERSION_CODES.P)
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      WebView web_view = findViewById(R.id.web_view);
      web_view.loadUrl("https://www.google.com/");
      web_view.requestFocus();
      web_view.getSettings().setLightTouchEnabled(true);
      web_view.getSettings().setJavaScriptEnabled(true);
   }
}

ここで最も重要なのが次の行です。

web_view.getSettings().setJavaScriptEnabled(true);

getSettings()でWebViewの設定オブジェクトを取得し、setJavaScriptEnabled(true)を呼び出すことでJavaScriptが有効になります。これにより、JavaScriptを使用するWebページも正しく動作するようになります。また、loadUrl()メソッドで表示したいURLを指定しています。

ステップ4：AndroidManifest.xmlに権限を追加する

外部のWebサイトを読み込むためには、インターネットへのアクセス許可が必要です。AndroidManifest.xmlに以下のコードを記述してください。

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

ポイントは<uses-permission android:name = "android.permission.INTERNET"/>の部分です。この権限宣言がないと、実機やエミュレータ上でネットワークエラーが発生し、ページが表示されませんので注意してください。

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

それでは、実際にアプリを実行してみましょう。Android端末をPCに接続している場合は、Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。デバイス選択画面で自分のスマートフォンを選択すると、端末にアプリがインストールされ、起動時にGoogleのホーム画面が表示されます。

まとめ

AndroidのWebViewでJavaScriptを有効にするには、WebSettings.setJavaScriptEnabled(true)を呼び出すだけでOKです。加えて、外部サイトを表示する場合はINTERNET権限の付与を忘れないようにしましょう。この基本を押さえておけば、ハイブリッドアプリやアプリ内ブラウザ機能の開発にもスムーズに応用できます。