Web/DB プログラミング徹底解説

ホーム > HTML5 入門 > HTML5 Web SQL Database の使い方

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 ページ上にボタンが三つ並んでいます。

Web SQL Database の使い方

左のボタンから順に、そのイベントハンドラにて「データベース及びテーブルを作成」「レコードをインサート」「レコードの読み取り」の操作を行います。

データベース作成前に、Google Chrome の Developer Tools で Web SQL リソースを確認します。(Chrome で Developer Tools の表示は F12)

Web SQL Database の使い方

まだ何もしていないので何も登録されていません。

"Create Table" ボタンを押すと、データベース "Test1" の下に "meibo" テーブルが作成されます。

Web SQL Database の使い方

この時点でテーブルは空 (Empty) です。

"Insert Data" ボタンを押すと、"meibo" テーブルにレコードが一件挿入されます。

Web SQL Database の使い方

ちなみに、このときに同時に sqlite_sequence テーブルに AUTOINCREMENT 型の管理データも作成されます。

Web SQL Database の使い方

"Read Data" ボタンではテーブル内からデータを読み取り、alert ポップアップに表示します。

Web SQL Database の使い方

ではこのコードを見ていきましょう。

まず 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>

jQuery については jQuery 入門 などを参考にしてください。

次に 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 を直接実行できます。

Web SQL Database の使い方

Web SQL Database の使い方

スポンサーリンク
ホーム > HTML5 入門 > HTML5 Web SQL Database の使い方