株式会社はてなでは日々、開発者が持ち回りでひとつの技術トピックについて発表を行っており、公開可能なものについては、その内容を音声と動画で公開しています。
| 
11月1日に行われました技術発表会の内容を撮影した動画ファイルを公開いたしました。内容は以下のとおりです。
| テーマ | script.aculo.us |
|---|---|
| 発表者 | d:id:aql |
| 時間 | 12:03 |
| ファイルサイズ | 64,137,372Bytes |
以下よりダウンロードしてご覧ください。
http://www.hatena.ne.jp/sound/tech/051111hatenatech.wmv
今回の発表はビデオカメラの都合により、途中で動画が終了してしまいます。その後の内容は以下の音声ファイルにて公開させていただきますので、ご了承ください。
http://www.hatena.ne.jp/sound/tech/051111hatenatech.mp3
effects.jsをメインに見てみる
コアエフェクトを組み合わせて作られたエフェクト
自分でエフェクトを作る時のサンプルコードにもなる
<div id="test03">はてな</div>
<div onclick="Effect.Fade('test03')">Effect.Fade</div>
<div onclick="Effect.Appear('test03')">Effect.Appear</div>
クラスになっている
newすればデフォルト動作をする（コンストラクタを動かすだけでエフェクトが適用される）
<div id="test04">はてな</div> <div onclick="new Effect.Highlight( 'test04' );">Effect.Highlight</div>
<div id="test05">はてな</div>
<div onclick="
new Effect.Opacity( 'test05', {
from : 1.0,
to : 0.0
});
">Effect.Opacity</div>
<div id="test06">はてな</div>
<div onclick="
new Effect.Parallel(
[
new Effect.MoveBy( 'test06', -100, 100, { sync : true } ),
new Effect.Opacity( 'test06', { sync : true, from : 1.0, to : 0.0 } )
]
);
">Effect.Parallel</div>
オプションを設定すれば挙動を変えられる
開始や終了の時にフックすることも出来る
旧util.jsから移動したユーティリティもある
ざっと俯瞰
Scriptaculous.require('/path/to/script.js');
<div id="test01"></div>
<script type="text/javascript">
$('test01').appendChild(
Builder.node(
'span',
{ style : 'font-size: large' },
'はてな'
)
);
</script>
<div id="test07">はてな</div>
<script type="text/javascript">new Draggable('test07')</script>
コールバック
<div id="test08" style="height:100px;width:100px;"></div>
<script type="text/javascript">Droppables.add('test08')</script>
コールバック
<script type="text/javascript">
Droppables.add( 'test08', {
onDrop : function ( element ) {
new Effect.Highlight( 'test08' );
$('test08').appendChild( $(element) );
}
})
</script>
<div id="test09" style="border: 1px solid #000000;background-color:#ccffff;">
<div>sortable1</div>
<div>sortable2</div>
<div>sortable3</div>
</div>
<script>
Sortable.create( 'test09', { tag : 'div' } );
</script>
コールバック
コールバック
<div id="control1" name="word">はてな</div>
<script>new Ajax.InPlaceEditor( 'control1', 'http://localhost/test/', { rows : 1 } );</script>
コールバック
<div id="slider">■</div> <div id="track" style="border:1px solid #000000;height:1em;width:20em;z-index:-1;margin-top:-1em;"></div> <script>new Control.Slider( 'slider', 'track' );</script>
コールバック