HTMLオブジェクトをアニメーション - 高見知英のかいはつにっし(β)

今更知ったのですが、script.aculo.usという、HTMLオブジェクトをアニメーションさせるためのライブラリがあります。
以前id:naoyaさんが紹介していたprototype.jsを使ったライブラリで、これをつかえば、本来自分の手でやるにはとても手間がかかるオブジェクトのスライド表示、非表示などが数行で出来てしまいます。11月にはてな技術発表会でも取り上げられてたようですね。後半「おおーっ」っと盛り上がっていたようですが、後半動画が切れていたため、何が起こったのかいまいち分からない…。

このライブラリは複数のJSファイルで出来ているため、一見導入が面倒そうですが、メイン(？)となるスクリプトである、scriptaculous.jsと、ベースとなるprototype.jsを(scriptタグで)読み込ませればいいだけです(残りはscriptaculous.jsが読み込んでくれる)。
Nucleusで書くなら

<script type="text/javascript" src="<%skinfile(prototype.js)%>"></script>
<script type="text/javascript" src="<%skinfile(scriptaculous.js)%>"></script>

と言う感じ。Effectというクラスが使えるようになりますので、このクラスのメンバをnewすれば、オブジェクトをいろいろアニメーションさせることが出来ます。いくつかメソッドがありますが、動作例は作者さんのサイトを見ると分かると思います。

ただし、これだけでは非表示にするなら「非表示にする」、表示するなら「表示する」、どっちか一つしかやってくれないので、別のスクリプトを書いて表示中なら非表示に、非表示なら表示と言う風に、逆の状態に遷移するように変えてやる必要があります。

function toggleId(id)
{
  var element = $(id);
  if(Element.visible(element))
    new Effect.BlindUp(element, {duration:0.3});
  else
    new Effect.BlindDown(element, {duration:0.3});
}

こんな感じ。複数のEffectを順番に書くと、ほぼ同一のタイミングで実行されます(ちなみに、{duration:0.3}は、アニメーションの動作速度を変更するための設定、JavaScriptでも名前付き引数指定できたんだ…、なんだかスクリプト言語があまりにも高機能に見えますね(^_^;))。

new Effect.BlindDown(element, {duration:0.3});
new Effect.Highlight(element);

なんて書いてやっても面白いかも。
prototype.jsは、読み込んだだけでFirefoxのJavaScriptコンソールが警告をだすので、あんまり使いたくはないですが…。ここまで来ると使わざるを得ないかもしれないなあ。

それにしても、このscript.aculo.us。どう発音するんでしょう？はてなの人は「スクリプタケラス」と言うような発音をしていた(良く聞き取れなかった…)ようですが、.が入ってるだけにちょっと読みが違うんじゃないのかなぁ…。
わたし個人的には、~~「スクリプトアクロウス」かなあ…~~usは「アス」だから、アクロウスはおかしいか、言うなら「スクリプトアクロアス」でしょうかね？でも、del.icio.usなんか、よく見たら「デリシャス」だし…。