Tag Archives: Webデータベース

[HTML5]アプリケーションキャッシュを使ってオフラインアプリ的なものを作ってみる

HTML5にはアプリケーションキャッシュなるものがあるらしいと。

明示的に特定のファイルをキャッシュさせることができるらしい。

(参考)
【特集】詳解! HTML 5と関連APIの最新動向 – Webアプリ開発編 (2) アプリケーションキャッシュ | エンタープライズ | マイコミジャーナル
WebTecNote – [HTML5] アプリケーションキャッシュの使い方

試しにWebデータベースを使って簡単なものを作ってみた。
まずは、マニフェストファイルを作成。
ここになにをキャッシュさせるか記載する。
こんな感じで。

sample.manifest

CACHE MANIFEST
# version 1.0
sample.htm

そして結構長くなってしまったがオフラインでも、単語を登録できる
アプリをつくってみた。
→サンプル

<!DOCTYPE html> 
<html manifest="sample.manifest">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript" />
<title>サンプル</title>
<script>
function init() {
    setInterval(function() {
        applicationCache.update();
    }, 5000);
    applicationCache.addEventListener("updateready", function() {
        if (confirm("アップデートを利用できます。リロードしますか?")) {
            applicationCache.swapCache();
            // リロード
            location.reload();
        }
    }, true);
}

function nav(){
  var nav = (navigator.onLine ? 'オンライン' : 'オフライン');
  document.getElementById("navigator").innerHTML = "接続状態: <b>" + nav + "</b>";
}

function regist(){
  var word = document.getElementById("text").value;
  var db;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("words", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
    } else {
       alert("データベースストレージはサポートされていません。");
    }
    db.transaction(
      function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS words(id INTEGER PRIMARY KEY, word TEXT)');
      }
    );
    db.transaction(
      function(tx) {
        tx.executeSql("INSERT INTO words VALUES (NULL, ?)", [word], 
          function(tx, rs) {alert("Success!"); document.getElementById("text").value = "";select();},
          function(tx, error){alert("insert failed.");}
        );
      }
    );
  } catch (error) {
    alert("ERROR");
  }
}

function select(){
  var db;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("words", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
    } else {
       alert("データベースストレージはサポートされていません。");
    }
    db.transaction(
      function(tx) {
        tx.executeSql("SELECT * FROM words;",[],
          function(tx, rs) {
              var content = "<table><tr><th>ID</th><th>WORD</th></tr>";
              for (var i = 0, n = rs.rows.length; i < n; i++) {
                content += "<tr><td>";
                content += rs.rows.item(i)['id'] + "</td><td>" + rs.rows.item(i)['word'] + "</td>";
                content += "</tr>";
              }
              content += "</table>";
              //var content = "ID: " + rs.rows.item(0)['id'] + "<br/>\n";
              //content += "ワード: " + rs.rows.item(0)['word'] + "<br/>\n";
              document.getElementById("content").innerHTML = content;
          },
          function(tx, error){
            alert("Select failed.");
          }
        );
      }
    );
  }catch(e){
    alert("ERROR");
  }
  nav();
}

</script>
</head>

<body onload="init()">
<div id="regist">
入力: <input type="text" id="text">
<button onclick="regist()">登録</button>
</div>
<br /><br />
<p><button onclick="select()">更新</button></p>
<div id="content">
</div>

<br /><br />
<div id="navigator">

</div>

<script>
nav();
</script>
</body>
</html>

(HTML5)Webデータベースを使ってみる

ブラウザにデータベース??って思ったけど、普通にデータベース。

こんなのありですか。

⇒サンプル
※ChromeとSafariでしか動かないっぽいが。

◇html

<body>

<h3>送信したキーワードをWebデータベースへストアします</h3>
<div>
<input type="text" value="" id="keyword" />
<button type="button" value="submit" onclick="sendkeyword()">送信</button> 
</div>

<div>
<button type="button" value="submit" onclick="countKeyword()">現在のキーワード数をカウント</button>
<p id="countKeyword"></p>
</div>
</body>

◇javascript

<script type="text/javascript">
var db;
 try {
    if (window.openDatabase) {
      db = window.openDatabase("testDB", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
    } else {
      alert("データベースストレージはサポートされていません。");
    }
  } catch (error) {
    alert(error.message);
  }

  function sendkeyword(){
    var keyword = document.getElementById("keyword").value;
    db.transaction(
      function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS KeyWordList(id INTEGER PRIMARY KEY, keyword TEXT)');
      }
    );
    db.transaction(
      function(tx) {
        tx.executeSql("INSERT INTO KeyWordList VALUES (NULL, ?)", [keyword]);
      }
    );
    
    document.getElementById("keyword").value = "";
    alert("Insertが完了しました。");
  }

  function countKeyword(){
    db.transaction(
      function(tx) {
        tx.executeSql("SELECT COUNT(*) as cnt FROM KeyWordList",[],
          function(tx, rs) {
              var wordcnt = rs.rows.item(0)['cnt'];
              document.getElementById("countKeyword").innerHTML = "現在のキーワード数は" + wordcnt + 'です。';
          }
        );
      }
    );
  }
</script>