Netbookにも広まるAndroidで、かつてないWeb体験を：Androidで動く携帯Javaアプリ作成入門（9）（3/3 ページ）

» 2009年09月03日 00時00分公開

[緒方聡，株式会社イーフロー]

タッチのモーションジェスチャーで操作するには？

　最近のPC向けのWebブラウザは、マウスジェスチャー機能を搭載していたり、後から付けられたりして、使っている人にとっては、なくてはならない存在になっているのではないでしょうか。筆者もそのうちの1人です。

　残念ながら、Androidの標準Webブラウザにジェスチャーはないのですが、ないからこそ自分でWebブラウザアプリを作る意味が出てきます。特にモバイル向けとなると、場所を取るコントロールは邪魔でになりますし、画面を有効活用したいので、端末のタッチスクリーンを駆使したモーションジェスチャーを実現したいですね。WebViewには、「setOnTouchListener(OnTouchListener)」メソッドがあるので、これで実現できそうです。

　ジェスチャーのサンプルは、冒頭でダウンロードリンクを付けておいたソースコードの「Example04.java」を参照してみてください。OnTouchListenerメソッドの使い方がすべてです。

WebViewの真骨頂！ JavaScriptと連動するには？

　ここからがWebViewの真骨頂です。表示させたWebページにAndroidのオブジェクトを渡してやることで、Webページに含まれるJavaScriptからAndroidのオブジェクトのメソッドを呼び出すことが可能です。

図10　HTMLのフォーム（左）からダイヤラー（右）を起動

　JavaScriptからIntentの設定をAndroidへ渡して、Intentを発行しています。Intentの詳細については「ブラウザや地図、ストリートビューの基、Intentとは？」を参照してください。

　また、以下のリンク先はこのサンプルアプリで実際に呼び出しているHTMLです。ソースはWebブラウザを開いて確認してみてください。

JavaScript sample #1

　このJavaScriptで大切なところは1個所、以下だけです。

function ok() {
    android.js(document.forms[0].elements[0].value, document.forms[0].elements[1].value);
}

　この関数はOKボタンが押されたときに呼び出されますが、いきなり「android」というオブジェクトが現れて、そのオブジェクトの「js(action, url)」を呼び出しています。この種明かしは、Android側のソースコードにあります。

WebView webView = new WebView(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl(getIntent().getCharSequenceExtra("url").toString());
webView.addJavascriptInterface(this, "android");

　上記ソースコードの一番下の行では、自分自身を「android」という名前で、JavaScriptとのインターフェイスとしてWebViewに登録しています。ここで指定した名前は、JavaScript側でオブジェクトとして扱え、メソッドを呼び出せます。

　上から2行目は、JavaScriptを有効にするための設定です。こうしないと、JavaScriptが無効のままです。

public void js(String action, String uri) {
    Intent intent = new Intent(action, Uri.parse(uri));
    startActivity(intent);
}

　アプリ側には「js(String, String)」というメソッドが定義されていて、JavaScriptから受け取った内容でIntentを発行しています。

　ここまでが、JavaScriptからAndroidアプリを操作する基本的な方法です。

JavaScriptのalertをアプリの一部として使うには？

　WebViewClientを使用することで、WebViewで発生する各種イベントのコールバックを使用可能になりましたが、これのJavaScript版ともいえるクラスも用意されています。「WebChromeClient」です。

　サンプルとして、このクラスを使用してJavaScriptのalertの動作を制御してみましょう。

JavaScript sample #2

　使用するJavaScriptは、上記リンクから参照してください。

class MyWebChromeClient extends WebChromeClient {
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        if (message.length() != 0) {
            AlertDialog.Builder buildr = new AlertDialog.Builder(Example06.this);
            buildr.setTitle("From JavaScript").setMessage(message).show();
            result.cancel();
            return true;
        }
        return false;
    }
}

　まずは、WebChromeClientのサブクラスを作成します。そして「onJsAlert(…)」をオーバーライドします。今回の制御方法は、JavaScript側のalertのメッセージが空白文字ならJavaScriptのalertを使用し、何かしら指定されているならJavaScriptのダイアログは表示せず、AndroidアプリのAlertDialogでメッセージを表示します。

図11　alertの代わりにAlertDialogでメッセージを表示

　「onJsAlert(…)」メソッドには、注意すべき点が2つあります。

@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    if (message.length() != 0) {
        AlertDialog.Builder buildr = new AlertDialog.Builder(Example06.this);
        buildr.setTitle("From JavaScript").setMessage(message).show();
        result.cancel();
        return true;
    }
    return false;
}

　1つは、戻り値の意味です。AndroidアプリではなくJavaScript側でalertを処理する場合は、falseを返します。trueを返すと、Androidアプリ側でalertを処理することを意味します。

　もう1つは、trueを返す際に、引数で渡されるJsResultの以下のメソッドのどちらかを呼び出すことです。


メソッド	説明
void confirm( )	ユーザーが確認したという結果を返す
void cancel( )	ユーザーがキャンセルしたという結果を返す
表3　メソッド

　「onJsAlert(…)」のJsResultはどちらを呼び出しても動作に変わりはありません。これが例えば「onJsConfirm(…)」などの場合は、「confirm()」「cancel()」のどちらを呼び出すかはとても重要です。

WebのGoogle翻訳の結果をアプリに取り込むには？

　ここまでの解説で、WebViewを使用した応用はいくらでもできそうです。

　今回用意したGoogle翻訳のサンプルは、「WebChromeClient#onJsAlert(…)」メソッドを使用した応用です。このメソッドの良いところは、以下の3つになります。

文字列を受け取れる
Webブラウザ側のアラートダイアログを表示しないようにできる
JavaScript側にAndroidのオブジェクトを定義しなくてもよい（つまり、普通のWebブラウザだけでJavaScriptのデバッグができる）

　まずは、以下のリンクからGoogle翻訳の動作をWebブラウザで確認してみてください。

JavaScript sample #3

　Googleの翻訳サービスをJavaScriptで呼び出しているのですが、このとてもすばらしい機能をWebブラウザだけで使用するのはもったいないですね。そこで、Androidアプリからも利用してしまいましょう。

図12　翻訳結果をAndroidに取り込んだ

　ソースコードは、とても短いです。これまでの応用なので、難しいところは何もありません。

package com.example.android.web;
 
import android.app.Activity;
import android.os.Bundle;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;
 
/** Google 翻訳を使用するサンプル。 */
public class Example07 extends Activity {
    
    class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, final String message, JsResult result) {
            TextView textView = (TextView)findViewById(R.id.TextView01);
            textView.setText(message);
            result.confirm();
            return true;
        }
    }
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.example07);
        
        WebView webView = (WebView)findViewById(R.id.WebView01);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebChromeClient(new MyWebChromeClient());
        webView.loadUrl(getIntent().getCharSequenceExtra("url").toString());
    }
}