HTML5 Web SQL Database の使い方
ここでは Web SQL Database の使い方を説明します。
ちなみに HTML5 Web SQL Database はもともと HTML5 標準仕様として組み入れられるものとして検討されてきて、2010年11月に W3C では Recommendation に入れるのをやめました。
しかしながら HTML5 の一環として、Google Chrome、Safari、Firefox 及び Android の標準ブラウザなどの主要ブラウザでサポートされています。
従って、HTML5 標準ではないから使えないか、というとそうでもなく、例えばモバイルアプリの HTML5 開発といった状況では利用可能です。
HTML5 Web SQL Database の使い方
Web Storage ではキー・バリューペア式の簡便なストレージを提供しているのに対して、 Web SQL Database は SQLite をバックエンドのエンジンに持ち、基本的な SQL 構文をサポートしています。
このためデータの抽出条件を与え、必要な情報を引き抜く等の操作が簡単に行えます。
SQLite を用いているので、テーブルのスキーマの定義やクエリーの構文などについては、SQLite の説明に任せることにして、ここでは HTML からそれを利用する方法を紹介します。
ここで作るプログラムは次の通りです。
HTML ページ上にボタンが三つ並んでいます。
左のボタンから順に、そのイベントハンドラにて「データベース及びテーブルを作成」「レコードをインサート」「レコードの読み取り」の操作を行います。
データベース作成前に、Google Chrome の Developer Tools で Web SQL リソースを確認します。(Chrome で Developer Tools の表示は F12)
まだ何もしていないので何も登録されていません。
"Create Table" ボタンを押すと、データベース "Test1" の下に "meibo" テーブルが作成されます。
この時点でテーブルは空 (Empty) です。
"Insert Data" ボタンを押すと、"meibo" テーブルにレコードが一件挿入されます。
ちなみに、このときに同時に sqlite_sequence テーブルに AUTOINCREMENT 型の管理データも作成されます。
"Read Data" ボタンではテーブル内からデータを読み取り、alert ポップアップに表示します。
ではこのコードを見ていきましょう。
まず HTML は次の通り、特に何もありません。ボタンを三つ配置して、それぞれ ID を button1, button2, button3 と割り振っているのと、 jQuery を取込んでいるだけです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//..(省略)../jquery.min.js"></script>
<script src="test1.js"></script>
</head>
<body>
<div>
<button id="button1">Create Table</button>
<button id="button2">Insert Data</button>
<button id="button3">Read Data</button>
</div>
</body>
</html>
次に JavaScript のコードは次の通り。
$(function(){
var dbName = 'Test1';
var version = '1.0';
var displayName = 'Test1';
var estimatedSize = 65536;
function createTableIfNotExists(){
var db = openDB();
db.transaction(
function(trans){
trans.executeSql(
'CREATE TABLE IF NOT EXISTS meibo '
+ '( id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, '
+ ' name TEXT NOT NULL,'
+ ' email TEXT NOT NULL);'
);
}
);
}
function insertData(){
var db = openDB();
db.transaction(
function(trans){
trans.executeSql(
'INSERT INTO meibo (name, email) '
+ 'VALUES ("Ichiro","ichiro@example.com");'
);
}
);
}
function getData(){
var db = openDB();
db.transaction(
function(trans){
trans.executeSql(
'SELECT * FROM meibo;',
[],
function(trans, r){
for(var i=0; i<r.rows.length; i++){
alert(
'id=' + r.rows.item(i).id
+ ' name=' + r.rows.item(i).name
+ ' email=' + r.rows.item(i).email
);
}
}
);
}
);
}
function openDB(){
return openDatabase(
dbName,
version,
displayName,
estimatedSize);
}
$('#button1').click(function(){
createTableIfNotExists();
});
$('#button2').click(function(){
insertData();
});
$('#button3').click(function(){
getData();
});
});
テーブルの作成、レコードの挿入、セレクト、全て executeSql メソッドで実行可能です。
尚、Chrome でテストデータを挿入するためには次のように SQL を直接実行できます。
