Web SQL Database APIによるデータベース・アクセス (5/6)
作成:2010-07-17 17:56
更新:2010-07-17 17:56
更新:2010-07-17 17:56
■transactionで実行された処理を考える
今回、transactionを使ってデータベースにアクセスしているのは、「addData」と「showAllData」の2つの関数だけです。これらについて、もう少し詳しく見てみましょう。
ここでは、db.transaction内にコールバック関数が用意されていますね。以下のようなものです。
データの一覧を取得し表示するのがshowAllDataです。このshowAllDataでは、よく見ると2つのtransactionが実行されていますね。1つ目のtransactionでは、以下のような処理が実行されています。
テーブルとは、保管するデータの細かな仕様などを決めたものです。データを保管すると言っても、何でもかんでも放り込んでおけばいいというわけではありません。多くのデータベースでは、あらかじめデータの形式が決まっており、それに従ってデータを保管していきます。
SQLデータベースでは、保管するデータを「テキストの値のNAMEという項目、整数の値のIDという項目、時間の値のTIMEという項目……」といった具合に、1つ1つの項目を細かく定義したテーブルを作成します。そして、そのテーブルの中に、具体的なデータを追加するのです。テーブルは、データベースの中に複数作って置けます。こうして1つのデータベースの中に、何種類ものデータをきれいに整理して保管できるようになっているのです。
このテーブルが用意されていないと、データは保管できません。先ほど、INSERT INTOコマンドでデータを保管する方法を説明しましたが、これはすべて「テーブル」に保存をしました。つまり、事前にテーブルを用意しておかないといけないのです。このテーブルの作成をするのがCREATE TABLEです。
ただし! 注意しないといけないのは、「既にテーブルがあると、これはエラーになる」という点です。そこで、コマンド内に「IF NOT EXISTS」というものを付け足してあります。これは「もし、その後にある○○が存在しなければ」という条件を設定するものです。これにより、MsgDataテーブルが存在しない場合にのみテーブルの作成を行うようになります。
showAllDataで行っているもう1つの処理は、全データを取得するためのものです。以下の部分です。
rowsのitemで取り出されるのは、保管されているデータをオブジェクトにまとめたものです。各項目は、項目名のプロパティとして値が保管されています。ということは、rs.rows.item(i)で取り出されたオブジェクトから、name、memo、timeといったプロパティの値を取得すれば、保管してあるデータが得られる、ということになります。
データベースアクセスの基本ともいえる「テーブルの作成」「データ一覧の取得」「データの追加」について、ざっと理解できたでしょうか。
※addDataでのデータの追加
ここでは、db.transaction内にコールバック関数が用意されていますね。以下のようなものです。
tx.executeSql(ここでは、実行するSQLステートメントにINSERT INTO MsgData VALUES(?, ?, ?)というものが用意され、これにはめ込む値として[name, message, time]という配列が用意されています。これは整理すると、以下のようなステートメントになります。
'INSERT INTO MsgData VALUES(?, ?, ?)',
[name, message, time],
function(tx, rs) {……成功時の処理……},
function(tx, error) {……失敗時の処理……});
}
INSERT INTO MsgData VALUES(name, message, time)これは、「INSERT INTO」というSQLのコマンドです。このコマンドは、指定したテーブル(<table>じゃなくて、データベースに用意された、データを格納するためのものです)にデータを追加する働きをします。このコマンドは、
INSERT INTO テーブル名 VALUES ( 各項目の値 );整理するとこんな形で記述をします。後述しますが、SQLデータベースは、データベースの中にテーブルというものが用意され、そこにデータが保管されます。このINSERT INTOにより、データを指定のテーブルに追加できるのです。
※テーブルの生成
データの一覧を取得し表示するのがshowAllDataです。このshowAllDataでは、よく見ると2つのtransactionが実行されていますね。1つ目のtransactionでは、以下のような処理が実行されています。
tx.executeSql(なんか長ったらしいですが、要するにここでは、以下のようなSQLステートメントを実行していることがわかるでしょう。
'CREATE TABLE IF NOT EXISTS MsgData(
name TEXT,
message TEXT,
time INTEGER)',
[]);
CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)これは「CREATE TABLE」というコマンドです。これは、データベースに「テーブル」と呼ばれるものを作成するためのものです。
テーブルとは、保管するデータの細かな仕様などを決めたものです。データを保管すると言っても、何でもかんでも放り込んでおけばいいというわけではありません。多くのデータベースでは、あらかじめデータの形式が決まっており、それに従ってデータを保管していきます。
SQLデータベースでは、保管するデータを「テキストの値のNAMEという項目、整数の値のIDという項目、時間の値のTIMEという項目……」といった具合に、1つ1つの項目を細かく定義したテーブルを作成します。そして、そのテーブルの中に、具体的なデータを追加するのです。テーブルは、データベースの中に複数作って置けます。こうして1つのデータベースの中に、何種類ものデータをきれいに整理して保管できるようになっているのです。
このテーブルが用意されていないと、データは保管できません。先ほど、INSERT INTOコマンドでデータを保管する方法を説明しましたが、これはすべて「テーブル」に保存をしました。つまり、事前にテーブルを用意しておかないといけないのです。このテーブルの作成をするのがCREATE TABLEです。
CREATE TABLE テーブル名 ( 項目名 タイプ, 項目名 タイプ, …… )これは、このようにして作成をします。テーブル名の後に()をつけ、そこに各項目の名前とタイプ(値の種類)を指定していくのです。
ただし! 注意しないといけないのは、「既にテーブルがあると、これはエラーになる」という点です。そこで、コマンド内に「IF NOT EXISTS」というものを付け足してあります。これは「もし、その後にある○○が存在しなければ」という条件を設定するものです。これにより、MsgDataテーブルが存在しない場合にのみテーブルの作成を行うようになります。
※データ一覧の取得
showAllDataで行っているもう1つの処理は、全データを取得するためのものです。以下の部分です。
tx.executeSql('SELECT * FROM MsgData', [], ……略…… );ここでは「SELECT * FROM MsgData」というSQLステートメントを用意しています。これは以下のようにして、指定のテーブルからデータを取得するためのものです。
SELECT * FROM テーブル名これで正しくデータが取得できた際には、引数に用意した関数が呼び出されます。ここでは以下のような処理を行っています。
function(tx, rs) {removeAllDataを呼び出した後、繰り返しを使ってゼロからrs.rows.length未満の間、処理を行っています。ここでは、rs.rows.item(i)というようにしてデータを取り出し、showDataでデータの表示を行っています。
removeAllData();
for(var i = 0; i < rs.rows.length; i++) {
showData(rs.rows.item(i));
}
}
rowsのitemで取り出されるのは、保管されているデータをオブジェクトにまとめたものです。各項目は、項目名のプロパティとして値が保管されています。ということは、rs.rows.item(i)で取り出されたオブジェクトから、name、memo、timeといったプロパティの値を取得すれば、保管してあるデータが得られる、ということになります。
データベースアクセスの基本ともいえる「テーブルの作成」「データ一覧の取得」「データの追加」について、ざっと理解できたでしょうか。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※データの追加 function addData(name, message, time) { db.transaction(function(tx) { tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?)', [name, message, time], function(tx, rs) { alert("SUCCESS!!"); }, function(tx, error) { alert(source + "::" + message); }); } ); } ※全データの取得 function showAllData() { db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)',[]); tx.executeSql('SELECT * FROM MsgData', [], function(tx, rs) { removeAllData(); for(var i = 0; i < rs.rows.length; i++) { showData(rs.rows.item(i)); } }); }); }
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る