HTML5 WebDatabases を使用したシンプルな TODO リスト

Paul Kinlan

はじめに

ウェブ データベースは HTML5 の新機能です。ウェブ データベースは、ユーザーのブラウザ内でホストされ、保持されます。開発者が豊富なクエリ機能を備えたアプリケーションを作成できるようになることで、オンラインとオフラインの両方で動作する新しいタイプのウェブアプリケーションが登場することが期待されます。

この記事のサンプルコードは、非常にシンプルな ToDo リスト マネージャーを作成する方法を示しています。HTML5 で利用可能な機能の概要を説明します。

前提条件

このサンプルでは、名前空間を使用してデータベース ロジックをカプセル化します。

var html5rocks = {};
html5rocks.webdb = {};

非同期とトランザクション

ウェブ データベース サポートを使用している場合のほとんどは、非同期 API を使用します。非同期 API は非ブロッキング システムであるため、戻り値でデータを取得するのではなく、定義されたコールバック関数にデータを配信します。

HTML を介したウェブ データベースのサポートはトランザクション ベースです。トランザクションの外部で SQL ステートメントを実行することはできません。トランザクションには、読み取り/書き込みトランザクション（transaction()）と読み取り専用トランザクション（readTransaction()）の 2 種類があります。読み取り/書き込みではデータベース全体がロックされます。

ステップ 1. データベースを開く

データベースにアクセスするには、データベースを開く必要があります。
データベースの名前、バージョン、説明、サイズを定義する必要があります。

html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}

html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}

html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

ステップ 2. テーブルの作成

テーブルを作成できるのは、トランザクション内で CREATE TABLE SQL ステートメントを実行する場合のみです。

body の onload イベントでテーブルを作成する関数を定義しました。テーブルがまだ存在しない場合は、テーブルが作成されます。

テーブルの名前は todo で、3 つの列があります。

  • ID - 連続する ID 列
  • todo - アイテムの本文であるテキスト列
  • added_on - やることリストの作成日時
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS " +
                "todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
});
}

ステップ 3. テーブルへのデータの追加

私たちは ToDo リスト マネージャーを構築しているため、ToDo アイテムをデータベースに追加できることが非常に重要です。

トランザクションが作成され、トランザクション内で todo テーブルへの INSERT が実行されます。

executeSql には、実行する SQL とクエリをバインドするパラメータ値の複数のパラメータが渡されます。

html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var addedOn = new Date();
tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
    [todoText, addedOn],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

ステップ 4. テーブルからのデータの選択

データがデータベースに保存されたので、データを取得する関数が必要です。Chrome では、ウェブデータベースは標準の SQLite SELECT クエリを使用します。

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
    html5rocks.webdb.onError);
});
}

このサンプルで使用されているこれらのコマンドはすべて非同期であるため、トランザクションまたは executeSql 呼び出しからデータが返されません。結果は成功コールバックに渡されます。

ステップ 4a. テーブルからのデータのレンダリング

テーブルからデータが取得されると、loadTodoItems メソッドが呼び出されます。

onSuccess コールバックは 2 つのパラメータを取ります。1 つ目はクエリのトランザクション、2 つ目は結果セットです。データを反復処理するのは非常に簡単です。

function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}

todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>" + row.todo + 
        " [<a href='javascript:void(0);' onclick=\'html5rocks.webdb.deleteTodo(" + 
        row.ID +");\'>Delete</a>]</li>";
}

このメソッド呼び出しの効果は、ToDo リストが「todoItems」という DOM 要素にレンダリングされることです。

ステップ 5. テーブルからのデータの削除

html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
    html5rocks.webdb.onSuccess,
    html5rocks.webdb.onError);
});
}

ステップ 6. すべてを接続する

ページが読み込まれたら、データベースを開き、テーブルを作成します（必要に応じて）。また、データベースにすでに存在する ToDo アイテムをレンダリングします。

....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>

<body onload="init();">

DOM からデータを取得する関数が必要なので、html5rocks.webdb.addTodo メソッドを呼び出します。

function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}