連載

2009年9月3日

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

本連載で、SDKとEclipseを使ってAndroidの携帯端末で動くJavaアプリを作成し、Android Marketでの配布を目指しましょう

[緒方聡，株式会社イーフロー] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

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

　最近の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());
    }
}

そのほか、補足事項9点

　今回はWebViewを中心に、android.webkitパッケージのいくつかのクラスの使い方を紹介しました。WebViewは簡単に使えるのにパワフルなコンポーネントなので、アイデア次第で、これまでにないアプリを作成できるのではないでしょうか。

　最後に、WebViewを使いこなしてもらうために、知っておいてもらいたい点をいくつか挙げて今回の記事を締めくくります。

WebViewでは基本的にWebブラウザの持つすべての操作が可能
画面キャプチャしてイメージとして保存が可能
拡大／縮小が可能
ファイルアクセスが可能
ネットワークの画像ブロック機能
複数のウィンドウを使用することが可能
きめ細かいフォント設定
ユーザーエージェントの変更が可能
アプリごとにキャッシュがたまっていく（エンドユーザーが解放可能）

　WebViewを使用したアプリを作成する際には、WebViewやWebViewClient、WebChromeClient、WebSettingsは最もよく使うクラスだと思います。上記に挙げた項目も、これらのクラスからピックアップしています。

　次回は、Android 1.5で追加された新しい機能のウィジェットを取り上げます。

「次回」へ

「Androidで動く携帯Javaアプリ作成入門」バックナンバー