＠IT
アジャイル/DevOps
HTML5 + UX
“オフラインファースト”を実現する、ストレージ系...

“オフラインファースト”を実現する、ストレージ系APIライブラリ10選：UXClip（36）（3/3 ページ）

» 2013年09月18日 18時00分公開

[仲裕介，＠IT]

前のページへ 1|2|3 　　　　　　

JQuery-IndexedDB plugin

　jQueryを利用したIndexedDBのラッパーライブラリです。WebブラウザのIndexedDB APIをラッパーするため、先に紹介したLocalStorageのラッパーライブラリとは違い、IndexedDBをサポートするWebブラウザでしか動作しません。記述はjQueryに準拠しているため、jQuery経験者であれば導入は比較的容易だと思います。1つ前に紹介した、IndexedDBshimでも利用可能です。

(function(){
        //データベースの作成
        $.indexedDB("jquery_DB", {
                "schema": {
                        "4": function(versionTransaction){
                                versionTransaction.createObjectStore("user")
                        }
                }
        }).transaction(["user"]).then(function(){
                //done
                console.log("データベース処理が完了しました")
        }, function(){
                //fail
                console.log("データベース作成でエラーが発生しました")
        }, function(trans){
                //progress
        })
        //オブジェクトストア取得
        var objectStore = $.indexedDB("jquery_DB").objectStore("user");
        //データ追加
        for(var c = 0;c < 10;c++){
                objectStore.add({
                                "name": "user" + c,
                                "like": "html5"                
                        }, c).then(function(){
                                //done
                                console.log("データを追加しました")
                        }, function(){
                                //fail
                                console.log("データの追加でエラーが発生しました")
                })
        }
})()

コード実行結果

　jquery_DBというデータベースを作成、そのデータベースにuserというオブジェクトストアを作成し、10個のデータを追加しています。IndexedDBは、LocalStorageやSessionStorageに比べて複雑です。利用用途に合わせて選択しましょう。

PouchDB

　PouchDBは、IndexedDBのラッパーライブラリです。オンライン時にPouchDB-ServerやCloudantとデータ同期できるのが特徴です。オフラインWebについては、ローカルでのデータ保持とサーバとの同期が重要な機能となるため、開発効率の向上が期待できそうです。また、Backbone.jsに組み込むためのBackBone PouchDBというアダプタがあり、Backbone localStorage Adapterと同様に利用可能です。PouchDBのサンプルソースについては、公式Webサイトにデモアプリ開発のチュートリアルが掲載されているので、そちらを参考にしてくだい。

(function(){
        //データベースを作成
        var db = new PouchDB('sample')
        var remoteCouch = false
        addData('テストテスト')
        function addData(text) {
          var data = {
            _id: new Date().toISOString(),
            title: text,
            completed: false
          };
          db.put(data, function callback(err, result) {
            if (!err) {
              console.log('Successfully posted a data!');
            }
          });
        }
})()

コード実行結果

　sampleというデータベースを作成し、その中にドキュメントを作成、データを追加するという公式Webサイトのサンプルそのままです。PouchDBは、CouchDBというドキュメント指向データベースを基に作られているため、オブジェクトストアという概念は出てこないのが特徴です。

DB.JS

　IndexedDBのラッパーライブラリです。シンプルなラッパーライブラリで、前に紹介したPouchDBよりも使いやすいです。こちらもWebサイト上で詳しく利用方法が解説されています。

(function(){
    //データベース作成
    db.open( {
        server: 'sample_DB.js',
        version: 1,
        schema: {
            people: {
                key: { keyPath: 'id' , autoIncrement: true },
                indexes: {
                    firstName: { }
                }
            }
        }
    } ).done( function ( s ) {
        //データを追加
        s.people.add( {
            firstName: 'Yusuke',
            lastName: 'NAKA',
        } ).done( function ( item ) {
            // 完了
        } );
    } );
})()

コード実行結果

　データベースを作成し、その中にオブジェクトストレージを作成、データを追加しています。JQuery-IndexedDB pluginと使い方はほとんど同様です。

KageDB

　日本人が開発したIndexedDBのラッパーライブラリです。日本語のAPIリファレンスなどが充実しています。デモプログラムのTODOリストも見やすく、IndexedDBをこれから使い始める方にはお薦めです。

(function(){
        if (KageDB.isAvailable()) {
            // 利用できる場合
            //データベース定義
                var test = new KageDB({
                        name:'KageDB',
                        migration: {
                                1: function (ctx,next) {
                                        //userStoreを作成しnameIndexを作成する
                                        var db = ctx.db
                                        var user = db.createObjectStore('user', { keyPath: 'timestamp', autoIncrement: false});
                                        user.createIndex("name", "name", { unique: false })
                                        next()
                                }
                        }
                })
        
                addData()        
                getData()
                //userStoreにデータを追加する
                function addData(){
                        test.tx(['user'],'readwrite', function(tx,user) {
                                user.add({ name:'Yusuke NAKA',like: 'html5',timestamp: new Date().getTime()}, function (key) {
                                        console.log("done, key=" + key)
                                })
                        }, function (event) {
                                console.error(event.kage_message)
                        })
                }
                //データの取り出す
                function getData(){
                        test.tx(['user'], function(tx,user) {
                                user.fetch(function(value) {
                                        console.log('取り出したデータ：' + JSON.stringify(value))
                                        this.key = value
                                })
                        }, function (event) {
                                console.error(event.kage_message)
                        })
                }
        } else {
            // 利用できない場合
                console.log('IndexedDBが利用できません。')
        }
})()

コード実行結果

　データベースを作成し、オブジェクトストアを作成、データを追加・取り出ししています。先ほどと同様、JQuery-IndexedDB pluginと使い方はほとんど同じです。

おわりに

　オフラインストレージを利用したWebアプリケーションは、一度公開してしまうとクライアント側に何らかのデータが保持され、バージョンアップの際はデータのマイグレーションなども考慮しなくてはなりません（ネイティブアプリっぽくなります）。そのため、設計段階からどのようなライブラリを使うかは、きちんと吟味する必要があります。本稿がその助けになると幸いです。

驍ｵ�ｺ髦ｮ蜻ｻ�ｿ�ｽ鬯ｨ�ｾ�ｽ�｣鬮ｴ莠･�ｳ�ｨ�ｽ蝣､�ｸ�ｲ驕抵ｿｽﾂ�ｽ�｣鬮ｴ驛∵ｭ難ｿｽ�ｨ陋滂ｿｽ�ｽ�ｺ闕ｵ譏ｴ�樣Δ譎｢�ｽ�ｩ驛｢譎｢�ｽ�ｼ驛｢譎冗樟�つ鬮ｦ�ｪ遶企ｦｴﾂ蜈ｷ�ｽ�ｻ鬯ｪ�ｭ�ｽ�ｲ驍ｵ�ｺ陷ｷ�ｶ�ｽ�ｽ New

著者プロフィール