はじめに (対象読者・この記事でわかること)

この記事は、Androidアプリ開発でWebViewを利用し、JavaScriptコードと連携したい開発者を対象にしています。特に、Android側からWebView内のJavaScript関数を呼び出す技術に焦点を当てて解説します。この記事を読むことで、WebViewとJavaScriptブリッジの基本的な実装方法から、エラーハンドリング、双方向通信の実装まで理解できるようになります。Androidアプリ内でWebコンテンツを活用する際に必要となる知識を、具体的なコード例とともに習得できます。また、実際の開発で遭遇するかもしれない問題点とその解決策も紹介します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - Androidアプリ開発の基本的な知識（JavaまたはKotlin） - HTML/CSS/JavaScriptの基本的な知識 - Android Studioの基本的な操作

WebViewとJavaScript連携の基本概念

Androidアプリ開発において、WebViewはWebコンテンツをアプリ内に表示するための重要なコンポーネントです。WebViewを利用することで、ネイティブアプリとWeb技術を組み合わせたハイブリッドアプリを開発できます。

JavaScript連携は、WebViewの最も強力な機能の一つです。Android側からJavaScript関数を呼び出すことで、アプリのネイティブ機能をWebコンテンツから利用させることができます。逆に、JavaScriptからAndroidのネイティブメソッドを呼び出すことも可能です。この双方向通信を実現するための仕組みを「JavaScriptブリッジ」と呼びます。

この技術を活用することで、Web技術の柔軟性とネイティブアプリのパフォーマンスを両立させたアプリケーションを開発できます。特に、頻繁に更新されるコンテンツや、UIの一部をWebで実装したい場合に有効です。

AndroidからJavaScriptメソッドを呼び出す具体的な実装方法

実際にAndroidアプリからWebView内のJavaScriptメソッドを呼び出す方法を、JavaとKotlinの両方の言語を使って解説します。

WebViewの設定

まず、AndroidアプリにWebViewを追加し、JavaScriptを有効にする必要があります。

Javaの場合:

Java

WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true); // JavaScriptを有効化

Kotlinの場合:

Kotlin

val webView = findViewById<WebView>(R.id.webview)
val webSettings = webView.settings
webSettings.javaScriptEnabled = true // JavaScriptを有効化

JavaScriptインターフェースの設定

Android側からJavaScriptにデータを渡したり、JavaScriptの関数を呼び出したりするには、JavaScriptインターフェースを設定する必要があります。

Javaの場合:

Java

public class WebAppInterface {
    Context mContext;

    /** コンストラクタ */
    public WebAppInterface(Context c) {
        mContext = c;
    }

    /** JavaScriptから呼び出されるメソッド */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

// WebViewにJavaScriptインターフェースを設定
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

Kotlinの場合:

Kotlin

class WebAppInterface(private val context: Context) {
    /** JavaScriptから呼び出されるメソッド */
    @JavascriptInterface
    fun showToast(toast: String) {
        Toast.makeText(context, toast, Toast.LENGTH_SHORT).show()
    }
}

// WebViewにJavaScriptインターフェースを設定
webView.addJavascriptInterface(WebAppInterface(this), "Android")

JavaScriptからAndroidメソッドを呼び出す

WebViewにJavaScriptインターフェースを設定した後は、JavaScript側からAndroidのメソッドを呼び出すことができます。

HTMLファイル内のJavaScriptコード:

Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Bridge Sample</title>
</head>
<body>
    <h1>Android-JavaScript Bridge Sample</h1>
    <button onclick="callAndroidToast()">AndroidのToastを表示</button>

    <script>
        function callAndroidToast() {
            // Android側のshowToastメソッドを呼び出す
            Android.showToast("こんにちは、Androidから！")
        }
    </script>
</body>
</html>

AndroidからJavaScriptメソッドを呼び出す

次に、Android側からWebView内のJavaScriptメソッドを呼び出す方法を解説します。

Javaの場合:

Java

// HTMLファイルの読み込み
webView.loadUrl("file:///android_asset/index.html");

// JavaScriptメソッドの呼び出し
webView.post(new Runnable() {
    @Override
    public void run() {
        webView.evaluateJavascript("javascript:showMessage('Androidからこんにちは')", null);
    }
});

Kotlinの場合:

Kotlin

// HTMLファイルの読み込み
webView.loadUrl("file:///android_asset/index.html");

// JavaScriptメソッドの呼び出し
webView.post {
    webView.evaluateJavascript("javascript:showMessage('Androidからこんにちは')", null)
}

HTMLファイル側で定義されているJavaScript関数:

Javascript

function showMessage(message) {
    alert(message);
}

パラメータの受け渡し

AndroidとJavaScript間でデータをやり取りする際は、基本的なデータ型（String, int, booleanなど）を利用できます。複雑なデータをやり取りする場合は、JSON形式でシリアライズして渡すのが一般的です。

JavaからJavaScriptへJSONデータを渡す:

Java

// JSONObjectを使用してJSONデータを作成
try {
    JSONObject jsonData = new JSONObject();
    jsonData.put("name", "山田太郎");
    jsonData.put("age", 30);
    jsonData.put("isStudent", false);

    // JSONデータを文字列に変換してJavaScriptに渡す
    webView.evaluateJavascript("javascript:receiveData(" + jsonData.toString() + ")", null);
} catch (JSONException e) {
    e.printStackTrace();
}

JavaScriptでJSONデータを受け取る:

Javascript

function receiveData(data) {
    console.log("名前: " + data.name);
    console.log("年齢: " + data.age);
    console.log("学生: " + data.isStudent);
}

非同期処理とコールバック

AndroidからJavaScriptに処理を依頼し、結果を受け取る必要がある場合は、コールバックパターンを利用します。

Java側:

Java

// JavaScriptに処理を依頼し、結果を受け取るリスナーを設定
webView.evaluateJavascript("javascript:processData('sample data', function(result) { returnResult(result) });", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String result) {
        // JavaScriptから返された結果を処理
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "結果: " + result, Toast.LENGTH_SHORT).show();
            }
        });
    }
});

// JavaScriptから結果を受け取るための関数
@JavascriptInterface
public void returnResult(String result) {
    // このメソッドはJavaScriptから直接呼び出されるのではなく、
    // WebView.evaluateJavascript内で処理される
}

HTML/JavaScript側:

Javascript

function processData(data, callback) {
    // データを処理
    setTimeout(function() {
        // 処理結果をコールバック関数に渡す
        callback("処理完了: " + data);
    }, 2000);
}

実装上の注意点とトラブルシューティング

セキュリティの考慮事項

JavaScript連携を実装する上で最も重要なのはセキュリティです。特に、ユーザーが入力したデータをそのままJavaScriptに渡すと、XSS（クロスサイトスクリプティング）攻撃のリスクがあります。

対策として、以下の点に注意してください： 1. ユーザー入力をJavaScriptに渡す前に必ずエスケープ処理を行う 2. @JavascriptInterfaceアノテーションを付与したメソッドは、悪意のあるコードからも呼び出し可能になるため、公開するメソッドは最小限に抑える 3. 信頼できないWebサイトをWebViewに表示しない

エラーハンドリング

WebViewやJavaScriptブリッジの操作では、様々なエラーが発生する可能性があります。

WebViewのエラーハンドリング:

Java

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        // エラーページの表示
        webView.loadUrl("file:///android_asset/error.html");
    }
});

JavaScript例外のキャッチ:

Java

webView.evaluateJavascript("javascript:someFunction()", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        if (value == null) {
            // JavaScriptの例外が発生した場合
            Log.e("WebView", "JavaScript exception occurred");
        }
    }
});

パフォーマンスの最適化

WebViewとJavaScriptの連携では、頻繁なデータやり取りがパフォーマンスのボトルネックになることがあります。

最適化のためのヒント： 1. 大量のデータを一度にやり取りするのではなく、分割して送受信する 2. WebViewのレンダリングモードをハードウェアアクセラレーションに設定する 3. 不要なWebViewのインスタンスは適切に破棄する

Android 4.2以降のセキュリティ強化

Android 4.2以降では、JavaScriptインターフェースのセキュリティが強化され、@JavascriptInterfaceアノテーションが必須になりました。このアノテーションがないメソッドは、JavaScriptから呼び出すことができません。

まとめ

本記事では、AndroidアプリからWebView内のJavaScriptメソッドを呼び出す方法について解説しました。WebViewとJavaScriptブリッジを活用することで、ネイティブアプリとWeb技術を組み合わせたハイブリッドアプリを開発できます。

  • WebViewでJavaScriptを有効にし、JavaScriptインターフェースを設定することで双方向通信を実現
  • AndroidからJavaScriptメソッドを呼び出すにはevaluateJavascriptメソッドを使用
  • データやり取りではJSON形式を利用し、セキュリティには十分注意

この技術を活用することで、アプリ開発の選択肢が広がり、より柔軟でユーザーフレンドリーなアプリケーションを開発できるようになります。今後は、JavaScriptからAndroidのネイティブ機能をより高度に利用する方法についても記事にする予定です。

参考資料