2007年、最も勢いがあったWebサービスと言えば、Facebookではないだろうか(twitterもあるが、金銭的な話も含めるとやはりFacebookかと)。このFacebookでは各所に楽しいJavaScriptアクションが仕込まれている。

ピクチャ 1-63

先日のFaceboxは、そんなFacebookのアクションを真似た物だったが、今日紹介するのはFacebookオリジナルだ。

今回紹介するオープンソース・ソフトウェアはFBJS/Animation、Facebook内でも使われているアニメーションライブラリだ。

FBJS/Animationの特徴は、何といってもそれ単体で動作する点にある。prototype.jsやjQueryのような統合ライブラリは必要としない。圧縮して12KBと若干大きめではあるが、単一ファイルで提供できるのは素晴らしい。

ピクチャ 2-65

使い方としてはjQueryライク(恐らく)なメソッドをチェーンのようにつないでいく。例えば「Animation(document.getElementById(‘container2’)).duration(5000).to(‘height’, ‘0px’).blind().hide().ease(bounceEase).go();」といったような具合だ。durationはアクションのスピードを遅らせる、toで最終的な形、hideは隠すなどなど、様々な設定を行って最後にgo();を実行すれば良い。

例えば文字列をハイライト表示したり、スライドしながら消したりと多彩なアクションが用意されている。設定方法がメソッドをつないでいくだけで出来るというのは便利だろう。

ピクチャ 3-65

何よりJavaScriptファイルを単一で読み込めばできるという手軽さが良い。アクションを施したいが、他のライブラリではちょっと豪華過ぎる、といった場合に重宝しそうだ。

Facebook Developers | Facebook Animation
 http://developers.facebook.com/animation/