Androidにおいて、WebViewを使用することでWebページを参照することができます。
参照したWebページのJavaScriptを実行したい場合の手順を見ていきましょう。
WebViewからJavaScriptを使おう
デフォルトでは、Androidから外部のインターネットへは接続ができません。
まずは、インターネットにアクセスできるように設定を変えていきます。
マニフェストファイルに許可を追加する
<!-- インターネット接続したい場合に追記する-->
<uses-permission android:name="android.permission.INTERNET"/>
この一行を追加するだけで、インターネットへの接続を許可できます。
WebViewを配置する
// JavaScriptを有効にする
webView.settings.javaScriptEnabled = true
// JavaScriptとAndroidをバインドするためのインタフェース
webView.addJavascriptInterface(WebAppInterface(this),"WebAndroid")
// ローカルのHTMLファイルを読み込む
webView.loadUrl("file:///android_asset/assets/html/webViewTest.html")配置したWebViewがJavaScriptを使えるように、javaScriptEnabledで有効にします。
次に、バインドするためのインタフェースをWebViewに設定し、JavScriptが記載されたローカルのHTMLをロードします。
AndroidとJavaScriptをバインドするインタフェースの中身を見ていきましょう。
// JavaScript コードを Android コードにバインドするインタフェース
class WebAppInterface(private val mContext:Context ) {
// アノテーション
@JavascriptInterface
// トーストを実行する処理
fun showToast(toast: String) {
Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show()
}
}大事な点は4行目です。JavaScriptを使えるように付加情報を追記しないと動きません。処理としてはトーストを表示するだけの簡単なものです。
これでWebViewからJavaScriptを実行する準備が整いました。Javascriptの処理は下記になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>webViewTest</title>
<br>
<br>
<input type="button" value="トーストを表示する" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
/*Main_Activityで定義したインタフェースのshowToastメソッドを実行*/
function showAndroidToast(toast) {
WebAndroid.showToast(toast);
}
</script>
</head>
ボタンを押下した場合に、Androidで定義したトーストを表示する処理を呼び出しています。
これで、WebページにAndroidで定義した処理を実行することが出来ました。
Webページの下部に、トーストが表示されました。
ABOUT ME
