けSERAせらせらせら

木曜日, 6月 17, 2010

ライブドア画像検索に名前を入れると、興味がわかる

先日、ライブドアがNeverと提携して、画像検索が変わりました。

さっそく、いろいろ試したついでに、まさか、と思いながら自分の名前を入れてみました。

すると、どこで、どう関連付けられたかわかりませんが、不思議と自分の興味がありそうなものの画像がでてくるのです。

なにはともあれ、お試しください。

（私は、ライブドアファン！　というわけではありませんが...）

ライブドア

土曜日, 6月 12, 2010

jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル

Create a Custom Content Slider with jQuery

jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル。
次のように、左側にボタンがあって押すと右側のコンテンツがアニメーションで切り替わるコンテンツスライダーの実装チュートリアルとサンプルが公開されています。

サイドバー等に仕込むことで少ないスペースで多くの情報を格納することが出来る上になかなかクールな印象を与えられそうですね。
簡易チュートリアル的なコンテンツを載せる場合なんかに使えそうです。

関連エントリ

木曜日, 6月 10, 2010

CSSでドロップダウンリスト

CSSのだけでドロップダウンリストができる。http://www.lwis.net/free-css-drop-down-menu/

単純な水平
詳細/究極の水平
Flickrのフルテーマ

ゴージャスなテーマを模倣

火曜日, 6月 08, 2010

とても洗練されたＵＩの日付ピッカー＆カレンダー集

Beautiful datepickers and calendars for web developers

とても洗練されたＵＩの日付ピッカー＆カレンダー集のエントリが紹介されていましたのでピックアップ。
日付入力も便利だけでなく、クールに行えます。

datepicker
シンプルだけどクールなカレンダー

jquery datepicker
From〜Toが指定できるカレンダー

Calendar
立体的でクールなＵＩ

jPint
iPhoneっぽいＵＩ

全部見る

これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム

Plugins | jQuery Plugins

これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム。
なかなかリッチなUIとGoogleカレンダーばりの操作性を持つ便利なスクリプトになっています。
Googleカレンダーに登録するのもよいのですが、ちょっと外部に流したくないこととかも結構あるので、自前で構築したいというニーズもあるのではないでしょうか。

タイムライン上をドラッグ＆ドロップして予定を入れられます。ポップアップがでるので予定を入れます。日本語もOK

見ての通りUIもなかなかいい感じです。
スケジュール管理等に活用できますね。

もう一つ簡単なもの

jquery-week-calendar - Project Hosting on Google Code

日曜日, 5月 30, 2010

【JavaScript Tips】使えるときはReverse Loopを使うといいらしい…

// Forward loopよりも…
var i = 0;
while ( i < length ) {
i++;
}
// Reverse loopの方が速い！
var i = length;
while (i--) {
/* iを操作する必要がありません。 */
}

水曜日, 5月 26, 2010

色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集

色々と使えそうなデータのビジュアリゼーションライブラリ集が２２個まとまったエントリのご紹介です。
FlashからPHPで描画するものや、APIを叩いて表示するものなど、既知の物も含まれていると思いますが、多数のグラフ作成用の仕組みが紹介されています。

Fly Charts
マウス位置によって情報がポップアップされたり、タブでデータを区切ったり出来るFlash製のＵＩをしたユニークなグラフ描画ライブラリです。
単純に描画されるグラフ自体もデザイン性があっていい感じですね。

Fusion Charts
こちらもFlash型のグラフ描画コンポーネントです。デモページを見ればその多機能さが分かります。

Axiis
Flexで作られたデータビジュアリゼーション用フレームワーク。

Stlye Chart
色々な種類のユニークなデータビジュアリゼーションが実現できるライブラリ。

Jfree Chart
こちらはJavaで動作するチャート作成ライブラリ。なかなか多機能のようです。

Omni Potent
小さくてかわいらしいグラフを描画するためのjQueryプラグインです。小さくてもダイジェストとしての情報を付加できます。

他にも、多数ビジュアリゼーション用のライブラリなどが紹介されています。

リンク先は以下のエントリを参照してください。
22 Awesome Visualization Libraries: Charts and Diagrams | Onextrapixel - Showcasing Web Treats Without Hitch

データの様々なヴィジュアリゼーションが可能な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);
});