HTMLとJavaScriptでandroidアプリを超簡単に作る方法

今回は簡単にHTML+JavaScriptでandroidアプリを作る方法を紹介します。
以前のエントリー紹介した「HTMLとJavaScriptでiPhoneアプリを超簡単に作る方法」のandroid版です。

androidにもiOSと同じくSafariにも搭載されているレンダリングエンジンのWebkitが含まれています。これを利用して、HTMLでもandroidアプリを作ることができます。

まだ画面固定の方法等調べないと行けない部分もありますが、アプリローカル内のHTMLを表示する方法を紹介します。

HTMLファイルの準備

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript">
		function init() {
			// 日付、時刻の表示処理を実行
			setDateTime();
		}
		function setDateTime() {
			// 日付、時刻の取得
			var now = new Date();
			var nowDate = now.getFullYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日";
			var nowTime = now.getHours()+"時"+ now.getMinutes()+"分"+now.getSeconds()+"秒";
			document.getElementById("datetime").innerHTML = nowDate +"<br>" + nowTime;
			// 200ミリ秒毎に日付、時刻の表示処理を実行
			setTimeout(setDateTime, 200);
		}
	</script>
</head>
<body onload="init();">
	<center>
		Androidでassets内のHTMLを表示<br>
		<img src="title.gif"><br>
		<br>
		<div id="datetime" style="font-size:30px;background-color:#eeeeee;"></div>
	</center>
</body>
</html>

あと、タイトル画像を"title.gif"で用意しました。

プロジェクトの新規作成

(android開発用プラグインがインストールされている事が前提です。)
eclipseからandroidプロジェクトを新規作成

HTMLファイルや画像ファイルをプロジェクトに追加

assetsへ追加します。

Web表示のコード追加

生成されたActivityクラスのonCreateへコードを追加します。

package net.uosoft.android.sampleHTML;

import android.app.Activity;
import android.os.Bundle;

// 追加import
import android.webkit.WebView;
import android.widget.LinearLayout;

public class htmlActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // *** ここよりコード追加 ***
        // レイアウトビュー作成
        LinearLayout layout = new LinearLayout(this);
        // WebViewを使ってHTMLファイルを読み込み
        // assetsのパスは"file:///android_asset/"になる
        WebView webview = new WebView(this);
        webview.loadUrl("file:///android_asset/test.html");
        // JavaScriptの動作をONにする
        webview.getSettings().setJavaScriptEnabled(true);
        // レイアウトビューへwebviewを追加
        layout.addView(webview);
        // contentへレイアウトビューを追加
        setContentView(layout);
        // *** ここまで ***
    }
}