クラウドなアプリケーション構築前編-WebView

By 鈴木唯比古

2009/12/09 - チュートリアル

SDK 2.0, WebView, クラウド

はじめまして。鈴木です。
今回から2回に分けて「クラウドなアプリケーションの構築」と題して
Androidの特性を生かしたサーバーサイドアプリケーションの構築を
実践していこうと思います。

これまでのモバイルアプリケーション開発とは一線を画して
なんでもできちゃうAndroidですが、Googleケータイというからには、
やっぱりクラウドなアプリケーションを開発したいですよね。
実際、これまでWEBブラウザに頼らざるを得なかったクラウドの世界も、
Androidケータイというフロントエンドを得ることで
より強力なサーバサイドアプリケーションを提供することができます。

今回はその礎として、「WebView」を使ってサーバーサイドから
アプリ上の画面制御をしてみたいと思います。

HTMLファイルの表示

WebViewは、HTMLファイルを表示するコンポーネントです。
このコンポーネントを使うことで、HTMLフォーマットで記述されたファイルを使って画面を構成することができます。

ひとまず、以下の内容のHTMLファイルをアプリケーション内に配置して表示してみます。

<local00.html>

HTMLとAndoroid APIの連携をさせたいので、
Andoroidアプリから呼び出されるjavascriptとして「onLoad()」メソッドを定義し、
逆に、HTMLからAndroidアプリ上のメソッドを呼び出すためにボタンのonClickイベントに
「window.link2local01.onClick()」というメソッド呼び出しを記述しています。

HTMLファイルをアプリケーション内に配置する場合は
アプリケーションルート配下のassetsディレクトリに格納します。

HTMLファイル配置イメージ

では、Activityクラスを継承したMainクラスを作成して、
このHTMLファイルをアプリケーションから呼び出してみましょう。
onCreateメソッド内でWebViewインスタンスを生成して
HTMLファイルを読み込んでみます。

実行してみます。
プレビュー1

HTMLファイルの内容が表示されました。

Android APIとの連携

HTMLファイルの表示はできましたが、これではただのHTMLビューアーです。
HTMLとAndroid APIを連携させましょう。
WebViewClientクラスとWebChromeClientクラスを拡張して、
ブラウザイベント発生時の挙動を制御します。

package jp.co.techfirm.android.dynamicview;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.Window;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class Main extends Activity {
 private WebView webView;
 private Handler handler;

@Override
 public void onCreate(final Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE);

handler = new Handler();

webView = new WebView(this);
  WebSettings settings = webView.getSettings();
  settings.setJavaScriptEnabled(true);

webView.addJavascriptInterface(
    new LinkInterface("file:///android_asset/local00.html"),
    "link2local00");
  webView.addJavascriptInterface(
    new LinkInterface("file:///android_asset/local01.html"),
    "link2local01");
  webView.setWebViewClient(new ViewClient());
  webView.setWebChromeClient(new ChromeClient());

webView.loadUrl("file:///android_asset/local00.html");
  setContentView(webView);
 }

public final class LinkInterface {
  private String url;
  public LinkInterface(final String url) {
   this.url = url;
  }

public void onClick() {
   handler.post(new Runnable() {
    public void run() {
     Log.e("", "link to " + url);
     webView.loadUrl(url);
    }
   });
  }
 }

public final class ViewClient extends WebViewClient {
  @Override
  public void onPageFinished(WebView view, String url) {
   webView.loadUrl("javascript:onLoad()");
  }
 }

public final class ChromeClient extends WebChromeClient {
  @Override
  public boolean onJsAlert(
    final WebView view,
    final String url,
    final String message,
    final JsResult result) {

Log.e("", message);
   AlertDialog dialog
     = (new AlertDialog.Builder(view.getContext())).create();
   dialog.setTitle("Message");
   dialog.setMessage(message);
   dialog.setButton(
     AlertDialog.BUTTON_POSITIVE,
     "OK",
     new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialoginterface, int i) {
     result.confirm();
    }
   });
   dialog.show();
   return true;
  }
 }
}

画面遷移先用にHTMLをもう1つ追加しておきます。

<local01.html>

では、実行してみます。

プレビュー2

画面遷移できたでしょうか。
このように、WebViewではHTML上のjavascriptからAndroid APIを呼び出したり、
Android APIからHTML上のjavascriptを呼び出したりすることができます。

インターネット上のHTMLファイルの表示

クラウドというからには、当然、
サーバーサイドでアプリケーションの制御をする必要があります。

WebViewではローカル(assets)のファイルだけではなく、
インターネット上のファイルも読み込むことができます。

Mainクラスに以下の一文を足して、インターネット上にあるHTMLファイルを
読み込んでみます。
（※ドメインは環境に合わせて書き換えてください。）

また、WEBサーバ上に以下のHTMLファイルを置いておきます。

<server00.html>

local01.htmlもserver00.htmlに遷移するように書き換えます。

<local01.html>

因みに、エミュレータ環境で実行する場合でローカルにWEBサーバを立てる場合、
ドメインにlocalhostを指定してはいけません。
(エミュレータ自身のアドレスと混同してしまうため)
マシン名を指定するか、ローカルマシンのIPアドレスを調べて指定しましょう。

実行してみます。

プレビュー3

遷移できましたか？
このように、インターネット上のHTMLファイルでも、ローカルに置いた場合と同様に
Android APIと連携することができます。

アプリサイドでは画面から呼び出す関数ライブラリの提供と共通的な処理に専念して、
画面はサーバーサイドで制御することで、WEBブラウザではできなかった
リッチで強力なクラウドアプリケーションが実装できます。

次回はより実践的なアプリを作成する予定です。