WebView と assets 連携 - Ussy Diary(2010-01-09)

2010-01-09

◆ WebView と assets 連携

Android には WebKit ブラウザが内蔵されていて、 SDK にはそのエンジンを利用した WebView というコンポーネントが提供されています。

使い方は layout に WebView コンポーネントを配置して Activity から WebView インスタンスを取得し、以下のメソッドを呼び出すことで描画が行えます。

WebView#loadUrl
WebView#loadData
WebView#loadDataWithBaseURL

loadUrl は URL を指定し、 loadData は html 文字列から描画を行うものですが、今回は loadDataWithBaseURL を使いました。というのもローカルに css ファイルを作成して、 html から参照させたかったからです。

[追記]

loadUrl でも assets 連携が行えました。

webView.loadUrl("file:///android_asset/index.html");

[/追記]

まずリソースファイルとなる html ファイルおよび css ファイルを作成します。アプリケーションのルートディレクトリに assets ディレクトリを作成し、その直下に対象のファイルを置きます。

あとやることは Activity から WebView インスタンスを取得し、メソッドで呼び出すだけです。

webView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", null);

第一引数に file:///android_asset を指定することで、アプリケーションルートに作成した assets ディレクトリにマッピングが行われます。最後の引数は baseURL の取得がうまく行えなかったときのエラーページを指定するらしいです。今回は内部ファイルにアクセスするので null にしました。

これで assets ディレクトリを基底ディレクトリとし、 html から assets ディレクトリの中にアクセスできるようになりました。

index.html

<link rel="stylesheet" type="text/css" href="./default.css" />

それから assets ディレクトリの資源に直接アクセスしたい場合は、 Context#getAssets (Activity) から AssetManager を取得し、 AssetManager#open メソッドから可能です。

今回は html ファイルをローカルに置いて、テンプレートの中身を書き換える形にしてみました。以下コードです。

Java

public class WebViewActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        String template = getTemplateHtml("index.html");
        String html = template.replaceAll("%s", "<h1>Hello!</h1>");

        WebView webView = (WebView) findViewById(R.id.webView);
        webView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", null);
    }

    private String getTemplateHtml(String path) {
        InputStream in = null;
        try {
            in = getAssets().open(path);
            byte[] buffer = IOUtils.read(in); // 自作ユーティリティ
            return new String(buffer, "utf-8");
         } catch (IOException e) {
             throw new RuntimeException(e);
         } finally {
             IOUtils.close(in);
         }
    }
}

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./default.css" />
  </head>
  <body>%s</body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  background-color: black;
  color: white;
}

WebView は JavaScript との連携も用意されていて、色々できそうです。時間を取って追ってみたいコンポーネントでした。

Tags: Android

[ツッコミを入れる]