HTML5 で広がるWebアプリの世界

| No Comments | No TrackBacks

HTML5 では、ローカルストレージ(ローカル側にデータを格納)のための方法が多く定義されています。

実際に、iPhone(Safari)では既に多くの機能が使用できるため、単純なWebアプリであっても、オフライン利用や、キャッシュによる高速化と言った事が可能です。

ということで、今回は、ストレージ部分にフォーカスして投稿しておきます。(主目的は自分の備忘録w)

 

//
// HTML5 - Offline Web Applications
//

■Web Storage
---
 データをブラウザに蓄積する仕組みで、キー、ペアの対となるデータを格納することができる。
 クッキーよりも大きなデータを保存することができるため、オフラインアプリケーションの開発に役立つ。

 [1] sessionStorage
  キーと値のペアを永続的に保存できる。
  ただし、sessionStorageはウィンドウごとにストレージが異なり、ウィンドウが閉じられるとデータは削除される。
  ドメインごとにストレージは異なる。
   http://ayuta.co.jp/html5-samples/storage/simple-sessionStorage/sessionStorage.html

  (1) setItemメソッド
   キー、値のペアをセットする
    sessionStorage.setItem(key, value);

  (2) getItemメソッド
   キーから値を取得する
    sessionStorage.getItem(key)

  (3) removeItemメソッド
   指定されたキーのペアを削除する
    sessionStorage.removeItem(key)

  (4) clearメソッド
   全てのデータを削除する
    sessionStorage.clear()

  (5) lengthプロパティ
   sessionStorageに格納されているペアの数
    sessionStorage.length

  (6) keyメソッド
   n 番目の key を返す。
    sessionStorage.key(n)

 [2] localStorage
  キーと値のペアを永続的に保存できる。
  sessionStorageとの違いはウィンドウが閉じられてもデータは削除されない点にある。
  ドメインごとにストレージは異なる。
   http://ayuta.co.jp/html5-samples/storage/simple-localStorage/localStorage.html

  (1) setItemメソッド
   キー、値のペアをセットする
    localStorage.setItem(key, value);

  (2) getItemメソッド
   キーから値を取得する
    localStorage.getItem(key)

  (3) removeItemメソッド
   指定されたキーのペアを削除する
    localStorage.removeItem(key)

  (4) clearメソッド
   全てのデータを削除する
    localStorage.clear()

  (5) lengthプロパティ
   localStorageに格納されているペアの数
    localStorage.length

  (6) keyメソッド
   n 番目の key を返す。
    localStorage.key(n)

■Offline Web Applications
---
 [1] SQL
  SQL を用いたデータ保存を実現。
  ※2009/12/25 現在 Safari のみ?(Chromeは未確認)

  (1) openDatabase
   window オブジェクトに定義されている。
   データベースを定義し、実際に使うために最初に実行するメソッド。

   使用方法:
    var db = openDatabase(DBName, Version, ViewName, MaxSize);
     DBName: データベース名
     Version: データベースバージョン
     ViewName: 表示名
     MaxSize: データベースの最大サイズ(バイト)

   例:
 var db = openDatabase("DB", "1.0", "Custom Database", 10000000);
   ※このメソッドが存在しない場合、SQLはサポートされていない

  (2) transaction/executeSql
   transactionメソッドはopenDatabaseで生成したオブジェクトに定義されるメソッド。
   SQL はこのメソッドのコールバック中で実行する。
   実際には、transactionの第一引数に定義されるexecuteSql メソッドで実行する。
   SQL は次の特徴を持つ。
    ・ドメインごとに保存される永続データ
    ・SafariではSQLiteが使用されている
    ・2009/12/25 現在サポートブラウザは少ない(Safari, Chrome)

   使用方法:
    ・transaction
     db.transaction(FUNC, ERROR, SUCCESS);
      FUNC: トランザクション処理
      ERROR: エラーコールバック
      SUCCESS: サクセスコールバック

    ・executeSql
     db.transaction(function(tx) {
      tx.executeSql(SQL, PARAMS, SCB, ECB);
     });
      SQL: 実行するSQL文字列
      PARAMS: 値の配列
      SCB: サクセスコールバック
      ECB: エラーコールバック

   例:
 db.transaction(function(tx) {
  tx.executeSql("SELECT DATA FROM CUSTOM_TABLE WHERE ID=?", [id], function(tx, rs) {
   var row = rs.rows.item(0);
   return(row.data);
  }, function(tx, error) {
   alert("error!");
  });
 });

  (3) changeVersion
   changeVersionメソッドはexecuteSqlメソッド同様、transactionの第一引数に定義される。
   データベースの定義を変更(バージョン変更)したい場合に使用します。

   使用方法:
 db.changeVersion(OLD_VERSION, NEW_VERSION, FUNC, ERROR, SUCCESS);
     OLD_VERSION: 以前のデータベースバージョン
     NEW_VERSION: 新しいデータベースバージョン
     FUNC: トランザクション処理
     ERROR: エラーコールバック
     SUCCESS: サクセスコールバック

   例:
 db.changeVersion("1.0", "2.0", function(tx) {
     // 変更処理
    }, function(error) {
     // エラー処理
    }, function() {
     // サクセス処理
    });

〜〜〜サンプル〜〜〜
var dbWrapper = {
 initialize: function() {
  if (window.openDatabase) {
   try {
    this.db = openDatabase("DAisdb", "1.0", "DA INSUITE(R)Enterprise Web Storage", 10000000);
   } catch (e) {
   }
  }
 },
 getTime: function() {
  var date = new Date();
  var time = parseInt(date.getTime() / 1000, 10);
  return(time);
 },
 select: function(table, params, success, error) {
  var id  = parseInt(params.id, 10);
  var type = parseInt(params.type, 10);
  if (this.db) {
   this.db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM " + table + " WHERE ID=? AND TYPE=?", [id, type], function(tx, rs) {
     var row = rs.rows.item(0);
     return(row.data);
    }, error);
   });
  }
 },
 update: function(table, json) {
  var id = parseInt(json.id, 10);
  var type = parseInt(json.type, 10);
  var data = json.data;
  var modify = this.getTime();

  if (this.db) {
   this.db.transaction(function(tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS " + table + "(id INTEGER PRIMARY KEY,type INTEGER,modify INTEGER,data TEXT)", [], function(tx, rs) {
     tx.executeSql("DELETE FROM " + table + " WHERE ID=? AND TYPE=?", [id, type], function(tx, rs) {
     }, function(tx, error) {
      alert("delete failed.");
     });
     tx.executeSql("INSERT INTO " + table + " (id,type,modify,data) VALUES (?,?,?,?)", [id,type,modify,data], function(tx, rs) {
     }, function(tx, error) {
      alert("insert failed.");
     });
    }, function(tx, error) {
     alert("update failed.");
    });
   });
  }
 }
};
〜〜〜サンプル〜〜〜

 [2] Offline Application Caching API
  オフライン時にもコンテンツの表示に支障がないようキャッシュすべきファイルを指定する

  ・HTML
   <html manifest="cache.manifest">
   ※cache.manifest ファイルをマニフェストファイルとして定義する

  ・cache.manifest

〜〜〜サンプル〜〜〜
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png

NETWORK:
server.cgi
〜〜〜サンプル〜〜〜

   CACHE MANIFEST: キャッシュさせるリスト
   NETWORK: キャッシュさせないリスト

  ・.htaccessなど

〜〜〜サンプル〜〜〜
AddType text/cache-manifest .manifest
〜〜〜サンプル〜〜〜

  ・event-source?
   HTML 5 日本語公式サイトに、「event-source 要素は、サーバがWebページに更新情報を連続的に流すことができるようにする HTML 5 の新機能です。」とあるが、詳細不明。

〜〜〜サンプル〜〜〜
<event-source src="server.cgi">
〜〜〜サンプル〜〜〜

■参考
---
 http://www.html5.jp/trans/w3c_webstorage.html
 http://ayuta.co.jp/html5-samples/index.html
 http://d.hatena.ne.jp/amachang/20080327/1206607704

広島ブログ

No TrackBacks

TrackBack URL: http://mt.himawari-dream.com/mt-tb.cgi/524

Leave a comment

About this Entry

This page contains a single entry by kado published on 2010年7月17日 10:28.

MogileFS を試してみた was the previous entry in this blog.

Apache Hadoop について調べてみる(継続中) is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.