TsutomuUchimaの日記

■教えてください。

こんなことやりたいです。

• ドキュメント指向DBのデータとWebブラウザストレージのデータを同期させオンライン、オフラインで動作可能にする
• Webブラウザのストレージで全文検索
• 現時点のブラウザストレージの実装による違いを意識しないようプログラミングする。またはフレームワークを利用する

CouchDBやMongoDBとかドキュメント指向DBとWebブラウザのGoogle GearsやHTML5 localstorageとの同期ってどんな風に実装するんでしょう？Webブラウザのストレージについて全くの無知です。HTML5の仕様はまだ決まってないし、でも現在の実装でもいいから使いたいなぁ。クロスブラウザなローカルストレージを扱うJavaScriptライブラリってありませんかね？

■[jquery] jquery.jsonengine.jsやめた。代わりにjquery.simplejsonrest.js 書き始めた

自分で作っといて何だけど jquery.jsonengine.js は使い物にならない！公開しないで良かった。その代わりを考えました。こんな感じで。

jquery.simplejsonrest.js

// Simple JSON-REST plugin for jQuery

//BASE

var _opt = {
	"type"    : "POST",
	"url"     : "/_je/myDoc",
	"data"    : {"foo":"bar"},
	"success" : function(){alert("success")},
	"error"   : function(){alert("error")}
};
$._OPTIONS(_opt)._AJAX();

//BASIC

var _data   = {"url":"/_je/myDoc","data":{"foo":"bar"}};
var _docId  = '_docId=00roxf3RwEBi1ZobhYECZdUnT766oU97';
var _filter = {"cond":"foo.eq.bar","sort":"foo.asc","limit":"100"};

$._OPTIONS(_data)._GET(_filter, success, error);
$._OPTIONS(_data)._POST(success, error);
$._OPTIONS(_data)._PUT(success, error);
$._OPTIONS(_data)._DELETE(success, error);

//USAGE

$('#aForm')._GET(_docId,  success, error);
$('#aForm')._POST(success, error);
$('#aForm')._PUT(success, error);
$('#aForm')._DELETE(success, error);

$('#aData')._OPTIONS(_data)._GET(_filter, success, error);

こんなソースなら使いたくなる。自画自賛。

■[jquery] jquery.simplejsonrest.js 最終案

// Simple JSON-REST plugin for jQuery

//low level

$.SJR.option = {
	"success" : function(response, status){alert('success');},
	"error"   : function(xhr, status, thrown){alert('error');}
};

$.SJR.option.type = 'POST';
$.SJR.option.url  = '/_je/myDoc';
$.SJR.option.data = '{"foo":"bar"}';

$.SJR.ajax();

//基本

option  = {
	"url"  : "/_je/myDoc",
	"data" : {"foo":"bar"} // or "foo=bar"
};
success = function(response, status){alert('success')};
error   = function(xhr, status, thrown){alert('error');};

$._GET (option, success, error);
$._POST(option, success, error);
$._PUT (option, success, error);
$._DELETE(option, success, error);

//jQuery的な使い方

//要素の内容を元に実行される。内容を走査する為のコーディングは不要。
$('form')._POST(success, error);
$('form')._PUT (success, error);
$('form')._DELETE(success, error);

//取得したデータを要素の内容に反映させる。基本的に内容を反映させるコーディングは不要。
id = '_docId=00roxf3RwEBi1ZobhYECZdUnT766oU97';
$('form')._GET(id, success, error);

//取得したデータを要素の内容に反映させるコーディング例。
//それぞれ違う要素だが同じ処理で反映させる事が出来る。
option.data = {"sort":"message.asc", "limit":"100"};
var success = function(response, status){
	this.empty();
	for (i = 0; i < response.length; i++) {
		var msg = $("<div/>").text(response[i].message);
		this.append(msg);
	}
};
$('#messages1')._GET(option, success, error);
$('#messages2')._GET(option, success, error);

最終案のソースを見てjqueryを知っている人ならピン！ときた人もいるかと思います。要はjquery.simplejsonrest.jsを使うとフォーム値に関してはリクエストするのに基本コーディングが無くなります。submit感覚で使えちゃうって事。