SQLの窓

2017年11月18日


JavaScript から Android へアクセス

Android で、Google MAP を扱いたい場合、WebView 内で自分がホストしているページを扱うのがとても容易で便利です。しかし、そうした場合の一番の問題点は、WEBページと、Android とのデータのやり取りができないというところです。

しかし、Android 側の WebView の addJavascriptInterface メソッドでクラスを登録すると、そのクラスのメソッドが JavaScript から呼べるようになります。また、Android 側から JavaScript を呼び出す方法としても、WebView の loadUrl メソッドを使って loadUrl("javascript:コード") というように、ブックマークレットと同じ方法でアクセスできます。

Android の ドキュメントでは以下のようなコードが掲載されています( @JavascriptInterface に注意 / only public methods that are annotated with JavascriptInterface can be accessed from JavaScript )
class JsObject {
    @JavascriptInterface
    public String toString() { return "injectedObject"; }
 }
 webView.addJavascriptInterface(new JsObject(), "injectedObject");
 webView.loadData("", "text/html", null);
 webView.loadUrl("javascript:alert(injectedObject.toString())");
この例では、Android から Web ページの alert を呼び出して、その引数として Android 側のメソッドを与えています。結果的に、Android 側の "injectedObject" という文字列が、Webページ上の alert の結果として表示されます。
この内容は今もドキュメントにありますが、API level 19 から  evaluateJavascript が追加されています。こちらでは、JavaScript の戻り値を 非同期で UI スレッド上で得る事ができますので、こちらを使用したほうがいいでしょう。
以下はもう少し具体的なクラスを使った例、Webページ上のボタンで Android の intent を使用して画面遷移を行います。
package com.example.androidapp;

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

public class myWeb {
	Context mContext;

	myWeb(Context c) {
		mContext = c;
	}

	@JavascriptInterface
	public void showPostActivity(String message) {
		
		Intent intent = new Intent(mContext, PostActivity.class);
		intent.putExtra("message_text",message);
		
		// アクティビティの呼び出し
		mContext.startActivity(intent);
		
	}
}

このクラスを以下のようにして登録します
// ************************************************************
// WebView のイベントを処理する
// ************************************************************
webView = (WebView)findViewById(R.id.webView1);
webView.addJavascriptInterface(new myWeb(this), "MyWeb");
webView.setWebViewClient( new WebViewClient() {
		
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			Log.i("lightbox", url);
			return false;
		}

		// API level 24 以降ではこちら
		//public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
		//	Log.i("lightbox", url);
		//	return false;
		//}

	}
);		


最後にボタンで呼び出します( 緯度・経度を引き渡しています )
<input type="button" value="Android へアクセス" onclick="MyWeb.showPostActivity('-34.397, 150.644')">


関連する記事

WebView で JavaScript にデータを渡したい時に注意する事

Android で WebView を使ってWEBにあるデータベースのデータを取得する為のクラス



【Androidの最新記事】
posted by lightbox at 2017-11-18 14:00 | Android | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり