けSERAせらせらせら

水曜日, 5月 26, 2010

データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」

birdeye - Project Hosting on Google Code

データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」というものがGoogle codeにて公開されています。
ライブラリはActionScriptベース。
デモページを見ればその多機能さについてうかがい知ることができます。

少々クセのあるデザインですが、サクっとデータのビジュアリゼーション機能を実装したい際に活用出来るかもしれませんね。

IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」

jStorage - simple JavaScript plugin to store data locally

IEにも対応！ブラウザ上でローカルにストレージを作るJavaScriptライブラリ「jStorage」。
基本はHTML5のストレージを使いますが、対応していないブラウザは、例えばIEではuserDataを使ってデータを格納します。
ライブラリ内でクロスブラウザ対応はしてくれるので、利用者はただ jStorageのメソッドを呼び出すだけでストレージを利用できます。

ブラウザごとのサポートと、ストレージサイズは以下。IE6,7 が 128KBと、比較的小さいですが、それなりに大きなデータを保持できることが分かります。

基本とするフレームワークライブラリは、jQueryや、Prototypeなど自由に選択することができます。
利用するのも超シンプルに使えて便利です。

次のように、key, value の形で使えます。

$.jStorage.set(key, value); // データの設定

value = $.jStorage.get(key); // データの取得
value = $.jStorage.get(key, "default value"); // デフォルト値を決めてのgetも使えます

単にお手軽に使えるので、それだけで便利と言えますね。
また、サーバ側にデータを保存する場合、ユーザボリュームが大きいサイトになるとそれだけで負担になってしまう部分もあり、こういうところでまかなえるものについては対応していくことでパフォーマンス向上やサーバリソースの節約に繋がりそうです。

１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」

jQuery Doubleselect Plugin

１個目のselectで２個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。
次のように、１個目のSelectボックスの内容によって２個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。

１個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。

１個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。

いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できます。
サンプルコード例は以下。

$(document).ready(function()
{
var selectoptions = {
"Vegetables": {
"key" : 10,
"defaultvalue" : 111,
"values" : {
"tomato": 110,
"potato": 111,
"asparagus": 112
}
},
"Fruits": {
"key" : 20,
"defaultvalue" : 212,
"values" : {
"apple": 210,
"orange": 211,
"kiwi": 212,
"melon": 213
}
}
};
$('#first').doubleSelect('second', selectoptions);
});