データベースを作成する
WebブラウザーからJavaScriptでSQLiteを操作するには、処理を逐次実行するのではなく、Webブラウザーがデータベースエンジンに接続する準備ができた後で呼び出されるメソッドを「コールバック関数」（つまり非同期処理）として記述します。PHPでSQLiteを扱うのに比べるとややこしいですが、データベースに接続する準備ができるまでWebブラウザーが無反応になる、といった現象が起きないように、非同期処理として記述するのです。
JavaScriptでローカルデータベースを作成するには、 openDatabase(<データベース名>) を使います。引数で指定したデータベースが存在しないときは新規に作成され、作成済みの場合は既存データベースをオープンされます。データベースオブジェクトを openDatabase() で作成（またはオープン）し、データベースオブジェクトの transaction(<コールバック関数>[<エラーハンドラ―関数>][<正常終了時のコールバック関数>])メソッドで、SQLを実行する準備ができたときに呼び出される関数を指定し、コールバック関数内で、executeSql(<SQL文>)メソッドを使う、というのが何らかのSQL文を実行するときの流れになります。
transaction()メソッドの第2引数には、テーブルがすでに存在しているのに重複して作成しようとした場合などに呼び出されるエラーハンドラー関数を指定できます。エラーコードは、エラーハンドラ関数に渡されるオブジェクトの codeプロパティに格納されます。たとえば、テーブルが作成済みの codeプロパティは「1」です。
transaction() の3番目の引数にはSQLの処理が終わった後に実行する関数を指定できます。今回はテーブルを作成するだけなので、作成が完了した旨のメッセージを画面上に表示するようにします。
データベースを作成したら、データを保存する列（フィールド）名と型を指定して、テーブルを作ります。今回は、緯度、経度、時刻データを保存するために「gpstable」（GPSテーブル）というテーブルを作成しましょう。列（フィールド）名は「lat」「lng」「time」で、データ型は3つともREAL（実数）です。GPSテーブルを作成するSQL文は、以下のようになります。
CREATE TABLE gpstable(lat REAL, lng REAL, time REAL );
ここまでをまとめたものがサンプル04です。実行すると1回目は「データベースが作成された」というメッセージが、リロードして2回目の実行になると「データベースはすでにあります」というメッセージが表示されます。
データベースが新規に作成された場合の表示（左）とデータベースが作成済みの場合の表示（右）
●サンプル04のソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Safari + Database</title>
<style type="text/css"><!--
h1 { font-size:16pt; }
--></style>
<script type="text/javascript"><!--
// データベース作成
var myDB = openDatabase("testDB");
// ページが構築されたら処理を行う
window.onload = function(){
var ele = document.getElementById("msg");
myDB.transaction(
function(tx){
tx.executeSql('CREATE TABLE gpstable(lat REAL, lng REAL, time REAL );');
},
function (err){
if (err.code == 1) {
ele.innerHTML = "データベースtestDBはすでにあります";
}else{
ele.innerHTML = "データベースエラーです : "+err.code;
}
},
function (){ ele.innerHTML = "testDBを作成しました"; }
);
}
// --></script>
</head>
<body>
<h1>Database作成</h1>
<div id="msg"></div>
</body>
</html>
