八角研究所 : Android WebViewでGoogle APIを扱う

Android WebViewでGoogle APIを扱う

AndroidのWebViewでGoogle APIを扱う方法を説明します。WebViewを使えば、AndroidプログラムからJavaScriptコードを呼び出し、逆にJavaScriptコードからAndroidプログラムを呼び出すこともできます。この記事では、Google AJAX Language APIを使って翻訳をおこなうプログラムを作ります。

WebViewについて

WebViewはWebkit技術でウェブページを表示するビューです。WebkitはAndroidが搭載している高性能的なブラウザエンジンです。

WebViewで表示できるリソース：

自作のHtmlファイル
オンラインウェブサイト

Google AJAX APIについて

Google AJAX API では、リッチでダイナミックなウェブサイトを JavaScript と HTML だけで実装できます。JavaScript コードを追加するだけで、自分のサイトでも提供されているGoogleサービスが使えます。

今まで提供されているAPI：

Google Maps API
Google AJAX Search API
Google AJAX Feed API
Google Visualization API
Google AJAX Language API
AJAX Libraries API
Google Earth API

WebViewでGoogle AJAX Language APIを扱う

AJAX Language API を使用すると、JavaScript のみでウェブページ内のテキストブロックの言語を判別して、翻訳できます。ですので、Androidでも簡単な翻訳プログラムが作れます。

サンプルで作り方を説明しましょう。

レイアウト

このプログラムのユーザインタフェースは2つに分割されます。最初の部分は、Androidレイアウトファイルのres/layout/translate.xmlでWebViewとボタンが定義されます。

<?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">
	<WebView
		android:id="@+id/web_view"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_weight="1.0"/>
	<Button
		android:id="@+id/do_translate"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:text="@string/do_translate"/>
</LinearLayout>

第2の部分は、WebViewにロードされるassets/index.htmlです。


<script type=”text/javascript” src=”http://www.google.com/jsapi”/>
<script type=”text/javascript” src=”main.js”/>

From:
<select id=”flang”>
<option value=”" selected>unKnown</option>
<option value=”zh-TW”>Chinese Trad</option>

</select>
<textarea id=”query” rows=”2″>Enter string here</textarea>
<button TYPE=BUTTON onClick=”translate(’JavaScript’)”>Do Translate</button>
To:
<select id=”tlang”>
<option value=”ja” selected>Japanese</option>

</select>
<textarea id=”translation” rows=”4″ readonly>Results</textarea>

ボタンのonClick()ハンドラでtranslate(‘JavaScript’)メソッドが呼び出されます。このメソッドはJavaScriptファイルmain.jsに定義されます。

JavaScriptファイルassets/main.js

自分のページに AJAX Language API を組み込むには、Google AJAX APIローダを使用します。Index.htmlの2行目のように Google AJAX API スクリプトタグを含めることと、google.load(”language”, “1″) を呼び出すことが必要です。google.load(”language”, “1″)によりLanguage APIのバージョン１を読み込みます。

//googleのlanguage APIをロードする
google.load("language", "1");

次に、translate()メソッドを実装します。

function translate(msg) {
  var query = document.getElementById("query").value;
  var flang = document.getElementById("flang").value
  var tlang = document.getElementById("tlang").value
  if (query == null || query == ""){
      alert("nothing be input");
      return;
  }
  window.android.showMsg("Translating....from " + msg);
  if (flang == ""){
        google.language.detect(query, function(result) {
        if (!result.error && result.language) {
            flang = result.language;
        }
    });
  }
  //入力されたテキストの翻訳テキストを翻訳先言語で返す
  google.language.translate(query, flang, tlang,
       function(result) {
            var translated = document.getElementById("translation");
            if (result.translation) {
                translated.value = result.translation;
            }
  });
}

9行目は、window.androidオブジェクトのshowMsg()メソッドを呼び出します。window.androidがAndroidプログラムのなかで自分で定義するオブジェクトです。後でAndroidコードと一緒に説明します。翻訳元言語が選択されない場合、11行目のgoogle.language.detect()メソッドで指定されたテキストの言語を表す言語コードを取得できます。

18行目のgoogle.language.translate()メソッドは入力されたテキストの翻訳テキストを翻訳先言語で返すグローバルメソッドです。翻訳結果はページのtranslationテキストエリアに設定します。

AndroidコードクラスTranslate.java

public class Translate extends Activity {
    private WebView wv;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.translate2);
        wv = (WebView) findViewById(R.id.web_view);
        wv.getSettings().setJavaScriptEnabled(true);
        wv.addJavascriptInterface(new AndroidBridge(), "android");
        wv.setWebChromeClient(new WebChromeClient(){
            @Override
            public boolean onJsAlert(final WebView view,final String url,
                final String message,JsResult result){
                result.confirm();
                return false;
            }
        });
        wv.loadUrl("file:///android_asset/index.html");
        Button button = (Button)findViewById(R.id.do_translate);
        button.setOnClickListener(new OnClickListener(){
        public void onClick(View view){
                wv.loadUrl("javascript:translate('Android')");
            }
        });
    }

    private class AndroidBridge {
         public void showMsg(String msg){
            Toast.makeText(Translate.this, msg, 3000).show();
         }
    }
}

まず、WebViewオブジェクトを取得して、8行目のsetJavaScriptEnabled()メソッドで組み込みブラウザでJavaScriptをオンにします。

次は、9行目のaddJavascriptInterface()メソッドでブラウザのJavaScriptにJavaオブジェクトAndroidBridgeを登録します。AndroidBridgeオブジェクトは27行～31行のように、showMsg()メソッドを定義しています。showMsg()の中では、AndroidのToastクラスを使って、メッセージうウィンドウを作ります。

そして、10行目のように、新しいWebChromeClientオブジェクトを作り、setWebChromeClient()メソッドでそれを登録します。ここで作られるWebChromeClientオブジェクトの中では、ブラウザがJavaScriptアラート(window.alert())をオープンするために、onJsAlert()メソッドをオーバーライドします。

WebViewの設定が終わったら、18行目のloadUrl()を使ってローカルのassetディレクトリからウェブページindex.htmlをロードします。

最後に、画面下部のボタンがJavaからJavaScriptへの呼び出しを行います。22行目のように、ボタンのonClick()ハンドラでJavaScript式を引数としてWebViewのloadUrl()メソッドを呼び出します。この式は、index.htmlで定義されたtranslate()関数の呼び出しです。

もうひとつ忘れてはいけないのは、AndroidMainfest.xmlにandroid.permission.INTERNETを追加することです。