サンプルコード
index.htmlを次のような流れでコーディングしました。
1. デバイス準備完了を待つ。
2. デバイス準備の完了後、HELLOテーブルを作成し、「Hello World!」の文字を挿入。
3. 「Hello World!」の文字を検索し、画面に表示。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=default-width; user-scalable=no"/>
<meta http-equiv="Content-type" content="text/html" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="spec/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css">
<script type="text/javascript" src="spec/lib/jquery.mobile-1.2.0/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="spec/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
<title>Hello World!</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
// イベントリスナの登録。デバイスの準備完了まで待つ。
document.addEventListener("deviceready", onDeviceReady, false);
// デバイス準備完了時にコールバック。
function onDeviceReady() {
var db = window.openDatabase("Database", "1.0", "Hello DB ", 200000);
db.transaction(populateDB, errorCB, successCB);
}
// テーブル準備
function populateDB(tx) {
tx.executeSql('DROP TABLE IF EXISTS HELLO');
tx.executeSql('CREATE TABLE IF NOT EXISTS HELLO (key PRIMARY KEY, data)');
tx.executeSql('INSERT INTO HELLO (key, data) VALUES ("hello", "Hello World!")');
}
// テーブル準備、hello検索の失敗時にコールバック。
function errorCB(err) {
console.log("Error processing SQL: "+err.code);
}
// テーブル準備の成功時にコールバック。
function successCB() {
var db = window.openDatabase("Database", "1.0", "Hello DB", 200000);
db.transaction(queryDB, errorCB);
}
// hello検索
function queryDB(tx) {
tx.executeSql('SELECT data FROM HELLO WHERE key = "hello"', [], querySuccess, errorCB);
}
// hello検索の成功時にコールバック。
function querySuccess(tx, results) {
if (results.rows.length == 1) {
console.log("oi");
document.getElementById("hello").innerHTML = results.rows.item(0).data;
}
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<h1 id='hello'></h1>
</div>
<div data-role="footer" data-position="fixed">
<h1>footer</h1>
</div>
</div>
</body>
</html>
サンプルはPhoneGapのAPIリファレンスを参照して作成しました。 http://docs.phonegap.com/en/2.2.0/cordova_storage_storage.md.html
実行結果
iPhone SimulatorのiOS6.0で実行した場合、DBは"0000000000000001.db"という名前で下記パスに作成されていました。
{ホーム}/Library/Application Support/iPhone Simulator/6.0/Applications/{アプリケーションID}/Library/WebKit/LocalStorage/file__0
SQLiteBroweser等のDBを参照するツールで見ると、HELLOテーブルに"hello"と"Hello World"のレコードが追加されてました。こんな簡単にDB操作ができるとは。。
関連：PhoneGapとjQuery Mobileを使ったネイティブアプリ開発
0 件のコメント:
コメントを投稿