- 2007-12-25 (火)
- Android
JavaScript ブリッジを使って、 Android のオブジェクトをリモート側で操作してみましたのでまとめ。
WebKit とは、Android 上で 動作する Webブラウザです。
これを使ってリモートサイトの HTML を表示し、Android 側のコンタクトリストを 表示させてみます。
WebKit を使うには、WebView を layout/main.xml に定義します。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World, WebKitTest"
/>
<WebView
id="@+id/web"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
onCreate で、WebView に対して 読み込む URL を指定します。
wv.addJavascriptInterface(user, "user");
で、後ほど出てくる UserObj クラスのインスタンスを サーバ側の JavaScript で操作できるようにしています。
JavaScript では、user という変数名で参照できます。
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
// レイアウト用の xml を設定
setContentView(R.layout.main);
// バインド用の xml ファイルを設定
UserObj user = new UserObj();
// WebKitのViewを取得
WebView wv = (WebView) findViewById(R.id.web);
// ブリッジ設定
wv.addJavascriptInterface(user, "user");
// JavaScript の利用を許可
wv.getSettings().setJavaScriptEnabled(true);
// 最初のページを表示
wv.loadUrl("http://www.plants-web.jp/android/index.html");
}
UserObj クラスは、自分のUserID を返却する getUserId() というメソッドと、コンタクトリスト内の文字列を配列で返す getContactList() というメソッドが定義されています。
コンタクトリスト内のデータを取得する方法は省略しますが、以前のエントリを参考にしてください。
/**
* ユーザの情報をサーバ側へ渡すためのブリッジクラス
* @author hal
*
*/
class UserObj{
/**
* ユーザIDを返却する
* @return ユーザID
*/
public String getUserId(){
return "useridA";
}
/**
* コンタクトリストを返却する
* @return コンタクトリスト
*/
public List<String> getContactList(){
ArrayList<String> items = new ArrayList<String>();
// コンタクトリストから取得するカラムを指定。とりあえず全部取っとく
・・・(省略)・・・
return items;
}
}
サーバ側の処理を書きます。wv.addJavascriptInterface(user, "user"); でブリッジを設定していますので、UserObj クラスのメソッド、user.getUserId() などが利用できます。
<html>
<body>
test
<hr>
<script type="text/javascript">
document.write("UserID:" + user.getUserId());
document.write("<hr>[Contacts]<br>");
contacts=user.getContactList();
for(i = 0; i < contacts.size(); i++) {
document.write(contacts.get(i) + "<br>");
}
</script>
<hr>
<a href="page2.html">page2</a>
</body>
</html>
これを実行すると、以下のような画面が表示されます。
"test"行以下が、リモートサーバから取得されたHTML ファイル。
"UserID:UserIdA"部分がユーザID、Contacts から hr までが、実際にAndroid 内に入っていたコンタクトリストになります。
このように、JavaScript ブリッジを使うことにより、リモートサーバ側のロジックで Android 内のデータを操作することが可能となります。
また、page2.html へのリンクがありますが、これを選択すると、page2.html が表示されます。
現状のコードでは、全画面にpage2.html の内容が表示され、Hello World ... 部分などは消えてしまいます。
このまま、同じレイアウト内でページを遷移させる方法もありますが、長くなったのでそれは次回で。
- Newer: ジオメディア新年会のお知らせ
- Older: Android の GUI デザインツール
Comment:0
Trackback:0
- TrackBack URL for this entry
- http://www.plants-web.jp/mt/mt-tb.cgi/236
- Listed below are links to weblogs that reference
- [Android] WebKit で JavaScript ブリッジ from Flashマインドマップ開発ブログ