Indexed Databaseの使い方 03

Indexed Databaseについての第三番目の記事になります。
正直ここまで書いて、後悔してます。
なんでかって？
あまり準備もせずに書いてるからです。
読者の皆様は、実際に動く例を見せてくれって思ってるかもしれません。
見せたいのも山々ですが、JavaScriptを独学で作ったので、非常に醜く、見せるのは恥ずかしいコードでして。
だからといって、この記事のために1からプログラム書くには、まだJavaScriptとjQuery勉強途中で微妙です。
ごめんね。
見たい方はコメント残して下さい。
読みにくいですよ。

前回までのおさらい。

var dbName = "databasename";
var dbVersion = 1;
var indexedDB = window.indexedDB || window.webkitindexedDB || window.mozIndexedDB;
var request = indexedDB.open(dbName,dbVersion);

request.onupgradeneeded() = function(event){

var db = event.target.result;

var objectStore = db.createObjectStore("objectstorename",{keyPath:"key"})

objectStore.createIndex("firstIndex","firstIndexKeyPath");

objectStore.add({firstIndexKeyPath:"firstIndexのバリュー",key:"キーのバリュー"})

}

request.onsuccess()=function(){

var db = event.target.result;

var transaction = db.transaction("objectstorename", "readwrite");

var objectStore = transaction.objectStore("objectstorename");

objectStore.add({firstIndexKeyPath:"firstIndexのバリュー",key:"キーのバリュー"});

transaction.oncomplete=function(event){

 alert("追加完了");

 }

transaction.onerror = function(event) {

 alert ('追加失敗.');

 }

db.close()

}

重ねて申し上げますが、Indexed DBの開発にはサーバーが必要です。

では、インストールされたDBを見てみましょう。

Google Chrome、FirefoxまたはOperaを使いましょう。

こんな記事書いていて、言うのもなんですが、Indexed DBはまだ使い物にならないので、システムのアーキテクチャー考え直した方が良いと思いますよ。

Google Chrome、Operaの場合はデベロッパーツールを開きます。

そして、開いたツールのResourcesをクリックします。

Firefoxの場合、Web Consoleですね。

Cookiesとか、Session Storage、Local Storageとかと一緒にIndexed DBというのがあると思います。

Indexed DBを開くと、データベースがあると思います。

なかったら、インストール出来てないか、ドメインが違う場合があります。

データベースをクリックするとObjectStoreがあります。

なかったら、上手くインストール出来てません。

その場合は、Versionをあげてonupgradeneededで再設定するか、データベースファイルを消して再インストールする必要があります。

データベースのファイルは環境によって違いますが、各ブラウザのプロファイルディレクトリーの下にあります。

各ObjectStoreを開いてみましょう。

db.createObjectStore("objectstorename",{keyPath:"key"})で作ったものです。

ObjectStore自体が、KeyValueペアのデータ構造を持っています。

ObjectStoreのKeyはKeyPathで指定したKeyです。

各ObjectStoreの下に、各Indexがあります。

この各IndexはValueのIndexになります。

もし、ObjectStore内のデータがkey:｛date: "2016-02-14", firstIndex:"pugera",secondIndex: "warosu"｝という連想配列だったとします。

このObjectStoreに、インデックスを付けます。

objectStore.createIndex("firstIndex","firstIndexKey");

objectStore.createIndex("secondIndex","secondIndexKey");

こうすることで、keyはもちろんのこと、firstIndexまたはsecondIndexを使って、該当のデータにアクセスすることができます。
この場合、dateのインデックスは付けていないので、dateでデータを参照する事は出来ません。

ObjectStoreのKeyPathを使ったアクセスの方法は、

request.onsuccess()=function(){//まずDBとの接続をして

var db = event.target.result;//DBを見つけて

var transaction = db.transaction("objectstorename", "readwrite");//ObjectStoreとの接続方法を指定し、

var objectStore = transaction.objectStore("objectstorename");//ObjectStoreを指定する。

var objectRequest = objectStore.get("key")//KeyPathのバリュー

//indexを用いる場合は

var findex = objectStore.index('firstIndex');

var firstRequest = findex.key('pugera')

var sindex = objectStore.index('secondIndex');

var secondRequest = findex.key('warosu');

};

こんな感じになります。

長くなったので、今回はこの辺で。

Indexed Databaseの使い方 02

前回の記事では、Indexed　DBの作成の仕方を説明しました。
今回の記事では、作成したデータベースにデータを入れていきます。

前回のおさらいです。

コードは以下になります。

var dbName = "databasename";
var dbVersion = 1;
var indexedDB = window.indexedDB || window.webkitindexedDB || window.mozIndexedDB;

var request = indexedDB.open(dbName,dbVersion);

request.onupgradeneeded() = function(event){

var db = event.target.result;
var objectStore = db.createObjectStore("objectstorename",{keypath:"key"})
objectStore.createIndex("firstIndex","firstIndexKeyPath");
}

少し話がずれますが、大事なことなので、作成環境について説明します。
Indexed DBの作成は、HTML5とJavaScriptですが、サーバーが必要になります。
何故なら、Indexed DBはSame Origin Policyを使っています。
これはドメインが違ったら、データベースにアクセス出来ないようになっている、ということです。
XSS（クロスサイトスクリプティング）予防のためです。


では、本題のデータを入れていく話に戻りましょう。

request.onupgradeneeded() = function(event){

var db = event.target.result;
var objectStore = db.createObjectStore("objectstorename",{keyPath:"key"})
objectStore.createIndex("firstIndex","firstIndexKeyPath");
objectStore.add({firstIndexKeyPath:"firstIndexのバリュー",key:"キーのバリュー"})
}

これは、こういう事です。
{objectstorename:{key:"キーのバリュー",firstIndexKeyPath:"firstIndexのバリュー"}}
この方法は、onupgradeneededの時に、データを入れる方法です。
が、基本的の形は一緒です。objectStore.add()で入れます。

いつもアップグレードする訳ではありません。
なので、普通の場合はこうなります。
request.onsuccess()=function(){
var db = event.target.result;
var transaction = db.transaction("objectstorename", "readwrite");
var objectStore = transaction.objectStore("objectstorename");
objectStore.add({firstIndexKeyPath:"firstIndexのバリュー",key:"キーのバリュー"});

transaction.oncomplete=function(event){
alert("追加完了");
}
transaction.onerror = function(event) {
alert ('追加失敗.');
}
db.close()
}
となります。

この時点で、もうよくわからない？
もがいてください笑

データベースの消し方はindexedDB.deleteDatabase("データベース名");となるので、

var req = indexedDB.deleteDatabase(dbName);

req.onblocked = function(){
 alert("Got Blocked on Deleting Database. Please close other tabs and reload.");
 };
req.onsuccess = function(){
 alert("Deleted Database Successfully");
}; 
req.onerror=function(){
 alert("Error on Deleting Database");
};
となります。

エラーやブロックされる場合は、実力行使ですね。

実際のファイルを消すという方法もあります。

Indexed Databaseの使い方 01

HTML5で使えるデータベースのIndexed DBの使い方のメモです。
2016年1月現在のAPIです。
現段階では準拠なので、正式決定の際に変更の場合があります。
APIが変更になったら、使えない場合があるので、確認してください。

まず始めに、データベースの名前を変数に入れます。
var dbName = "databasename";
次に、データベースのバージョンを整数で変数に入れます。
var dbVersion = 1;
小数点を入れると、動きません。
次にブラウザーが違う場合でも動くように
var indexedDB = window.indexedDB || window.webkitindexedDB || window.mozIndexedDB;
と、indexedDBの変数を作ります。

この三つが必要となる変数です。
では、Indexed DBに接続しましょう。

接続には、indexedDB.open（データベースの名前,データベースのバージョン）となります。
今回の例の場合は、
indexedDB.open(dbName,dbVersion)で開きます。
これを変数に入れます。
var request = indexedDB.open(dbName,dbVersion);

読者の中で、疑問に思う方もいるでしょう。
「え？データベース作ってないのに、接続すんの？」
はい、そうなんです。
無くても接続なんです。

ここが、第一関門。
request.onupgradeneeded()で、データベースを作成します。
これの理屈はこうです。
データベースが無い場合はバージョン0と認識されます。
また、もしデータベースが存在して、そのバージョンがdbVersionより小さい場合は、データベースのアップグレードが行われます。

では、データベースの中を作っていきましょう。
Indexed DBはMongo DBのようなモノです。
テーブルはありませんが、テーブルの変わりに、ObjestStoreというモノを作ります。
ObjectStoreは連想配列です。
createObjectStore()で、ObjectStoreを作ります。
createObjectStore("ObjectStore名",{keyPath:"keypathname"})
最初の引数は、ObjectStoreの名前、関係DBでいうテーブル名です。
その次の引数は、連想配列になります。Keyはkeypath（プライマリーキーみたいなモノ）、ValueはkeyPathの名前になります。
そして、ObjectStoreの中にcreateIndex()でIndexを作り、各Indexがデータフィールドとなります。
createIndex("インデックス","インデックスキーパス",{unique:false})は最低二つの引数を必要とします。最後の{unique:false}はオプションです。{unique:true}とすると、同じデータが入らなくなります。

request.onupgradeneeded() = function(event){
var db = event.target.result;
var objectStore = db.createObjectStore("objectstorename",{keyPath:"key"})
objectStore.createIndex("firstIndex","firstIndexKeyPath");
}

これで、データベースが出来ました。
次の記事でデータベースにデータの入れ方を書きます。

Windows Store Appについて 01

Windows Store Appを甘く見ていました。
よくよくよく、考えてみると、面白いですね。
まさに、モバイルアプリ戦国時代と例えることが出来ると思います。
どういうことか、説明しましょう。

モバイル端末の革命はiPhoneから始まったと考えてみましょう。
小型コンピュータであった携帯電話が、さらにコンピュータ化しました。
iモードなどでアプリをダウンロードし、携帯にアプリを入れる時代は来ていましたが、App Storeの登場により、モバイル端末アプリ市場が急速に拡大しました。
これに追随するように、Android端末が出ました。
スマートフォンの普及が進むにつれて、各陣営はアプリの市場を手に入れました。

また、開発者にとってもおいしい話でした。
アプリを販売し収入を得たり、アプリからの広告で収入を得たり、既存のWebアプリの市場を奪っていきました。
Webという共通のプラットフォームから脱却し、OS空間でのアプリという市場。OSの元締めからしたら、おいしい話です。

Windows8からモバイル端末を意識した、Store Appが出来ました。完全に、OS空間でのアプリ市場を見据えたモノです。
私は、てっきり、C#を使った一つの言語空間だとばかり思っていました。

しかし！！！

Javascript、HTML、CSSを使ってアプリの作成が出来るという、WebアプリもStore Appで利用できるという、開発者にとってはありがたい話です。
iOS用、Android用と、開発者はそれぞれの言語を理解し、場合によっては勉強する必要があります。
HTML、CSS、Javascriptを使えるフロントエンドデベロッパーが、アプリを作れるというのは、とんでもない開発者の囲い込み/取り込みのようにしか私には思えません。

今後、HTML5が発展・普及するにつれて、Webアプリは、今までパイを奪ってきたモバイルアプリ市場から、パイを奪い返すことになります。
アプリをダウンロードせずに、URLにアクセスするだけで使えるアプリ。
HTML5についてる、IndexedDBを使ったアプリは今後増えることでしょう。

IndexedDBの問題点は、まだ技術的に確定していないことです。
2014年に、IndexedDBを使ったアプリを開発したことがありますが、その時は泣きを見ました。
DBへの接続方法が、大きく変わり、ブログで公開されている方法を試してみても動かなかったのです。

Windows Store Appは、Web Appに対応している。
なんというズルでしょうか。
Visual Studioになんで、JavaScriptがあるんだろう、と思っていました。
ふと気になって、Windows Store App JavaScriptと調べて見ると、げげげげーと。
2014年当時から、出来てたのに、そんなこともしらずにWebApp作ってましたよ。
まぁ、Windowsのモバイル端末やStore Appがどれほど普及してるかは、別問題ですけど、Windowsですよ。
でかいマーケットだと思いますよ。
どーですか、フロントエンドデベロッパーの皆さん。
Windows Store App作りませんか？