Netbookにも広まるAndroidで、かつてないWeb体験を

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

　最近の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の以下のメソッドのどちらかを呼び出すことです。

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

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

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

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

1. 文字列を受け取れる
2. Webブラウザ側のアラートダイアログを表示しないようにできる
3. 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で追加された新しい機能のウィジェットを取り上げます。

■ ＠IT関連記事

ケータイアプリ事情−iPhoneからAndroidへの移植も ESEC2009イベントレポート　今回のテーマは“ケータイ”。話題のAndroidやiPhone向けアプリケーションの展示・デモンストレーションを行っていたブースを中心に紹介する MONOist > 組み込み開発 2009/5/26

Androidアプリで高速描画チューニングをするコツ インタビュー特集：Google直伝！（1）　Googleのさまざまなサービスを使いこなすコツをグーグル担当者に聞くインタビュー。初回は日本で端末販売がせまるAndroidについて 「リッチクライアント ＆ 帳票」フォーラム 2009/4/21

Androidのオープン性でガラパゴスから脱出しよう ものになるモノ、ならないモノ（29）　ガラパゴスとやゆされる日本の高機能ケータイ。閉塞感に満ちた国内市場から世界に出るための解は、Androidのオープン性にある 「Master of IP Network」フォーラム 2008/12/1

Androidは雇い主の分身として仕事をするエージェント Google Developer Day 2008特集（1）　Androidの生みの親、アンディ・ルｰビン氏が、Androidに込めた思いと展望を語る。「Google Android入門」の著者の嶋氏が聞く 「リッチクライアント ＆ 帳票」フォーラム 2008/6/13

Google Android用携帯アプリ作成のための基礎知識 小山博史のJavaを楽しむ（9）　先日公開されたGoogleの携帯端末プラットフォームAndroid。開発環境の整え方やアプリの作り方、作成に便利なツール、SDKの中身などを解説 「Java Solution」フォーラム 2007/12/3

1-2-3

Index

第9回　Netbookにも広まるAndroidで、かつてないWeb体験を   Page1 国内初Android端末発売、Marketも日本語サポート開始 何かと便利なAndroidの“サービス”って何？   Page2 同じコードでも、Webサイトによって動作が異なる？ アドレスバーを、どこにレイアウトするか？ 進む／戻るボタンを付けて閲覧履歴を管理するには？ Page3 タッチのモーションジェスチャーで操作するには？ WebViewの真骨頂！ JavaScriptと連動するには？ JavaScriptのalertをアプリの一部として使うには？ WebのGoogle翻訳の結果をアプリに取り込むには？ そのほか、補足事項9点

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ