Android関連 > WebView内のjavaScriptからネイティブのメソッドを呼び出す(Android)

WebView内のjavaScriptからネイティブのメソッドを呼び出す(Android)

Activity側でWebViewの設定を行う

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {

		・
		・
		WebView webview = (WebView) findViewById(R.id.webView1);

		// webviewでのjavascript使用を可能にする
		webview.getSettings().setJavaScriptEnabled(true);

		// ここで指定した名前で呼び出す事が出来る
		webview.addJavascriptInterface(new MainJsInterface(this), "Android");

		・
	} 
} 

javaScript から呼び出す処理の記述

public class MainJsInterface {
    Activity activity;

    // 引数から activity への参照を得ていた方が都合が良い?
    MainJsInterface(Activity a){
        activity = a;
    }

    /**
     * Toastを表示する。
     */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(activity, toast, Toast.LENGTH_SHORT).show();
    }

    /**
     * 引数から得た2つの数値を加算したものを返却する。
     * @param num1 数値1
     * @param num2 数値2
     * @return 結果
     */
    @JavascriptInterface
    public int sum(int num1, int num2) {
        return num1 + num2;
    }

    /**
     * 引数から数値の配列を取得するサンプル。
     * @param numAll 数値配列
     * @return メッセージ
     */
    @JavascriptInterface
    public String numListArg(int[] numAll){
        Log.d("DEBUG", "numListArg!");
        String result = "";
        String delimit = "";
        for (int num : numAll) {
            result += delimit + num;
            delimit = "と";
        }
        return result + "を受け取りました";
    }

    /**
     * 引数から文字列の配列を取得するサンプル。
     * @param strAll 数値配列
     * @return メッセージ
     */
    @JavascriptInterface
    public String strListArgs(String[] strAll){
        Log.d("DEBUG", "numListArg!");
        String result = "";
        String delimit = "";
        for (String str : strAll) {
            result += delimit + str;
            delimit = "と";
        }
        return result + "を受け取りました";
    }

    /**
     * 引数からJSONを取得するサンプル。
     * @param args JSON文字列
     * @return メッセージ
     */
    @JavascriptInterface
    public String mapArg(String args){
        Log.d("DEBUG", "mapArgs!");
        String result = "";
        try {
            if (args == null) {
                result = "NULLを受け取りました";
            } else {
                // Mapの受け渡しが出来ない為、JSON文字列として取得する
                JSONObject json = new JSONObject(args);
                java.util.Iterator it = json.keys();
                while (it.hasNext()) {
                    String key = (String)it.next();
                    Object obj = json.get(key);
                    String type = obj.getClass().getSimpleName();
                    result += key + "として" + obj + "(" + type + ")を受け取りました<br />";
                }
            }
        } catch (Exception e){
            e.printStackTrace();
        }
        return result;
    }

    /**
     * 戻り値として List を返却するサンプル。
     * @return JSON文字列
     */
    @JavascriptInterface
    public String resultList(){
        Log.d("DEBUG", "resultList!");
        List list = new java.util.ArrayList();
        list.add("A");
        list.add("B");
        list.add("C");
        // List はそのまま返却できない為、JSON文字列として返却する。
        JSONArray jsonList = new JSONArray(list);
        return jsonList.toString();
    }

    /**
     * 戻り値として Map を返却するサンプル。
     * @return JSON文字列
     */
    @JavascriptInterface
    public String resultMap(){
        Log.d("DEBUG", "resultMap!");
        Map map = new java.util.HashMap();
        map.put("A", "111");
        map.put("B", "222");
        // Map はそのまま返却できない為、JSON文字列として返却する。
        JSONObject jsonMap = new JSONObject(map);
        return jsonMap.toString();
    } 
} 

HTML側の記述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./jquery.js"></script>
<script type="text/javascript">
$(function(){

    $(document).on("click", "#showToastBtn", function(){
        console.log("showToastBtn!");
        if (Android.showToast){
            Android.showToast("TEST2");
        }
    });

    // Android側の 数値加算メソッドを呼び出す
    $(document).on("click", "#callSum", function(){
        var result = Android.sum(1,2);
        $("#result").text(result);
    });

    // Android側の関数に数値配列を受け渡すサンプル
    $(document).on("click", "#callNumListArg", function(){
        var args = { "param1" : "A", "list" : [1,2,3]};
        var result = Android.numListArg([1,2,3]);
        $("#result").text(result);
    });

    // Android側の関数に文字列配列を受け渡すサンプル
    $(document).on("click", "#callStrListArgs", function(){
        var args = { "param1" : "A", "list" : [1,2,3]};
        var result = Android.strListArgs(["A","B","C"]);
        $("#result").text(result);
    });

    // Android側の関数にJSONを受け渡すサンプル
    $(document).on("click", "#callMapArg", function(){
        var args = { "param1" : "A", "list" : [1,2,3], "list2" : [1,"B",3]};
        var result = Android.mapArg(JSON.stringify(args));  // 文字列に変換して受け渡す
        $("#result").html(result);
    });

    // Android側から List を受け取るサンプル
    $(document).on("click", "#callResultList", function(){
        var result = Android.resultList();
        var list = JSON.parse(result);  // 文字列として受け取った結果をJSONに変換する
        var resultInfo = "";
        for (var i in list) {
            resultInfo = resultInfo + (parseInt(i,10)+1) + "行目 = " + list[i] + "<br />";
        }
        $("#result").html(resultInfo);
    });

    // Android側から Map を受け取るサンプル
    $(document).on("click", "#callResultMap", function(){
        var result = Android.resultMap();
        var map = JSON.parse(result);  // 文字列として受け取った結果をJSONに変換する
        var resultInfo = "";
        for (var k in map) {
            resultInfo = resultInfo + k + "は" + map[k] + "<br />";
        }
        $("#result").html(resultInfo);
    });
});
</script>
</head>
<body>

    <input id="showToastBtn" type="button" value="Show Toast" />
    <br />
    <input id="callSum" type="button" value="callSum" />
    <br />
    <input id="callNumListArg" type="button" value="callNumListArg"/>
    <br />
    <input id="callStrListArgs" type="button" value="callStrListArgs"/>
    <br />
    <input id="callMapArg" type="button" value="callMapArg" />
    <br />
    <input id="callResultList" type="button" value="callResultList" />
    <br />
    <input id="callResultMap" type="button" value="callResultMap" />
    <hr />
    <div id="result"></div>

</body>
</html>

JavaScript から Android 側に受け渡せるデータ型

文字列、数値 および その配列が受け渡し可能。
JSONはそのまま受け渡す事ができない為、javascript側は JSON.stringify や JSON.parse を、
Android側は JSONObject や JSONArray を使用して文字列として受け渡す必要がある。
また、配列は引数(JavaScript → Android)としては使用可能だが、戻り値(Android → JavaScript)としては不可。

データ型Android(Java)側のデータ型
StringString
Numberint
String[]String[]
Number[]int[]

※double型で浮動小数点も受け渡し可能。


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-09-21 (月) 12:03:22 (2058d)