Androidアプリ開発において、アプリに組み込んだwebview内のjavascriptとアプリとの間で相互に処理を呼び出す方法やデータを交換するための方法を紹介します。OpenStreetMapなどブラウザを使う必要のあるサービスをアプリから利用する場合などに活用できる方法になります。

1. Webviewでjavascriptを実行するのに必要な設定

まずは下準備としてWebviewでjavascriptを実行するための設定を行います。

AndroidManifest.xmlに許可を追加する

インターネットアクセスするためマニフェストに以下の許可が必要になります

＜uses-permission android:name="android.permission.INTERNET"＞

webviewでjavascriptを有効にする

webviewで下記のようにjavascriptを有効にする必要があります。

//webviewのviewを取得
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
Webview webView = (WebView) rootView.findViewById(R.id.webView);
//javascriptを有効にする
webView.getSettings().setJavaScriptEnabled(true);

2. Webviewのjavascriptからアプリの処理を呼び出す方法

Webviewのjavascriptからアプリの処理を呼び出す方法について紹介します。流れとしては、Webviewにアプリ側のクラスを登録して、javascriptから登録したクラスを呼び出すといった感じになります。この時、クラスにはアノテーションを設定する必要があります。

webviewにjavascriptから呼び出すアプリのクラスインスタンスを設定する

javascriptから呼び出したいクラスのインスタンスを作りwebviewに設定します。この時、javascriptから呼び出すメソッドにはアノテーションを付ける必要があります。

// インスタンスを作る
SampleClass sampleClass = new SampleClass();
// webviewにインスタンスを登録。第二引数で指定した文字列でjavascriptからアクセスできる
webView.addJavascriptInterface(sampleClass, "sampleClass");
...
// クラスの定義
public class SampleClass{
  private double a;
  @JavascriptInterface //呼び出すメソッドにこの指定が必要
  public double getA() {
    return this.a;
  }
}

javascriptからインスタンスのメソッドを呼び出す

addJavascriptInterfaceの第二引数で指定した文字列を使って、以下のようにメソッドを呼び出すことができます。

引数にjavascript側の情報を渡すようにすればアプリ側に情報を連携することもできます。

var a = sampleClass.getA();

3. アプリ側からjavascriptのコードを呼び出す方法

webviewのloadUrlに「javascript:xxx」の形でURLを渡すことで、javascriptのメソッドを呼び出すことができます。

//javascript上のsampleFunctionを呼び出す
webView.loadUrl("javascript:sampleFunction();");

その他注意点

javascript側のコードを修正してwebviewから再度loadUrlで読み直した場合、古いjavascriptファイルがwebviewにキャッシュされていおり修正が反映されないことがあます。

そのため、デバックや開発の最中には「webView.clearCache(true);」を呼び出して都度キャッシュをクリアすることをお勧めします。