Home > papervision3d > gungi vol.08に参加してきました

gungi vol.08に参加してきました

あまり外とのつながりを持たないのですが、「第8回エンジニア交流勉強会「gungi」」という勉強会に参加してきました。

内容は以下の通り。

  • 「携帯サイト開発へ押し寄せるのオープン化の波」
  • 「今からでも間に合う　AIR の第一歩」
  • 「“グリムス”という参加型環境サイトのご紹介」

やはり一番目の講演が気になりました。
Androidを含めたオープン開発環境の話を沢山聞かせていただきました。
iPhoneやAndroid以外にもNokiaケータイとか面白そうでした。
Obj-Cも使ったことがあるので、iPhoneはいつか触ってみようと思ってます。

恩返し

こういう機会を”タダ”で与えていただいたので、感謝の気持ちを込めて私の出来る事を送ります。

贈り物

私は会場で唯一(?)のAndroid Developerの様でしたので、感謝の気持ちを込めてAndroidに関する情報を贈らせていただきます。
Androidの話題のときに、講演者である「シリウスラボ所長　関 治之氏」が
「AndroidにはWebkitを搭載していてJavaScriptとも連携出来るんです。」
っておっしゃられていたので、具体的なデモをお見せします。

JSから電話をかける

NokiaケータイのデモではPythonで電話をかけていたので、AndroidでもJavaScriptから電話をかけてみます。

こんな画面


白い背景の部分がWebkit、つまりブラウザ部分です。
その中にhtmlでインタフェースを記述しています。
動作はJavaScriptで記述しています。

AndroidのUI定義

UIを定義する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!" />
	<WebView android:id="@+id/browser"
                android:layout_width="wrap_content"
		android:layout_height="120px" />
</LinearLayout>

WebViewというのがWebkitを表すクラスです。

HTMLとJS

WebView内に表示するHTMLはこんな感じです。

<html>
<head>
<title>Call Android Phone/title>
</head>
<body>
<p>Android <-> JavaScript </p>
<form name="frm1">
<input type="text" name="text1" />
<input type="button" value="call" name="btn1" />
</form>
<form name="frm2">
<input type="text" name="text2" />
<input type="button" value="change title" name="btn2" />
</form>
</body>
</html>

JavaScript部分はこんな感じです。

<script type="text/javascript">
        window.onload = function() {
                document.frm1.btn1.onclick = function() {
                        var text1 = document.frm1.text1.value;
                        Android.callPhone(text1);
                }
 
                document.frm2.btn2.onclick = function() {
                        var text2 = document.frm2.text2.value;
                        Android.changeTitle(text2);
                }
        }
</script>

Android.callPhone()関数がAndroid側のメソッドを叩いています。
この連携の方法は「AndroidとJavaScriptを連携させる方法」に詳細が載っていますので参照下さい。
ここでは簡単に説明します。

まずWebViewを取得してJSを利用可能状態にします。

WebView browser = (WebView) findViewById(R.id.browser);
browser.getSettings().setJavaScriptEnabled(true);// JS利用OK

HTMLも読み込んでおきます。

browser.loadUrl("http://www.adamrocker.com/android/js2android_02.html");

そして、Android側のJavaオブジェクトをJavaScript側のオブジェクトとブリッジします。
つまり、JavaオブジェクトとJavaScriptオブジェクトを繋げて同じオブジェクトとして扱えるようにします。

JsObj jo = new JsObj(this);
browser.addJavascriptInterface(jo, "Android");

JsObjというJavaオブジェクトとJavaScript側のAndroidといオブジェクトを連携しました。
これでJsObjのcallPhoneメソッドがJavaScript側ではAndroid.callPhone関数として呼び出せます。
なおJsObjの定義は末尾にソースを公開しておきます。

デモ

これで実装ができたので、デモです。
まず、Android.callPhone()で実際に電話をかけてみます。
電話番号はFormタグ内のtextの値になります。

電話番号を入力して

ボタンをクリックすると…


ちゃんと掛けられました！！
調子に乗って、JSからAndroidアプリのタイトルを変更してみる。

textにタイトル文字を入れて

ボタンをクリックすると…


おぉ！ちゃんとタイトルが変わった！
ということで、AndroidとJSの連携はとっても簡単に出来ますよ。Enjoy!!

おわりに

普段の生活とは違った新鮮な経験を”無料”で味あわせていただきました。
勉強会の主催者および講演者の方々に感謝です。
こういった勉強会にドンドン参加して行きたいと思います。

Download

いつものようにeclipseのプロジェクトを公開しますので、ご自由にお楽しみ下さい。
20分ぐらいで作ったヤツなので適当ですが…(汗)
android_js_sample.zip

Source Code

全ソースコードです。
AndroidJs.java

package com.adamrocker.android.js;
 
import android.app.Activity;
import android.os.Bundle;
import android.os.DeadObjectException;
import android.os.Handler;
import android.os.IServiceManager;
import android.os.ServiceManagerNative;
import android.telephony.IPhone;
import android.webkit.WebView;
 
public class AndroidJs extends Activity {
  Handler mHandler;
 
  class JsObj {
    private Activity activity;
 
    public JsObj(Activity androidJs) {
      this.activity = androidJs;
    }
 
    public void changeTitle(final String title) {
      mHandler.post(new Runnable() {
        public void run() {
          setTitle(title);
        }
      });
    }
 
    public void callPhone(String phoneNumber) {
      IServiceManager sm = ServiceManagerNative.getDefault();
      IPhone phoneService;
      try {
        phoneService = IPhone.Stub.asInterface(sm.getService("phone"));
        phoneService.call(phoneNumber);
      } catch (DeadObjectException e) {
        e.printStackTrace();
      }
    }
  }
 
  @Override
  public void onCreate(Bundle icicle) {
    super.onCreate(icicle);
    setContentView(R.layout.main);
    mHandler = new Handler();
    WebView browser = (WebView) findViewById(R.id.browser);
    browser.getSettings().setJavaScriptEnabled(true);// JS利用OK
    JsObj jo = new JsObj(this);
    browser.addJavascriptInterface(jo, "Android");
    browser.loadUrl("http://www.adamrocker.com/android/js2android_02.html");
  }
}

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!" />
	<WebView android:id="@+id/browser"
                android:layout_width="wrap_content"
		android:layout_height="120px" />
</LinearLayout>
関連のありそうなエントリ

Comments:0

Comment Form
Remember personal info

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Trackbacks:0

Trackback URL for this entry
http://www.adamrocker.com/blog/200/android_dveloped_in_js.html/trackback/
Listed below are links to weblogs that reference
gungi vol.08に参加してきました from throw Life

Home > papervision3d > gungi vol.08に参加してきました

Pages
Recent Entries
Categories
Archives
Search
Feeds
Meta

Return to page top