JavaScript から Android 側のメソッドを呼び出す #JavaScript

今回は単純に、WebView 内の JavaScript から Android のトーストを表示してみます。

まず、Android 側で、JavaSript ⇔ Android(Activity) 間のブリッジとなるクラスを新規に作成し、

hogeMethod メソッドが呼ばれたら、トーストを表示するようにします。

クラス名は安直に JavaScript としましたが、何でもいいです。

JavaScript.java

package com.example.hkusu.javascripttest;

import android.content.Context;
import android.widget.Toast;

public class JavaScript {
    private Context c;

    public JavaScript(Context c) {
        this.c = c;
    }

    public void hogeMethod(String s) {
        Toast toast = Toast.makeText(c, s, Toast.LENGTH_LONG);
        toast.show();
    }
}

Android 側の Activity で、WebView インスタンスを生成します。

MainActivity.java

package com.example.hkusu.javascripttest;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        WebView wv = new WebView(this);
        wv.getSettings().setJavaScriptEnabled(true);
        //wv.setWebViewClient(new WebViewClient());
        wv.addJavascriptInterface(new JavaScript(this), "android");
        setContentView(wv);
        wv.loadUrl("file:///android_asset/hoge.html");
    }
}

《WebView》.getSettings().setJavaScriptEnabled(true) で WebView 内で JavaScript 利用を有効化しています。
《WevView》.addJavascriptInterface(new JavaScript(this), "android") で先ほどの JavaScript クラスをアタッチしています。ここの android という文字列は任意の文字列で、JavaScript 側から見える『オブジェクト名』です。

次に HTML(JavaScript) を作成します。今回は、WebVeiw でロードする HTML は Android プロジェクトに内包することにします。(もし無ければ)Android プロジェクトの resディレクトリと同じ階層に assetsディレクトリを作成して hoge.html を設置し、

次のように書きます。

単純にボタンが押下されたら android.hogeMethod() をコールだけのものです。

hoge.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Toastを表示するテスト</title>
</head>
<body>
<button onClick="android.hogeMethod('ほげほげ')">Toastを表示</button>
</body>
</html>

※ もし外部のHTMLファイルを http:// でロードする場合は、AndroidManifest.xml でインターネットアクセスのパーミッションを設定しておく必要があります。

動かしてみる

ボタンを押すと..

トーストが表示されました。

おわりに

これを応用すれば、いろいろ出来そう。