Home > android > AndroidとJavaScriptを連携させる方法

AndroidとJavaScriptを連携させる方法

2007-12-11 0:38
android

AndroidのブラウザはWebKitなのでもちろんJavaScriptも利用できます。
しかも、JavaScriptからAndroidのメソッドも呼び出す事ができます。
では早速サンプルをどうぞ。

何を作るか

JSからAndroidのGPSデータを取得します。

まずはWebKitの準備

WebKitを準備します。WebKitでJavaScriptを実行する許可も与えておきます。

public void onCreate(Bundle icicle) {
  super.onCreate(icicle);
  WebView wv = new WebView(this);
  wv.getSettings().setJavaScriptEnabled(true);//JS利用OK
  setContentView(wv);
}

JSとAndroidをブリッジする

ではWebKitにJSから利用できるAndroidのオブジェクトを登録します。

JsObj jo = new JsObj(this);
wv.addJavascriptInterface(jo, "roid");

これでAndroidでのJsObjオブジェクトはJSではroidというオブジェクトとして利用できるようになりました。

JSオブジェクトを定義する

JsObjを定義します。
今回はJSからAndroidのGPSデータを取得するのが目的なので、GPS取得メソッドを定義します。

class JsObj {
  private Context con;
 
  public JsObj(Context con) {
    this.con = con;
  }
 
  public String gps(String top, String end) {
    LocationManager locman = (LocationManager) 
         con.getSystemService(Context.LOCATION_SERVICE);
    Location loc = locman.getCurrentLocation("gps");
    int lat = (int) (loc.getLatitude() * 1000000);
    int lon = (int) (loc.getLongitude() * 1000000);
    return top + "緯度:" + lat + ", 経度: " + lon + end;
  }
}

JSから呼び出せるのはpublicのメソッドだけです。privateメソッドを呼び出すとエラーになりますのでご注意。AndroidでGPSデータを取得する方法は以前のエントリをご参考ください。

ウェブページを読み込む

ウェブページを読み込みます。このページ内にJavaScriptを仕込んでおき、そこからAndroidのオブジェクトを利用します。

wv.loadUrl("http://www.adamrocker.com/android/js2android.html");

読み込むページはこのようになっています。

<html>
  <head><title>JS calls Android Method</title></head>
  <body>
    <h1>JS on Android</h1>
    <script type="text/javascript">
      document.write(roid.gps("<i>", "</i>"));
    </script>
  </body>
</html>

roid.gps(…);というメソッドがAndroidではJsObjクラスのgpsメソッドです。実際取得してみるとこのようになります。

うまくAndroidのGPSデータが取得できました。

おわりに

AndroidとJavaScriptのブリッジについて簡単に纏めました。今までASとJSのブリッジとかWidgetとJSのブリッジとかやってきましたが、どれも似たような形式を取るようですね。理解しやすかったです。
ちなみに、WebKitを利用してGoogle Mapsを表示した場合とMapViewでGoogle Mapsを表示した場合では前者の方が10MBほど消費メモリが多かったです。パフォーマンスモニタの数値を眺めただけのテキトーな計測ですが…。Macで正しく測定する方法をご存知の方がいましたら教えて下さい。

ソースコード

せっかくなのでコードを晒します。

package com.adamrocker.android.web;
 
import android.app.Activity;
import android.content.Context;
import android.location.Location;
import android.location.LocationManager;
import android.os.Bundle;
import android.webkit.WebView;
 
public class WebkitTest extends Activity {
  /** Called when the activity is first created. */
  @Override
   public void onCreate(Bundle icicle) {
      super.onCreate(icicle);
      WebView wv = new WebView(this);
      wv.getSettings().setJavaScriptEnabled(true);
      JsObj jo = new JsObj(this);
      wv.addJavascriptInterface(jo, "roid");
      setContentView(wv);
      wv.loadUrl("http://www.adamrocker.com/android/js2android.html");
  }
 
   class JsObj {
      private Context con;
 
      public JsObj(Context con) {
         this.con = con;
      }
 
      public String gps(String top, String end) {
         LocationManager locman = (LocationManager) con
              .getSystemService(Context.LOCATION_SERVICE);
         Location loc = locman.getCurrentLocation("gps");
         int lat = (int) (loc.getLatitude() * 1000000);
         int lon = (int) (loc.getLongitude() * 1000000);
         return top + "緯度:" + lat + ", 経度: " + lon + end;
      }
  }
}

Comments:0

Trackbacks:0

Trackback URL for this entry: http://www.adamrocker.com/blog/172/javascript_android_bridge.html/trackback/
Listed below are links to weblogs that reference: AndroidとJavaScriptを連携させる方法 from throw Life

Home > android > AndroidとJavaScriptを連携させる方法

Pages

Recent Entries

Categories

Archives

Search

Feeds

Meta

Return to page top