11月11日の技術勉強会

g:hatena:id:hatenatech

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とは…

最近1.5 rc3からrc4にバージョンアップした
- 主にバグフィックス
- ファイル構成がごっそり変わった
  - util.jsが削除され、builder.jsが新設。他のutil.jsのコードはeffects.jsに吸収された。

構成

scriptaculous.js
- 他のライブラリをロードする
builder.js
- 要素を作る
effects.js
- エフェクト
dragdrop.js
- ドラッグ＆ドロップを実現
controls.js
- Ajax関連
slider.js
- スライダーインターフェイスを実現

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

effects.js

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

複合エフェクト

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

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

Effect.Fade( element )
Effect.Appear( element )
- フェードイン・フェードアウト

はてな
Effect.Fade
Effect.Appear

Effect.Puff( element )
- 吹いて飛ぶ

Effect.BlindUp( element )
Effect.BlindDown( element )
- スライドして隠される・現れる

Effect.SwitchOff( 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
- ハイライトさせる
- new Effect.Highlight( element )
  - Yellow Fadeはこれ一つで出来る

はてな
Effect.Highlight

Effect.ScrollTo
- スクロールさせる
- new Effect.ScrollTo( element )
  - 指定したエレメントの位置にスクロールする

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 )
- スタイルに記述されている属性値を取り出す

String.parseColor
- #xxxやrgb( xxx, xxx, xxx )といった色指定を#xxxxxxに変換する
- String オブジェクトのインスタンスメソッドとして実装されている

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

その他のライブラリ

ざっと俯瞰

scriptaculous.js

ライブラリをロードする他、他の外部ライブラリを動的に読み込ませることが出来る

Scriptaculous.require

Scriptaculous.require('/path/to/script.js');

builder.js

いまのところBuilder.nodeだけ

Builder.node
- ノードを作る
- new Builder.node( tag, attr, content );

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
- ドロップした時に元の位置に戻るかどうか

コールバック

change
- ドラッグ中に呼ばれる

Droppables.add, Droppables.remove
- ドロップ可能なエレメントを登録する、削除する

オプション

greedy
hoverclass
- ドラッグ可能要素がhoverしているときに適用するclass
accept
- ドロップ出来るドラッグ可能要素のclass

コールバック

onHover
- ドラッグ可能要素がhoverしている時に呼ばれる
onDrop
- ドラッグ可能要素がドロップされた時に呼ばれる

Sortable.create, Sortable.destroy
- ソート可能なブロックを作る


    sortable1
    sortable2
    sortable3

内部の指定された要素が並べ替え可能になる
内部の要素をDraggableにする必要はない
- 中で勝手にやるので

オプション

tag
- ソート対象となる要素
dropOnEmpty
tree
overlap
constraint
containment
- 複数のソート可能ブロック間でドラッグ要素を交換可能にする
handle
only
hoverclass
ghosting
format

コールバック

onChange
- 順番が変化した時（ドラッグ中）
onUpdate
- ドラッグを終えて順番が決まった時

controls.js

Ajax関連処理ライブラリ

Ajax.Autocompleter
- new Ajax.Autocompleter( element, update, url, options )

オプション

paramName
token
frequency
minChars

コールバック

afterUpdateElement

Ajax.InPlaceEditor
- クリックして編集可能になる要素を作る
- new Ajax.InPlaceEditor( element, url, options )

はてな

オプション

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

コールバック

onComplete
onFailure

slider.js

スライダーインターフェイスを実現するライブラリ

Control.Slider
- スライダーを作る
- new Control.Slider( element, track, options )

■

オプション

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

コールバック

onSlide
onChange