感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

WebSQLを使ってCRUD処理(登録/削除/更新/参照)を行う

<スポンサーリンク>

Web SQL Databaseとは

Web SQL Databaseとは、JavaScriptからローカルストレージにアクセスするAPIである。
Web SQLはかなり複雑な検索が可能なため、Webアプリケーションのさまざまなデータを保存するのに適している。

Web SQLの仕様がSQLiteに従うものであったため、SQLiteに偏るのは公正ではない!と騒ぐ奴が出てきた。
そんなこともあって、HTML5の仕様からは外れている。

しかし、このような分野ではベンダーが先行して実装を行って、それが広まることによって事実上の標準(de facto standard)となり、後追いで標準と認定されることは十分ありえる。便利なものは結局使われるからだ。

WebSQLを通じて登録したデータはWeb Storageと呼ばれるローカルストレージに保存されるようだ。
Web Storageは以下の記事が参考になる。
http://www.atmarkit.co.jp/ait/articles/1108/12/news093.html

Web Storage自体はクッキーに変わるような機能で、状態をブラウザ側に保存することができる。
で、その保存容量がクッキーは4KBytesだったのに対して、Web Storageは5MBytesになっている。

Chromeの場合WebSQLで登録したデータは「F12」→「Resources」の「Web SQL」で見ることができる。
実際見てみると、たしかにテーブルとして保存されている。

WebSQLのバージョンを調べる

WebSQLのデータベースを開くには、そのブラウザに内蔵(?)されたデータベースのバージョンを指定する必要がある。
(正確にいうと、指定しなくてもDBを開ける)

で、Web SQLで使うブラウザのDBのバージョンを調べるにはどうしたらいいか、と探していたら、以下のサイトが見つかりました。
http://kt3kesc.blogspot.jp/2011/09/html5-web-sql-database-sqlite.html

openDatabase(1,1,1,1).transaction(function(t){t.executeSql("select sqlite_version()a",[],function(t,r){alert(r.rows.item(0).a);})});

この記事は素晴らしく、上記のスクリプトを実行してみるとバージョンが表示される。

とりあえずWeb SQLで登録(CREATE TABLE→INSERT)と参照(SELECT)をやってみる

サンプルは以下の通り。
Apache on XAMPPにでも配置して、実行するとそのまま動く。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB SQL TEST</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var db = null;
$(function() {

	//Web SQLデータベースをオープンする
	try {
		if (!window.openDatabase) {
			alert("このブラウザではローカルデータベースがサポートされていません");
		} else {
			var shortName = 'testDB';
			//var version = '3.7.6.3';
			var version = '';  //指定しなければ、どのバージョンでも使える
			var displayName = 'Test Database';
			var maxSize = 10000;

			db = openDatabase(shortName, version, displayName, maxSize);
		}
	} catch(e) {
	    console.log("例外:" + e)
		return;
	}

	//データベース登録処理
	$('#create').click(function() {
		var key = document.getElementById("key").value;
		var val1 = document.getElementById("val1").value;
		var val2 = document.getElementById("val2").value;

		db.transaction(function(tx) {
			tx.executeSql('CREATE TABLE IF NOT EXISTS table1(key INTEGER PRIMARY KEY, val1 VARCHAR(32) NOT NULL, val2 VARCHAR(32) NOT NULL)',[]);
			tx.executeSql('INSERT INTO table1 VALUES(?,?,?)',[key,val1,val2],
			function(tx, res) {
				$("#status").text("登録成功!キー:" + key);
				referAll();
			},
			function(tx, error) {
				$("#status").text("エラー:" + error.message);
			});
		});
	});

	//データベース参照処理
	$("#refer").click(function() {
		var key = document.getElementById("key").value;
		db.transaction(function(tx) {
			tx.executeSql('SELECT * FROM table1 WHERE key ==?', [key],
			function(tx,res) {
				var row = res.rows.item(0);
				$("#val1").val(row.val1);
				$("#val2").val(row.val2);
				$("#status").text("参照成功:" + key);
			},
			function(tx,error) {
				$("#status").text("エラー:" + error.message);
			});
		});
	});

	//全件参照ボタン
	$("#referAll").click(function() {
		referAll();
	});
	//全件参照
	function referAll() {
		db.transaction(function(tx) {
			tx.executeSql('SELECT * FROM table1',[],
			function(tx,res) {
				var len = res.rows.length;
				var str = '<table border="1"><tr><th>key</th><th>val1</th><th>val2</th></tr>';
				for(var i=0; i<len; i++) {
					var row = res.rows.item(i);
					str += "<tr>";
					str += "<td>" + row.key + "</td>";
					str += "<td>" + row.val1 + "</td>";
					str += "<td>" + row.val2 + "</td>";
					str += "</tr>";
				}
				str += '</table>';
				$("#out").html(str);
			});
		});
	}
});
</script>
</head>
<body>
<h2 style="color:#aa0022">Web SQL Database</h2>
<hr/>結果:<nobr id="status"></nobr><hr/>
[キー単位]</br>
<input type="button" id="create" value="登録" />
<input type="button" id="refer" value="参照" />
<br/>
キー <input type="text" size="10" id="key"></br>
値1 :<input type="text" id="val1"></br>
値2 :<input type="text" id="val2"></br>
</hr>
[全件]</br>
<input type="button" id="referAll" value="全件参照" />
<div id="out"></div>
</hr>
</body>
</html>

UPDATEとDELETEは?

長くなったので別の記事に書く。

読んだ本

サンプルの多くを以下の書籍を参考にさせていただきました。


WebSQLに限らず、この本はjQueryJavaScriptを使って業務用アプリケーションを作るための多くの示唆が得られます。
基礎を学んだ後に読むとものすごく勉強になる。買ってよかった本。

感謝のプログラミング

今回で感謝のプログラミングは【632時間目】
10000時間まで、あと【9368時間】