【Android】WebView の JavaScript からネイティブコードを呼び出す
今回は、WebView の JavaScript からネイティブコードを呼び出す方法を解説します。
なお、ここに掲載しているソースコードは以下の環境で動作確認しています。
- Android Studio Bumblebee | 2021.1.1 Patch 3
- JDK 11.0.11
- Android Gradle Plugin 7.1.3
- Kotlin 1.6.21
- Gradle 7.4.2
JavaScript からネイティブコードを呼び出すまでの流れ
WebView の JavaScript からネイティブコードを呼び出すには、以下を行う必要があります。
- JavaScript とネイティブコードをつなぐインターフェースを作成する
- JavaScript とネイティブコードのインターフェースを WebView に追加する
- 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 タグに表示します。