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 との連携も用意されていて、色々できそうです。時間を取って追ってみたいコンポーネントでした。