おしブロ from STONEWEB

おしい県でWebに携わって働く人のブログ from ストーンウェブ。IT&Web界隈に関する役に立ちそうなことをまとめていきます。2013年1月運営開始。

移転しました。

約3秒後に自動的にリダイレクトします。

「日経ソフトウェア2013年2月号」の「HTML5スマホアプリ開発入門」を勉強してみた。

今回は「Web SQL Database API」を使ったデータベースアプリの作り方の紹介です。

「Web SQL Database API」は、HTML5(W3Cが策定)の仕様から外されてしまっている為か、Googleさんで検索してみても、あまり情報が出て来ないのですが、この記事によるとGoogleChromeやAppleSafariなどのブラウザに実装されてて問題なく動くとのことで、勉強しといても損はないかなと思いつつ読んでみました。

 

記事に載っていたサンプルコードを参考にしつつ、ちょいと修正したものを書いておこうと思います。

 

<!DOCTYPE html><html lang="ja">

<head>

<meta charset="utf-8" />

<script>

 

<!-- ブラウザがWeb SQL Databaseに対応しているかどうかを判定 -->

window.onload = function () {

 if (window.openDatabase == undefined) {

  alert("Web SQL Databaseに対応していません");

  return;

 }

 

<!-- データベースをオープンしてデータベースオブジェクトを取得 -->

 var dbName = 'test';

 var displayName = 'TestDB';

 var dbSize = 1024 * 100;

 var db = openDatabase(dbName, '', displayName, dbSize);

 

<!-- データベースオブジェクトのtransactionメソッドのコールバック関数でexecuteSqlメソッドを実行 -->

 db.transaction(

  function (tr) {

   tr.executeSql("CREATE TABLE IF NOT EXISTS persons(name TEXT, fName TEXT, age INTEGER)");

   tr.executeSql("INSERT INTO persons(name, fName, age) VALUES('シンジ', '碇', '14')");

   tr.executeSql("INSERT INTO persons(name, fName, age) VALUES('ゲンドウ', '碇', '48')");

   tr.executeSql("INSERT INTO persons(name, fName, age) VALUES('レイ', '綾波', '14')");

   tr.executeSql("INSERT INTO persons(name, fName, age) VALUES(?,?,?)", ['ユイ','碇',27]);  

  }

 );

 

 var select = document.querySelector('#select');

 var textBox1 = document.querySelector('#textBox1');

 

<!-- SELECTボタンがクリックされた時に実行する処理 -->

 select.addEventListener('click',

  function() {

   db.transaction(

    function (tr) {

     tr.executeSql("SELECT * FROM persons where fName=?", [textBox1.value],

      function(tr, rs) {

       for (var i=0; i<rs.rows.length; i++) {

        var row = rs.rows.item(i);

        alert(row.fName + ' ' + row.name + ':' + row.age + '歳');

       }

      }

     );

    }

   );

  }, false

 );

}

</script>

</head>

<body>

<input type="text" id="textBox1" placeholder="family name">

<input type="button" id="select" value="SELECT">

</body>

</html>

© STONEWEB