Hatena::Grouphatena

はてな技術発表会日記 このページをアンテナに追加 RSSフィード

株式会社はてなでは日々、開発者が持ち回りでひとつの技術トピックについて発表を行っており、公開可能なものについては、その内容を音声と動画で公開しています。

 | 

2005-11-11

11月11日の技術勉強会

21:33 | 11月11日の技術勉強会 - はてな技術発表会日記 を含むブックマーク はてなブックマーク - 11月11日の技術勉強会 - はてな技術発表会日記

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

scriptaculousとは…

構成

effects.jsをメインに見てみる

effects.js

  • エフェクトライブラリ
  • エフェクトを手軽に作ることの出来るコアエフェクトクラス
  • 予め組み合わせてある複合エフェクト
複合エフェクト

コアエフェクトを組み合わせて作られたエフェクト

自分でエフェクトを作る時のサンプルコードにもなる

<div id="test03">はてな</div>
<div onclick="Effect.Fade('test03')">Effect.Fade</div>
<div onclick="Effect.Appear('test03')">Effect.Appear</div>
  • Effect.Puff( element )
    • 吹いて飛ぶ
  • Effect.BlindUp( element )
  • Effect.BlindDown( element )
    • スライドして隠される・現れる
  • Effect.DropOut( element )
    • 落ちて消える
  • Effect.Shake( element )
    • ふるふる
  • Effect.SlideUp( element )
  • Effect.SlideDown( element )
    • スライドして隠される・現れる
    • BlindUp/Downとはちょっと違う
  • Effect.Squish( element )
    • つぶれる
  • Effect.Grow( element )
  • Effect.Shrink( element )
    • 縮む・膨らむ
  • Effect.Pulsate( element )
    • 点滅
  • Effect.Fold( element )
    • 折り畳む
コアエフェクト

クラスになっている

newすればデフォルト動作をする(コンストラクタを動かすだけでエフェクトが適用される)

  • Effect.Highlight
<div id="test04">はてな</div>
<div onclick="new Effect.Highlight( 'test04' );">Effect.Highlight</div>
  • Effect.Scale
    • サイズを変化させる
    • new Effect.Scale( element, percent )
  • Effect.MoveBy
    • エレメントを移動させる
    • new Effect.MoveBy( element, toTop, toLeft )
  • Effect.Opacity
    • 透明度を変化させる
    • new Effect.Opacity( element )
<div id="test05">はてな</div>
<div onclick="
    new Effect.Opacity( 'test05', {
        from : 1.0,
        to : 0.0
    });
">Effect.Opacity</div>
    • サンプルコードは、オプションで開始と終了を設定している
  • Effect.Parallel
    • 複数のエフェクトを並列動作させる
    • new Effect.Parallel( effects )
      • エフェクトを順次実行するのは『並列動作』ではない
      • 順次の場合は、afterFinishInternalにオブジェクトセットする
<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>

オプションを設定すれば挙動を変えられる

  • duration
    • エフェクトの所要時間(秒)
  • from
  • to
    • 開始時と終了時(Opacityで0.5(半透明)から始めたりできる)
  • delay
    • イベント開始からエフェクト開始までの遅れ(秒)

開始や終了の時にフックすることも出来る

  • beforeStartInternal
    • 開始直前
    • 初期化などは済んだ状態
  • beforeSetupInternal
  • afterSetupInternal
  • beforeUpdateInternal
  • afterUpdateInternal
  • beforeFinishInternal
  • afterFinishInternal
    • 終了後

旧util.jsから移動したユーティリティもある

  • Element.getStyle( element, style )
  • Element.Class.toggle( element, className )
  • Element.Class.toggle( element, className1, className2 )
    • classNameをトグルする
      • ( element, className )ならclassNameをオンオフ
      • ( element, className1, className2 )ならclassName1とclassName2をトグル

その他のライブラリ

ざっと俯瞰

scriptaculous.js
Scriptaculous.require('/path/to/script.js');
builder.js
  • いまのところBuilder.nodeだけ
<div id="test01"></div>
<script type="text/javascript">
$('test01').appendChild(
    Builder.node(
        'span',
        { style : 'font-size: large' },
        'はてな'
    )
);
</script>
dragdrop.js
  • Draggable
    • ドラッグ可能なエレメントを作る
    • new Draggable( element, options );
<div id="test07">はてな</div>
<script type="text/javascript">new Draggable('test07')</script>

オプション

    • handle
    • starteffect
      • 例えばデフォルトでは、ドラッグ開始時に半透明になるエフェクトが入っている
      • starteffect: function(element) { new Effect.Opacity(element, {duration:0.2, from:1.0, to:0.7}); }
    • reverteffect
    • endeffect
    • zindex
    • revert
      • ドロップした時に元の位置に戻るかどうか

コールバック

  • Droppables.add, Droppables.remove
    • ドロップ可能なエレメントを登録する、削除する
<div id="test08" style="height:100px;width:100px;"></div>
<script type="text/javascript">Droppables.add('test08')</script>

オプション

コールバック

    • onHover
      • ドラッグ可能要素がhoverしている時に呼ばれる
    • onDrop
      • ドラッグ可能要素がドロップされた時に呼ばれる
<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>
    • 内部の指定された要素が並べ替え可能になる
    • 内部の要素をDraggableにする必要はない

オプション

コールバック

controls.js
  • Ajax.Autocompleter
    • new Ajax.Autocompleter( element, update, url, options )

オプション

    • paramName
    • token
    • frequency
    • minChars

コールバック

    • afterUpdateElement
<div id="control1" name="word">はてな</div>
<script>new Ajax.InPlaceEditor( 'control1', 'http://localhost/test/', { rows : 1 } );</script>

オプション

    • okText
    • cancelText
    • savingText
    • formId
    • externalControl
    • rows
    • cols
    • size
    • savingClassName
    • formClassName
    • loadTextURL
    • loadingText
    • callback
    • ajaxOptions

コールバック

    • onComplete
    • onFailure
slider.js
  • Control.Slider
<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>

オプション

    • axis
    • increment
    • step
    • alignX
    • alignY
    • disabled
    • maximum
    • minimum
    • sliderValue
    • handleImage
    • handleDisabled
    • values
      • [10, 20, 30, 40]

コールバック

    • onSlide
    • onChange
 |