以下のような円形のUIパーツで水色の部分をドラッグして動かすと中央の数字が変わっていきます。

数値を指定するのにこういう丸形のUIって使いやすい/わかりやすいもんなのか、よくわかんないですけど、何かしらの計算結果がこういう形で表示される、ってのだったらいいかもしれませんね。

ということで使いどころが難しいかもしれませんが、とりあえずデモが以下から見れますので、実際にいじくってみてあれこれ考えてみてください。いろんなパターンがあります。

jQuery Knob demo

Using CSS 3d to make every website into 3d(kind of). It is a bit buggy but you can bookmark the script to your bookmark bar and have some 3D fun on any websites by

ということで、多少バグはあるもののブックマークレットとしてワンクリックで見ているWebページを3Dに変換できるのでお気楽に試せます。

ちなみにうちのブログを3D化してマウスでぐりぐり動かすとこんな感じになります。

川島海荷ちゃんが宙に浮いていますねｗ

さてやり方です。

以下のページにアクセスして左側にある「Drag me to your bookmark bar!」って書いている部分をドラッグ＆ドロップでブラウザのブックマークバーに登録します。

LAB! - 3D it!

あとはどこかのページに行って登録したブックマークをクリックするだけです。マウスを動かすとぐりぐりページが動きます。

だからなんなんだ、って感じかもしれませんが、こういうのができる！ってわかったらそれを効果的に活用できちゃう人もいるわけで、そういう人に負けないよう想像力を発揮させてみましょう！

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery.

blueimp/jQuery-File-Upload · GitHub

ということで、jQueryで使えるFile Uploadプラグインですが、これがなかなか便利そう。

上に引用した機能だけでも、

・複数ファイル選択＆アップロード
・ドラッグ＆ドロップ
・プログレスバー
・イメージのプレビュー

なんかがサポートされていますが、さらには、

Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

別のドメインへのアップロードや大きなファイルのチャンク化、クライアント側での画像のリサイズなんかもできるようです。

その他、アップロードのキャンセルやリジューム機能も実現。

テストされたブラウザはこんなところ。

Google Chrome - 7.0+
Apple Safari - 4.0+
Mozilla Firefox - 3.0+
Opera - 10.0+
Microsoft Internet Explorer 6.0+

いちおうIEもリストされていますが、機能の一部はやはり利用できないみたいです。

まあ、アバター画像をアップロードするぐらいならこんなの必要ないかもしれませんけど、写真やイラスト共有サイトだったら使うと開発者も利用者も両方便利ってわけで検討してみてはいかがでしょうか。

デモはこちらです。

jQuery File Upload Demo

This is a jquery plugin I wrote to invisably validate a text input field on keypress with a regular expression.

Brian Jaeger: Process

Webページの中のテキストフィールドで正の数字とか整数しか入力しちゃいけないところ（例えば数量とか）とか文字だけ入力を許可し、数字の入力をさせたくないような場合などに利用できるjQuery用プラグインです。

基本的には適用したいテキストフィールドで制限したい条件にあったクラスを割り当ててあげるだけで使えます。

/^[-+]?\d*\.?\d*$/なんか、といった正規表現を利用して判定しているようです。

ただ、JavaScriptをオフにされていると機能しないので、実際に使う時は受ける側のサーバーでのチェックも必要となるわけですが、とりあえずそういう防止機能をさくっとページに実装できるようになる、というのは便利ですよね。

jQueryデザインブック　仕事で絶対に使うプロのテクニック

Drop an image, see the art

Artify.js : CSS3 art generator

画像をドラッグ＆ドロップするとその画像をアートに変換してくれるjQueryのプラグインなんですが、サイトでそのデモが楽しめます。

「Drop image here」ってところに画像ファイルをドラッグ＆ドロップすると変換してくれるのでお気軽に楽しめるのですが、HTML5のFile APIを利用している関係でChromeとFirefoxでしか楽しめませんのでご注意ください。

で、とりあえず私のFacebookのアイコンで試してみたら、こんな感じになりました。

なるほどなあ。

これ使って自分の顔にフィルタ掛けたものをアバターアイコンとして使う、ってのはありなのかもしれませんね。

いろんな画像をドラッグ＆ドロップして楽しんでみてください。

Is This ArtとJS Asciiにインスパイアされたそうです。この2つも面白いですよね。

Pow.js generates the pattern in canvas, and simply layers in the resulting image data as a CSS background. It's kinda actually not that complicated.

pow.js - Algorithmic sunburst generator via CSS, canvas and jQuery.

マンガの集中線みたいな効果、ってのはつまりこんな感じのやつです。

上記リンクサイトではパラメータを変えていろいろ試すことができて楽しいのです。

これ、普通は絵で描いてpngとかにしちゃうところをスクリプトで書いているので修正・変更なんかが楽になるでしょうが、実際問題、こういうのを使い機会ってあるのだろうか・・・。

bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap

Twitterのbootstrapと一緒に使うとこんな感じのWYSIWYGエディタを簡単に実装することができるようになります。

使い方は簡単で、

$('#textarea').wysihtml5();

って書いておけばいいだけみたい。

まあ、使わないかもしれないけど、知っておいて損はない情報ですね。そんなわけで取り上げてみました。

bootstrap-wysihtml5

A jQuery plugin for defining a custom path that the browser follows when scrolling.

JoelBesada/scrollpath · GitHub

このタイトル読んで何を言いたいのかが理解出来る人と結婚したいと思う私ですが、まあ、とりあえず以下のデモページにアクセスしてキーボードの矢印キーの上とか下を押してみて下さい。

プレゼンテーション的なものに使えるかと思うのですが、移動パスの設定はCanvasタグのシンタックスような感じで設定できるみたいです。

デモ
http://joelb.me/scrollpath/

お楽しみください。短い記事ですみません。

Kalendae is an attempt to do something that nobody has yet been able to do: make a date picker that doesn't suck. Kalendae provides the following features:

ChiperSoft/Kalendae · GitHub

Date Pickerってカタカナで書くと変な感じがしますが、日付けを入力しなきゃいけない場面でカレンダーが表示されて日をクリックするとその日付けがテキストフィールドに挿入されるというやつです（デートピッカーって書いた方がいいのかな？）。

で、このKalendaeが自慢しているポイントは

Fully portable, no dependencies. No jQuery, no Prototype, no MooTools; just add the script and the stylesheet and you're good to go.

有名どころのJSライブラリは必要ないよ、だそうです。

Fully and easily skinable. The default theme uses only one image file (a mask for the previous and next buttons), everything else is styled using CSS.

CSS使ってデザインを簡単にカスタマイズできるよ。

Supports all modern browsers and IE8.

どのブラウザでも使えるよ！IE8でも使えるよ！

Support single day, multiple day, or day range selection.

単一、複数日、そして範囲選択もできるよ。

そんなわけで、あと6個ぐらいメリットをあげているので興味ある人は読んでみてください。

で、実際どうなの？って人向けのデモはこちらから。

Webテクノロジーが進化したことによりJavaScriptグラフィックスを使ったリッチなWebアプリケーション開発が可能になりました。本書ではJavaScriptによる最新のグラフィックスプログラミングについて解説します

O'Reilly Japan - JavaScriptグラフィックス

ゲームやDHTMLエフェクト、HTML5 Canvasなどの実例を通して、高性能なJavaScriptグラフィックスの実装方法を学びます。グラフィックスやアニメーションだけでなく、WebSocketを用いた通信、Google Chart Tools、スマートフォン向けのトピックまで幅広く扱います。日本語版では、パソコン向けのWebゲームをjQuery Mobileでモバイル向けに改造し、PhoneGapでネイティブアプリへ変換する方法について加筆しました。

世の中の流れとしてこの本は読んでおかないとまずいかなあ、というか、今ここでこれを理解しておかないとこの先生きていけない気がしております。まったく「日々勉強」な嫌な業界ですね。好きだけどｗ

とりあえず友人の甲斐君にはお勧めしたいです。

目次はこんな感じです。