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

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

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

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

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

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

  • 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だけ
dragdrop.js
  • Draggable
    • ドラッグ可能なエレメントを作る
    • new Draggable( element, options );
はてな

オプション

    • 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
    • ドロップ可能なエレメントを登録する、削除する

オプション

コールバック

    • onHover
      • ドラッグ可能要素がhoverしている時に呼ばれる
    • onDrop
      • ドラッグ可能要素がドロップされた時に呼ばれる
sortable1
sortable2
sortable3
    • 内部の指定された要素が並べ替え可能になる
    • 内部の要素をDraggableにする必要はない

オプション

コールバック

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

オプション

    • paramName
    • token
    • frequency
    • minChars

コールバック

    • afterUpdateElement
はてな

オプション

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

コールバック

    • onComplete
    • onFailure
slider.js
  • Control.Slider

オプション

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

コールバック

    • onSlide
    • onChange