Smile Engineering Blog

ジェイエスピーからTipsや技術特集、プロジェクト物語を発信します

【Android】WebView の JavaScript からネイティブコードを呼び出す

今回は、WebView の JavaScript からネイティブコードを呼び出す方法を解説します。

なお、ここに掲載しているソースコードは以下の環境で動作確認しています。

JavaScript からネイティブコードを呼び出すまでの流れ

WebView の JavaScript からネイティブコードを呼び出すには、以下を行う必要があります。

  1. JavaScript とネイティブコードをつなぐインターフェースを作成する
  2. JavaScript とネイティブコードのインターフェースを WebView に追加する
  3. WebView の JavaScript を有効にする

今回は、WebView に表示する Web ページにボタンを用意し、そのボタンを押すと、Android ネイティブの Toast を表示するようにします。また、ネイティブコードは JavaScript に対して戻り値を返すようにし、JavaScript はその戻り値を Web ページに表示するようにします。

JavaScript とネイティブコードをつなぐインターフェースを作成する

まず、JavaScript とネイティブコードをつなぐインターフェースを作成します。

class WebAppInterface(private val context: Context) {

    @JavascriptInterface
    fun showMessage(message: String): String {
        Toast.makeText(context, message, Toast.LENGTH_LONG).show()
        return message
    }
}

インターフェースには、JavaScript から呼び出すネイティブコードをメソッドとして作成します。このメソッドには、@JavascriptInterface を付与し、public にする必要があります。

今回作成するメソッドでは、JavaScript から文字列を受け取るようにし、その文字列を Toast に表示します。また、受け取った文字列をそのまま戻り値として呼び出し元に返します。

WebView の設定

次に、WebView にさきほど作成したインターフェースを追加し、JavaScript を有効にします。

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WebView(this).apply {
            setContentView(this)
            loadUrl("file:///android_asset/index.htm")
            val webAppInterface = WebAppInterface(this@MainActivity)
            addJavascriptInterface(webAppInterface, "Android")

            settings.apply {
                allowFileAccess = true
                javaScriptEnabled = true
            }
        }
    }
}

まず、以下のように WebView にさきほど作成したインターフェースを追加します。

WebView#addJavascriptInterface の第 1 引数にインターフェースのインスタントを渡します。そして、第 2 引数には、JavaScript から呼び出す際の名前を指定します。例えば、この名前に "Android" を指定した場合、JavaScript から呼び出す際は Android.showMessage() となります。

        WebView(this).apply {
            ︙
            val webAppInterface = WebAppInterface(this@MainActivity)
            addJavascriptInterface(webAppInterface, "Android")
            ︙

そして、WebView の JavaScript を有効にします。デフォルトでは JavaScript は無効になっているので、有効にする必要があります。

        WebView(this).apply {
            ︙
            settings.apply {
                ︙
                javaScriptEnabled = true
            }
        }

以上で、ネイティブの実装は完了です。これで、JavaScript からネイティブコードを呼び出すことができるようになります。

JavaScript からネイティブコードを呼び出す

JavaScript からネイティブコードを呼び出してみます。Web ページの HTML を以下のようにします。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script type="text/javascript">
            function showMessage(message) {
                const result = Android.showMessage(message);
                document.getElementById("text").innerHTML = result;
            }
        </script>
        <input type="button" value="Button"
               onClick="showMessage('Hello Android!');" />
        <p id="text"></p>
    </body>
</html>

ボタンが押されたら、JavaScript とネイティブコードのインターフェースの showMessage メソッドを呼びます。この呼び出しにより、Android ネイティブの Toast が表示されます。また、showMessage メソッドの戻り値を p タグに表示します。

参考

WebView での JavaScript の使用