Yahoo User Interface Library - Yahoo.util.ColorAnimクラス -

先日は、Yahoo.util.Animクラスについて書きましたが、今日はYahoo.util.ColorAnimクラスについて書いてみます。
と言っても、ほとんど同じなんですが・・・。
サンプルは、引き続きこちらです。

Yahoo.util.ColorAnimクラスは、背景色・文字色・枠線の色などを滑らかに変化させる際に使用します。
Yahoo.util.Animクラスから派生していて、使い方も同じです。

var attributes = {
    backgroundColor : {from:'#ffffff', to:'#ff0000'},
    color : {from:'#000000', to:'#0000ff'}
};

var anim = new YAHOO.util.ColorAnim('id', attributes, 0.5);

anim.animate();

違う点は、指定する属性が色に関するものになり、値も16進数での指定となります。

Yahoo User Interface Library - Yahoo.util.Animクラス -

先日、Yahoo User Interface Libraryの単純なエフェクトサンプルを作成してみましたが、今日はクラスの使い方を簡単に書いておきます。

最低限必要なファイルは、yahoo.js、event.js、dom.js、animation.js ですので、まずこれらをインクルードして下さい。

アニメーションに関するクラスは animation.js 定義されていて用途によって幾つかのクラスがあるのですが、基本となるのはYahoo.util.Animクラスです。
Yahoo.util.Anim クラスを使うと、要素の大きさ・位置などCSSで数値として指定できる属性を、指定した時間で徐々に変化させアニメーション することが出来ます。
まず、コンストラクタで、

var attributes = {
    width:{from:10, to:100},
    height:{from:10, to:100},
};

var anim = new Yahoo.util.Anim('id', attributes, 0.5, YAHOO.util.Easing.backOut);

のように指定します。
最初の引数は、変化させる要素のインスタンスまたはIDです。

変化させる属性と値は、attributes のようにオブジェクトで第2引数に指定します。
上の例では、幅と高さが10pxから100pxへ変化します。
fromは必須ではなく、指定しなければ現在の値が適用されます。
toの代わりにby:100とすると、大きさが100pxずつアニメーションのたびに大きくなります。
他に指定できる属性としては、私が試してみたものでは、top、left、borderWidth、fontSizeが可能でした。
DHTMLでスタイルを数値で指定できるものならOKではないでしょうか。
また、ブラウザによって指定方法が異なる透過度は、
opacity : { from : 1.0, to : 0 }
と指定することで、透過をサポートしているブラウザなら動作します。（数値は0から1.0の範囲）

第3引数はアニメーションの開始から終了までの時間で、秒単位で指定します。
この引数はオプションで、指定しなければデフォルトの1秒が適用されます。

第4引数はEasingというもので、例えば物にぶつかってバウンドするように、動きに少し変化をつけることが出来ます。
これもオプションで、指定しなければ変化はつきません。


アニメーションの定義はこれでOKですので、次はアニメーションの実行です。
実行は以下のように

anim.animate();

と、animateメソッドを呼び出すだけです。

ただ、例えば、要素の幅と高さをゼロにした後に要素を非表示にするなど、アニメーションの終了時に何か処理をしたい場合もあると思います。
そのような場合に、

anim.animate();
document.getElementById('id').style.visibility = 'hidden';

としても、思い通りの動きにはなりません。
animateメソッドは、内部ではタイマーを使ってアニメーションを実行しており、アニメーションの終了を 待たずに次の行が実行されてしまうためです。

したがって、終了時に何か処理をしたい場合は、以下のようにonCompleteのsubscribeメソッドを使って終了時の関数を指定する必要があります。

var animCompleted = function(){
    document.getElementById('id').style.visibility = 'hidden';
};
anim.onComplete.subscribe(animCompleted);

anim.animate();

また、サイズを小さくする場合はスタイルで overflow : hidden を指定しておかないと中身より小さくならないため 思い通りの動きになりませんので、注意してください。

Yahoo User Interface Libraryのエフェクトサンプル

先日はFlex2のエフェクトについて書きましたが、DHTMLでも動きのあるページを作ることは出来ます。
そのようなページの作成を補助してくれるJavaScriptライブラリは幾つかありますが、Yahoo User Interface Libraryを使った サンプルを少しご紹介したいと思います。

まずは、こちらからYahoo UI Libraryをダウンロードします。
ダウンロードしたファイルを解凍すると、examples、docs、buildというフォルダがあり、buildフォルダ以下にjsファイルがありますので、 これらを目的に応じてインクルードして使用します。
なお、yahoo フォルダの yahoo.js は常にインクルードしておきます。

エフェクトは、animation フォルダの中の animation.js 内のクラスを主に使用します。
どのようなことが出来るかはサンプルページを実際に見ていただいた方が早いと思いますので、興味のある方はサンプルページを見てみてください。
Yahoo User Interface Libraryのエフェクトサンプル

明日以降、クラスの使い方などを簡単に書いてみたいと思います。

Spry framework for Ajax

Adobeが提供しているJavaScriptライブラリに、Spry framework for Ajaxというものがあります。
使い方が他の多くのライブラリとは異なり、JavaScriptのコードは最小限のものしか記述せず、 HTMLに細工をしてサーバーのXMLデータをバインドするといった感じで、雰囲気としてはASPXに サーバーコントロールのタグを記述してバインドするような感じですかね。
BSDライセンスのもと、フリーで利用可能です。
詳細については、また後日書いてみたいと思います。

Flash Player 9もリリースされ、Flex 2のリリースも近いようですので、楽しみですね。

prototype.js その他の便利機能 Part2

少し間があいてしましましたが、prototype.jsの便利な機能の続きです。

Positionクラス
このクラスは、要素の位置を操作する際に使用します。

positionedOffset メソッド
CSSスタイルのpositionを指定していない際に、要素の位置を得る場合に便利です。
引数は要素のインスタンスで、戻り値はleftとtopの数値が格納された配列です。
使用例：

var p = Position.positionedOffset($("ElementId"));
alert("left=" + p[0] + ",top=" + p[1]);

absolutize メソッド
CSSスタイルのpositionをabsoluteにし、位置も計算して設定してくれます。
このメソッドでは内部で$()関数を使用していますので、引数は要素のIDまたはインスタンスでOKです。
この辺は統一してもらえると助かりますね。
使用例：

Position.absolutize("ElementId");

Eventクラス
このクラスは、要素のイベントに関する機能を提供しています。

observe メソッド
addEventListenerの代わりとして使用することが出来ます。
IEはattachEventで、FirefoxなどはaddEventListenerでと使い分ける部分がカプセル化されています。
引数は要素のIDまたはインスタンス、イベント名、イベントを処理する関数、キャプチャを行うかどうかをtrueかfalseで指定します。
この関数で指定したコールバック関数には、引数としてEventオブジェクトが渡ってきます。
使用例：

Event.observe("ElementId", "click", CallbackFunc, false);

stopObserving メソッド
observeメソッドで追加したイベントリスナーを削除します。
引数はobserveメソッドと同じです。
使用例：

Event.stopObserving("ElementId", "click", CallbackFunc, false);

stop メソッド
イベントは親要素へ伝播していきます（イベントバブリング）が、それをキャンセルすることが出来ます。
引数は、イベントリスナーに渡されるEventオブジェクトです。
使用例：

function EventListener(e)
{
    ......
    Event.stop(e);
}

Form.Element.Observer クラス
Form要素の値の変更を監視することが出来ます。

コンストラクタ
Form要素の値の変更を監視する条件などをセットします。
引数は、Form要素のIDかインスタンス、監視する間隔（秒）、値変更時に呼び出される関数です。
使用例：

var w = new Form.Element.Observer("ElementID", 1, CallbackFunc);

getValue メソッド
Form要素の値を取得します。
使用例：

var w = new Form.Element.Observer("ElementID", 1, CallbackFunc);
function CallbackFunc()
{
    var v = w.getValue();
}

などなど、使用頻度の高そうなものを列挙してみましたが、他にもありますので機会があればまた書きたいと思います。

prototype.js その他の便利機能

prototype.js にはAjax以外にも便利な機能があります。
その中からDOMの要素に関する機能をいくつか紹介しようと思います。

$() 関数
この関数は、DHTMLで頻繁に出てくる document.getElementById() のショートカットとして使用できます。
使用例：

var element = $("ElementId");
element.innerHTML = "....";

また、この関数には複数のIDを指定することも出来ます。
その場合は、指定した要素が配列で返ってきます。
使用例：

var elements = $("ID1", "ID2", "ID3");
for(var i=0;i<elements.length;i++){
    elements[i].style.display = "none";
}

Elementクラス
このクラスは、DOMの要素を操作する際に便利です。
以下のようなメソッドが用意されています。

getDimensions メソッド
要素のサイズを取得することが出来ます。
引数には要素のIDまたはインスタンスで、 戻り値は、widthとheightというプロパティを持つオブジェクトです。
使用例：

var d = Element.getDimensions("ElementId");
alert("width=" + d.width + ",height=" + d.height);

getStyle メソッド
要素のスタイルを取得できます。
引数は要素のIDまたはインスタンスと取得したいスタイル名で、戻り値はCSSスタイルの値です。
使用例：

alert(Element.getStyle("ElementId", "border"));

setStyle メソッド
要素のスタイルを設定できます。
引数は要素のIDまたはインスタンスと設定したいスタイル名と値のペアです。
使用例：

var styles = {"color":"red", "background-color":"blue"};
Element.setStyle("ElementId", styles);

hide メソッド
CSSスタイルのdisplayをnoneに設定して、要素を非表示にします。
引数は要素のIDまたはインスタンスです。複数指定することが出来ます。
使用例：

Element.hide("ElementId1", "ElementId2");

show メソッド
hideメソッドとは逆に、要素を表示します。
引数は要素のIDまたはインスタンスです。複数指定することが出来ます。
使用例：

Element.show("ElementId1", "ElementId2");

toggle メソッド
要素の表示状態を反転します。表示状態であれば非表示に、非表示状態であれば表示状態になります。
引数は要素のIDまたはインスタンスです。複数指定することが出来ます。
使用例：

Element.toggle("ElementId1", "ElementId2");

remove メソッド
要素を削除します。hideメソッドと見た目は同じような動きですが、元に戻すことは出来ません。
引数は要素のIDまたはインスタンスです。
使用例：

Element.remove("ElementId");

Elementクラスには他にもメソッドがありますので、機会があればご紹介したいと思います。
prorotype.jsには、他にもまだまだ便利な機能がありますので、明日も引き続きご紹介したいと思います。

prototype.js で Ajax

prototype.jsはJavaScriptのライブラリで、色々と便利な機能を提供していますが、 やはり、このライブラリのAjaxの機能が目当てという方が多いんじゃないでしょうか。
実際、XMLHttpRequest関係のブラウザ毎の差異を吸収してくれて、とても簡単に利用できます。

以下のコードはサーバーからデータを受信するものですが、たったこれだけでOKです。

function showData(res)
{
    alert(res.responseText);
}

function getData()
{
    var url = "test.txt";
    var options = {method:"GET", onComplete:showData};
    new Ajax.Request(url, options);
}

試してみる

アクセスできるURLは、セキュリティの制限により同一のドメインのみに限られています。
optionsの指定は、JSONフォーマットとか言われたりしますが、キーと値のペアをカンマで区切って指定します。
他に指定できるoptionとしては、リクエストする際に渡すパラメータを指定するparametersや、通信の同期・非同期を指定するasynchronousなどがあります。
asynchronousのデフォルト値はtrueになっており、何も指定しなければ非同期通信となります。
onCompleteでは、通信が完了した際に呼ばれる関数を指定しています。
この関数には引数としてXMLHttpRequestオブジェクトが渡されますので、例のようにresponseTextで値を取り出します。
new Ajax.Request(url, options)の部分は、私は最初は少し違和感を感じましたが、この1行でリクエストを送信します。

この他、HTMLの要素の中身のみを更新する目的で利用するAjax.Updaterというクラスもあります。

function updateData()
{
    var url = "test.html";
    var options = {method:"GET"};
    new Ajax.Updater("ElementId", url, options);
}

試してみる

ほとんどAjax.Requestの時と同じです。
Ajax.Updaterの最初の引数には、中身を更新する要素のIDまたはインスタンスそのものを指定します。
test.htmlには、
<span style="color:red;"><b>Hello Ajax!</b></span>
と書いてあり、通信が完了すると自動的に受け取った値を要素に挿入するといった動作になります。
したがって、サーバーが返す値はHTMLタグである必要があります。
上の実行例ではbuttonタグのIDを指定していますので、実行するとボタンのキャプションが変わります。