こんにちは。開発部でインターフェースエンジニアをやっております油井(あぶい)です。ライブドアでは主にjavascriptを中心としたクライアントサイド側の開発をやっております。 今回は裏jQueryと題しまして、普段から単にユーザーとして使っているだけでは決して知ることができないjQueryの裏技を紹介したいと思います。 注意 この記事で扱うjQueryは最新版の1.4で動かすことを前提としています(一つ前のバージョンである1.3.2でも動くことは検証済みです)。サンプルで使うjQueryセレクタの書き方は「jQuery」で統一しています。「$」に置き換えて読んでもらってもかまいません。 はじめに - jQueryで扱うイベントやトリガー javascriptがふんだんに使われた画面遷移の発生しないウェブアプリケーションではブラウザ上で発生するイベントやトリガーをうまく扱いこなすということ

Reorder and filter items with a nice shuffling animation. Ajaxian ≫ Quicksand: transition and filtering effectにおいてjQueryプラグインのひとつjQuery Quicksand pluginが紹介されている。ul要素で用意したいくつかのリストをシームレスに入れ替えるためのプラグインで、スムーズなアニメーションを簡単に実装できる。 jQuery Quicksand pluginのトップページがQuicksandのサンプルにもなっており、上部にあるボタンを押すことでアイコンがスムーズに移動することを確認できる。下記の3つの図がそれぞれシームレスにアニメーションしながら入れ替わるように動作する。ソースコードを見るとアイコンはul要素で用意されており、それをQuicksand経由でアニ

話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何？使い方は？という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)

Progressionでコマンドを実行するexecuteメソッドには、extraという引数があります。 シーン遷移でコマンドを実行する場合、extraを使うケースはほとんどないと思いますので、あまり馴染みのない引数ですが、コマンドを単体で利用する場合、extraを使うと便利なこともあります。 コマンドリストを実行する際extraを渡すと、コマンドリストに登録された全てのコマンドは実行時に渡されたextraをリレーします。つまり、登録されたコマンドはすべて実行時にextraを利用できます。 たとえば、一連のアニメーションを登録したコマンドリストを実行し、最後の挙動だけ異なるようにしたい場合など、extraを渡して挙動を変更することが可能です。 例：同じコマンドリストを実行し、最後のコマンドでextraで渡した異なる色値に変更する。 btn0.label = "RED"; btn1.label

YoxView - jQuery image viewer plugin 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」。 現時点で、色々なLightBoxの実装がありますが、これはなかなかカッコいいというものを見つけました。 画像をクリックすると、クリックした画像以外がグレーに暗くなります。 そこからアニメーションしながら拡大。動きは実際に見た方がいいですね。YoxView のデモ 関連エントリ かなりスタイリッシュかつ高機能なLightBox風ライブラリ「TopUp」 表示法が新しくセクシーなLightBox「SexyLightBox」 カスタマイズできる多機能LightBox「Lightview」

jQueryで実装するシンプルなグラフィックCAPTCHA「jQuery SimpleCaptcha」 2010年02月23日- jQuery SimpleCaptcha - Examples jQueryで実装するシンプルなグラフィックCAPTCHA「jQuery SimpleCaptcha」。 次のように、英文の指示にしたがってグラフィックをクリックし、CAPTCHAとするプラグインです。 日本語にして画像とソースを入れ替えれば、海外のスパムに対してより有効になりそうですね。 一部でPHPのセッションも使っていて、PHPの動作するサーバが必要です。 jQueryプラグインなので実装コードも割とシンプルに実装できるようです。 海外スパム対策の１つの選択肢として。 関連エントリ これは注目！様々なタイプのCAPTCHAが作れるPHPライブラリ「Securimage PHP CAPTCHA」

「Next」ボタンで次の画像を表示 スクリプトは使いやすさとフレキシビリティを前提に開発されており、実装が簡単で、柔軟性をもったものとなっています。 スクリプトの特長 ブラウザのサイズ変更時に表示を自動調整。 アニメーションで軽快に動作します。 画像はバックグランドでキャッシュすることが可能。 言語、背景色、スライドの間隔などオプションで簡単に設定。 多彩なインスタンス。 多言語対応。 ※現在は日本語用の画像は未。 スライドショーは自動再生に対応。 キーボードでの操作も可能。 操作方法は拡大時の「？Help）」に掲載。 サーチエンジンにもフレンドリー。 スクリプトの実装方法は簡単で、jQueryを使用しますがjQueryの特別な知識は必要なく実装が可能です。 YoxViewの実装方法

MultiLoader 0.3 BulkLoaderをお手本に0から書き直し。 主たる目的としてはBulkLoaderで作ったものをwonderflで公開する時にクラス名をMultiLoaderと書き換えるだけで動くように作る、というもの。なので、今の所必要最小限。 EventListenerまわりをちゃんと作り直したら、だいぶ使い勝手がよくなるはず。今後の課題。 /* MultiLoader 0.3 BulkLoaderをお手本に0から書き直し。 主たる目的としてはBulkLoaderで作ったものを wonderflで公開する時に クラス名をMultiLoaderと書き換えるだけで 動くように作る、というもの。 なので、今の所必要最小限。 EventListenerまわりをちゃんと作り直したら、 だいぶ使い勝手がよくなるはず。今後の課題。 */ package { import flas

GREEデベロッパーセンターが開設されました Tweet 2010/2/22 月曜日 matsui Posted in ニュース | No Comments » 本日2月22日、GREEデベロッパーセンターが開設されたとのことです。 →　GREE Developer Center（グリー デベロッパーセンター）　トップ [developer.gree.co.jp] →　ニュースリリース　「GREE Platform」の提供決定およびデベロッパーセンター開設について [developer.gree.co.jp] mixiやモバゲーと同様に、GREEもこの春に向けてプラットホームとAPIのオープン化を行う予定となっています。 技術情報などを見るは、法人登録を行わなければならず、同時に法人格などの簡単な審査も入るとのことです。 詳しくはこちらのFAQページが参考になります。 →　GREE Dev

A great site of recreational computation, generative art, mathematics, and open source modules.

最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio