2012/05/23

新しい試み。図形を描いて人とコンピュータを判別「MotionCAPTCHA」

CAPTCHAと言えば画像に書かれたぐにゃぐにゃな文字を書くというのが一般的です。しかしこれは非常に煩わしく、読みづらいものが多くストレスになります。そこで新しい手法が幾つも生み出されていますが、今回はMotionCAPTCHAを紹介します。 フォームです。下にあるのがMotionCAPTC...

2012/05/18

キーフレームを使ったCSSアニメーションを実現「jQuery keyframe」

CSS3のパワーアップによってCSSだけで絵を描いたり、アニメーションしたりする試みが増えています。今回はその一つ、JavaScriptと組み合わせることでさらにキーフレームを使ったアニメーションを実現するjQuery keyframeを紹介します。 最初の表示です。ボックスをクリックします...

2012/05/13

マウスを動かすと影が動く、そんなちょっとしたアニメーション「Real Shadow」

マウスを追従する仕組みは目を引きやすいです。そんな仕組みの一つとしてReal Shadowを紹介します。マウスを動かすと影が動く仕組みです。 多数のオブジェクトが並び、その影が描かれています。ライトはマウスがある場所になります。 マウスを動かせば影もリアルタイムに動きます。 Real Sha...

2012/05/03

スマホ最適化サイトで使いたい。jQuery Mobile用アイコンパック「jQuery Mobile Icon Pack」

jQuery Mobileを使ってスマートフォン最適化サイトを構築する際に使ってみたいのがjQuery Mobile Icon Packです。スマートフォンにマッチしたシンプルなアイコン集となっています。 アイコンの一覧です。 実際に使っている例。data-iconで指定するだけで使えます。...

2012/04/28

画像を生成せずにサムネイル風に小さな画像を表示「jQuery NailThumb」

Webサイトで画像を縮小して表示したい場合、ImageMagickなどのサーバサイドの技術を使うのが一般的です。しかしjQuery NailThumbを使えばクライアントサイドだけで高度なサムネイル風表示を実現します。 デモです。左側が元画像、その右側にサムネイル化した画像が表示されています...

2012/03/25

プロジェクト管理に使ってみたい。jQuery製のガントチャートライブラリ「jQuery.ganttView」

2012/03/24

人気のあるサービスを真似よう。Tumblr風タグ編集コンポーネント「jQuery Tumblr Tags Editor」

2012/03/24

jQuery製。イフェクトが格好いいスライドライブラリ「jqFancyTransitions」

2012/02/25

jQuery Mobile向けBootstrapテーマ集「Twitter Bootstrap jQuery Mobile Theme」

TwitterのBootstrapは最新版でスマートフォンにも対応しています。そしてスマートフォン向けのJavaScriptライブラリと言えばjQuery Mobileです。この二つを組み合わせて使えるのがTwitter Bootstrap jQuery Mobile Themeになります。...

2012/02/15

Apache Clickを使ってWebアプリケーションを組むなら知っておきたい「Click JQuery」

Click JQueryはApache ClickとjQueryを連携された場合のデモソフトウェアです。実際にApache Clickを使っていく上でのテクニックとして知っておくと便利そうです。 デモサイトです。様々なコンポーネントを試せます。 スライド系のデモです。 カレンダー連携です。 ...

2012/02/03

テキストエリアでタグのハイライトや自動補完「TAGMATE!」

TwitterやFacebookによってテキストエリアの中に特定の記号を伴った文字を書くとそれがユーザやタグとして認識されるサービスが多くなっています。そこで類似の実装をする際に使えるのがTAGMATE!です。 #、@、$の後に書かれた文字列が自動的にタグとして認識されてハイライト表示されて...

2012/01/25

appMobi社製。チェック必須のスマートフォン向けjQuery「jQ.Mobi」

jQ.MobiはappMobi社の開発したHTML5をターゲットとしたスマートフォン向けJavaScriptフレームワークです。 黒を基調にした格好いいUIです。 jQueryをリライトして作られておりAPIは似ています。 フォーム系も格好いいです。 プラグインにも対応しています。 セレクタ...

2012/01/23

範囲を指定して切り抜き。jQuery製の画像クロップライブラリ「Jcrop」

写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 はい、まずは普通の表示です。マウスで範囲指定します。 こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。 正方形に限らず形を決め...

2012/01/21

JavaScriptによるバイナリハックの世界へようこそ「jDataView」

jDataViewはJavaScriptでバイナリデータを読み込む際に利用するDataViewを拡張し、より使いやすくしてくれるJavaScriptライブラリです。バイナリーハッカー必見のライブラリです。 こんなイメージデータをJavaScriptから閲覧できます。 tarファイルを読み込ん...

2012/01/17

業務システムに単なるCSVもリッチに表現「js-tables」

js-tablesは業務システムで使えそうなjQueryプラグインです。CSVファイルやCSVのテキストを渡してフィルタリングや並び替えに対応したテーブルを表示してくれます。 サンプルです。元データはCSVファイルとなっています。 カラムごとに入っているデータをグルーピングして表示します。そ...

2012/01/11

JQGridを使ったAjax対応のPHPグリッド表示ライブラリ「JQgrid PHP Grid Control」

PHPで作られた業務システムなどでデータを表で一覧表示する際に使ってみたいのがJQgrid PHP Grid Controlです。ごくシンプルなPHPコードだけで高度なグリッド表示を行ってくれます。 データが整然とグリッド表示されています。 データの追加もここでできます。 日本語が???にな...

2011/12/25

間違ってブラウザを閉じても編集データを保持できる「Sisyphus」

Gmailでは編集中のメールの内容を定期的に保存しておいてくれるので誤って画面を閉じた場合でもメールの内容が消失したりしません。同様の仕組みをクライアントサイドで実装してくれるのがSisyphusです。 最初の表示です。右側にフォームが表示されています。 入力しています。時々、ローカルストレ...

2011/12/24

PHP製のシンプルなWebチャットシステム「anologue」

anologueはPHP製のWebチャットソフトウェアです。シンプルですぐに使い始められます。 メイン画面です。 最初にルーム名を決めます。おそらく日本語は使えません。 作成しました。 メッセージをやり取りできます。 メールアドレスを登録すればアイコン（Gravatar）も出ます。 anol...

2011/12/20

エンタープライズでもスマートフォンを活かす際に参考にしたい「Employee Directory」

jQuery Mobileを使えば格好いいスマートフォン向けのWebアプリケーションが開発できます。しかし実際のところどうやって作ったら良いのか分からないという人も多いでしょう。そこで参考にして欲しいのがEmployee Directoryです。 一覧です。データはJSONを取得して表示して...

2011/12/17

ユーザのテキスト表示サイズ変更を検知するjQueryライブラリ「jquery-textresize-event」

もし閲覧しているWebサイトの文字が小さかったり、逆に大きすぎる場合には拡大/縮小メニューを使うと思います。そんな時にそれを検知して別なスクリプトを実行できるのがjquery-textresize-eventです。 文字を大きくしたり、小さくしたりするとコンソールにresizedというログメ...