「日経ソフトウェア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>

よかったらシェアしてね!

この記事を書いた人

ストーンウェブ代表のFujimoriです。Twitter界隈では「Fujimori@元経営者のマッチョマーケター」として活動しています。
私がWebに関するブログを書き始めたのは2013年1月で、おしブロ(おしい県でWebに携わって働く人のブログ)というブログをはてなブログに開設したのが始まりです。それ以前にも経営してた会社/店舗の代表ブログを書いていましたが「Web」というジャンルに限定するとそんな感じです。
このブログは、2021年10月におしブロの記事を丸々移行してスタートしましたので、2021年10月以前の記事はおしブロで書いたものになります。

目次
閉じる