Web SQL Databaseを使った簡易データベースサイトの作成

データを取り扱うシステムを組もうとした時、システムに表示するデータをどこから参照するか考えます。コードに直打ちする場合やCSVファイルなどのテキストデータから持ってくる場合もあるでしょう。けれど、大抵はデータの取り扱いやすさからデータベースを使うことになるのではないでしょうか。

過去記事でLAMP環境構築の一環として「MariaDB」について触れたことがありましたが、今回はブラウザの機能として用意されていてソフトウェアのインストールが不要なデータベース「Web SQL Database」を使って簡易データベースサイトを作ってみようというお話です。

Web SQL Databaseとは

ブラウザの機能として用意されているため、使用にあたってソフトウェアをインストールする必要がなくデータベースにアクセスするための基本構文さえ抑えていればすぐに始められます。

また、Webサーバサイドで動作するデータベースと異なり、本題のデータベースはCookieと同様クライアントサイドに格納されます。そのため、同一のブラウザでは格納したデータを参照できますが、複数のブラウザ間で同じデータを参照したい場合は注意が必要です。その際はWebサーバサイドで動作するデータベースを用いたほうが良さそうです。

デモページ

とりあえずのデモページはこちらです。

デモページにアクセスすると以下の処理を行います。

• サンプルデータベースの準備
• サンプルテーブルの作成
• データの挿入、更新、削除、参照

キャプチャ

デモページのキャプチャです。正常に動作すると以下のような画面が表示されます。

使い方

基本構文

Web SQL Databaseにアクセスするための基本構文は次のとおりです。使用言語はJavaScriptで記述し、プログラムを書き込む場所はHTML文<script>タグ内です。

// データベース接続
var sampledb = openDatabase('データベース名', '指定バージョン', 'テキスト説明', 'データベースサイズ');

// 実行
sampledb.transaction(
  function(tr){
    tr.executeSql('実行するSQL文', []); // []内にはSQL文中の"?"に対応する値を入れる
  },
  function(error){
    // エラー発生時の処理。必要に応じて書き足す
  },
  function(){
    // 正常終了時の処理。必要に応じて書き足す
  }
);

サンプルテーブルの作成

試しにデータベース「stars」を準備して下のようなテーブル「members」を作成してみました。

テーブル構造

テーブル内容

CRUD処理

以下にデモページで使用しているCRUD処理を抜粋して記述します。実行結果はデモページにて確認できます。

INSERT

db.transaction(
  function(tr){
    tr.executeSql('insert into members(name, age, afflication) values(?, ?, ?)', ['Rebecca', 18, 'bravo']);
  }
);

UPDATE

db.transaction(
  function(tr){
    tr.executeSql('update members set age=? where name=?', [44, 'Chris']);
  }
);

DELETE

db.transaction(
  function(tr){
    tr.executeSql('delete from members where name=?', ['Brad']);
  }
);

SELECT

db.transaction(
  function(tr){
    tr.executeSql('select name, age from members where afflication=?', ['bravo'],
      function(tr,rs){
        for(var i=0; i<rs.rows.length; i++){
          var row = rs.rows.item(i);
          var name = row.name;
          var age = row.age;
          /* 参照結果をつらつら整形 */
        }
      }
    );
  }
);

ブラウザからデータベースを操作する

作成したデータベースの操作はブラウザでも行うことができます。以下はChromeブラウザに格納したテーブルの閲覧方法についてです。

はじめにデベロッパーツール画面を開きます。タブ一覧より「Application」を選択してサイドメニューから「WebSQL/stars/members」の順にツリーを辿っていくとテーブルの内容を確認できます。

ブラウザに表示されたテーブルをみてみると「rowid」というフィールドが追加されているのがわかります。これはauto_increment属性を持ったユニークキーの位置付けとなっており、テーブル作成時に自動で追加される要素のようです。

データベース格納ディレクトリ場所

ちなみに、当サイトのデモページよりブラウザに保存されたデータベースは各々のOS環境では次のディレクトリ内に設置されています。

Macの場合

/Users/ユーザ名/Library/Application Support/Google/Chrome/Default/databases/file__0

Windows10の場合

C:¥Users¥ユーザ名¥AppData¥Local¥Google¥Chrome¥User Data¥Default¥databases¥https_haloechoes.com_0

さいごに

Web SQL Databaseについてデモページを交えた使用方法を書いてみました。

Webブラウザを介して使用する分にはその用途は限られてくるものの、ソフトウェアやプログラミング言語のインストールが必要なく手持ちのものだけでデータベースを扱うシステムを組むことができるため、条件が揃っていれば使い勝手の良い機能なのではないでしょうか。

これを使ってもう少し遊んでみようと思います。

参考サイト

• Introducing Web SQL Databases
• HTML5 – Web SQLデータベース