新人成長記録20th

2017年3月28日
技術情報, Android

前回の記事では、WebViewがどのようなものかを学習しました
前回の終わりに書いたように、今回はWebViewとJavaScriptの連携について学習していきたいと思います

JavaScriptからAndroid

JavaScriptからAndroidのメソッドを実行する方法です

まずは、JavaScriptから実行したいメソッドを含んだクラスを作成します

public class JavaScriptInterface {
	private Context context;

	public JavaScriptInterface(Context context){
		this.context = context;
	}

	@JavascriptInterface
	public void showToast(String message){
		Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
	}
}

JavaScriptからは、showToastメソッドを実行します
Android4.2以降では、@JavascriptInterfaceのアノテーションを追加する必要があります
今回は、単純にhtml内のボタンを押したら、Toastが出るようにします

では、メインのクラスを作成します

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		webView = (WebView) findViewById(R.id.webview);
		webView.loadUrl(url);
		WebSettings settings = webView.getSettings();
		settings.setJavaScriptEnabled(true);

		webView.addJavascriptInterface(new JavaScriptInterface(this), "android");
	}

addJavascriptInterfaceメソッドの第1引数には、先ほど作成したクラスを渡します
第2引数には、JavaScriptからの呼び出しに使う時の文字列を渡します

最後に、htmlを作成していきます

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
 function showToast(message){
 android.showToast(message);
 }
</script>

<title>Insert title here</title>
</head>
<body>
<input type="button" value="Androidのトーストを表示"
 onclick="showToast('JavaScriptからAndroidのメソッドを実行')"/>
</body>
</html>

先ほどのメソッドに渡した文字列(“android”)とメソッド名(“showToast”)でAndroid内のメソッドを呼び出すことができます

AndroidからJavaScript

AndroidからJavaScriptを実行する方法です

まずは、実行したいJavaScriptを含んだhtmlを作成したいと思います

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
 function callJavaScript() {
 document.body.innerText = "JavaScript呼び出されました。";
 }
</script>

<title>Insert title here</title>
</head>
<body>
</body>
</html>

htmlのbodyに文字を記述するcalljavaScriptをAndroidから呼び出します
呼び出した際に、実行されたかどうか分かるようにします

次にAndroidから呼び出すためのクラスです

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		webView = (WebView) findViewById(R.id.webview);
		webView.loadUrl(url);
		WebSettings settings = webView.getSettings();
		settings.setJavaScriptEnabled(true);

		findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				String script = "callJavaScript()";
				if(webView != null) {
					webView.evaluateJavascript(script, null);
				}
			}
		});
	}

クリックを押したら実行するようにしました
JavaScriptの呼び出しはloadUrl(“javascript:” + script)でもできるのですが、4.4以降ではevaluateJavascriptを使用するように促されています