Databaseオブジェクトによるデータベース・アクセス(7/7):PhoneGapによるAndroid/iPhoneアプリ開発入門

Databaseオブジェクトによるデータベース・アクセス (7/7)

作成:2012-04-23 09:52
更新:2012-04-23 09:52

■メモ・アプリを完成させよう！

では、メモを保管するアプリを完成させましょう。下のリスト欄に、index.htmlの全ソースコードを掲載しておきました。ここでは、毎回起動するごとにテーブルを初期化するようにしてあります。動作チェックをして、ずっとデータを保存して利用するようになったら、★の文をカットして再ビルドして利用してください。

ここでは、データの追加と検索を実装しています。検索は、「title」のフィールドに検索したいテキストを書いて「Find」ボタンを押すと、そのテキストをtitleに含むものを探して下に表示します。

データの追加は、既に説明した通りなのでわかるでしょう。ここでは、検索をして取り出したレコードの処理について補足しておきましょう。

function querySuccess(tx, results) {……}

これがSELECT文で取り出した後のコールバック関数でしたね。ここでは、まず第２引数のSQLResultSetオブジェクトから、取得したレコードの数を取り出しておきます。

var len = results.rows.length;

「rows」というのは、取得したレコードの情報をまとめてあるプロパティです。この中には「SQLResultSetList」というオブジェクトが保管されています。これは名前から想像がつくように、取得したレコードをリストとして管理するものです。ここから値を取り出していけばいいわけです。

for ( var i = 0; i < len; i++) {
    var obj = results.rows.item(i);

レコードを取り出している部分はforによる繰り返しになっています。ここから、まずは順にレコードを取り出します。SQLResultSetListの「item」というメソッドは、引数にインデックス番号を指定すると、そのレコードをオブジェクトとして返します。要するに「レコードを番号順に取り出している」と考えてください。

    res += '<tr><td>' + obj.id + '</td><td>'
        + '<a href="javascript:alert(\'' + obj.memo + '\')">'
        + obj.title + '</a></td></tr>';

後は、取り出したオブジェクトから、各レコードの値を取り出してテキストにまとめていきます。各レコードは、レコード名のプロパティとして用意されています。IDの値なら、obj.idで取り出せるわけです。こうやって各レコードの値を取り出して処理すればいいのですね。

――というわけで、けっこう説明が長くなってしまいましたが、これでスマートフォンに内蔵されているSQLデータベースが使えるようになりました。これはちゃんと利用できるようになればかなり応用の効く技術ですので、サンプルをいろいろ修正しながら使い方を考えてみてください。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

※完成したコード。文末の~~記号は、次の行と続けて記述します。

<!DOCTYPE html>
<html>
<head>
	<title>My Page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet"
		href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript"
		src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript"
		src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
	<script type="text/javascript" src="phonegap-1.4.1.js"></script>
	<script type="text/javascript">
	document.addEventListener("deviceready", onDeviceReady, false);
	
	// add data
	function doAddAction(){
		var db = window.openDatabase("Database", "1.0", "mydata", 200000);
		db.transaction(addDB, errorCB, successCB);
	}
	
	// add to row
	function addDB(tx){
		var title = document.getElementById('title').value;
		var memo = document.getElementById('memo').value;
		tx.executeSql('INSERT INTO MYMEMO (title, memo) VALUES ~~
			("' + title + '", "' + memo + '")');
	}
	
	function doFindAction(){
		var db = window.openDatabase("Database", "1.0", "mydata", 200000);
		db.transaction(findDB, errorCB);
	}
	
	// add to row
	function findDB(tx){
		var title = document.getElementById('title').value;
		tx.executeSql('SELECT * FROM MYMEMO WHERE title LIKE ?', ~~
			[title], querySuccess, errorCB);
	}

	// Populate the database 
	function populateDB(tx) {
		tx.executeSql('DROP TABLE IF EXISTS MYMEMO');  //★
		tx.executeSql('CREATE TABLE IF NOT EXISTS MYMEMO ~~
			(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ~~
			title TEXT, memo TEXT)');
		tx.executeSql('INSERT INTO MYMEMO (title, memo) VALUES ~~
			("First row", "this is test!")');
		tx.executeSql('INSERT INTO MYMEMO (title, memo) VALUES ~~
			("Second row", "Hello everyone!")');
	}

	// Query the database
	function queryDB(tx) {
		tx.executeSql('SELECT * FROM MYMEMO', [], querySuccess, errorCB);
	}

	// Query the success callback
	function querySuccess(tx, results) {
		var len = results.rows.length;
		console.log("MYMEMO: " + len + " rows found.");
		var res = "";
		for ( var i = 0; i < len; i++) {
			var obj = results.rows.item(i);
			res += '<tr><td>' + obj.id + '</td><td>'
				+ '<a href="javascript:alert(\'' + obj.memo + '\')">'
				+ obj.title + '</a></td></tr>';
		}
		document.getElementById('list').innerHTML = res;
	}

	// Transaction error callback
	function errorCB(err) {
		console.log("Error processing SQL: " + err.code);
	}

	// Transaction success callback
	function successCB() {
		var db = window.openDatabase("Database", "1.0", "mydata", 200000);
		db.transaction(queryDB, errorCB);
	}

	// Cordova is ready
	function onDeviceReady() {
		var db = window.openDatabase("Database", "1.0", "mydata", 200000);
		db.transaction(populateDB, errorCB, successCB);
	}
</script>

</head>
<body">
	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Sample</h1>
		</div>
		<div data-role="content">
			<h2>Sample Page</h2>
			<div id="msg"></div>
			<label for="dname">TITLE:</label> <input type="text" id="title">
			<label for="dname">MEMO:</label>
			<textarea id="memo"></textarea>
			<button onclick="doAddAction();">Add</button>
			<button onclick="doFindAction();">Find</button>
			<hr>
			<table id="list" border="1"></table>
		</div>
	</div>
</body>
</html>

※関連コンテンツ

<< prev next >>

「PhoneGapによるAndroid/iPhoneアプリ開発入門」に戻る