YUI3を使うための準備
YUI3の全体像が見えてきたところで、次にYUI3を使うためにはどうしたらよいかを説明したいと思います。
YUI3はYahoo!のダウンロードページからダウンロードできます。「YUI Seed」と「Full Developer Kit」があります。「YUI Seed」はコアの部分にアクセスするためのシードファイル（yui-min.js）のダウンロードです。「Full Developer Kit」はドキュメントやサンプル、YUIのJavaScriptやCSSなどが入っている圧縮ファイルです。以下の図は「Full Developer Kit」をダウンロードして解凍したファイルの画像です。
Yahoo!ではこのライブラリーを、BSDライセンスという非常に扱いやすいライセンス形態で無償配布しています。だれでもダウンロードして使用することができます。
BSDライセンスとは、オープンソースソフトウエアで使用されるライセンスの一つで、無保証・免責を宣言し、配布する時に著作権表示を行うことのみを条件とするものです。
非商用でも商用でも自由に利用することができ、改造も自由というビジネスにも活用できるライセンスです。
基本的なスクリプトの書き方
いよいよ書き方です。それぞれの詳しい書き方は次回からということで、今回は基本の部分のみに触れたいと思います。コアの部分はJavaScriptで書かれており、HTMLに以下のリストを書いて使用できるようにします。yui-min.jsの設定部分はリスト1に書いています。
以下はフレーム画像を表示させてだんだん消えていくアニメーション効果を使用しての例題です。
<html>
<head>
<script src="http://yui.yahooapis.com/3.0.0pr1/build/yui/yui-min.js" type="text/javascript"></script> （1）
<script type="text/javascript">
window.onload = function() {
YUI().use("anim-base", function(Y) { （2）
var myAnim = new Y.Anim({
node: '#demo',
to: {
width: 0,
height: 0
}
});
myAnim.run(); （3）
});
}
</script>
</head>
<body>
<div id="demo" style="background-image:url(./kiwaku.png); width: 600px; height: 480px"> （4） </body>
</html>
（1）の部分のsrcは「./yui-min.js」にしても良いです。最初に600x480のフレームの画像が現れ、だんだん消えていきます。ターゲットは（4）のid=demoの部分です。（2）の部分がYUI3の基本の書き方になります。
YUI().use(読み込むモジュール名,...,処理関数)
ここでは、anim-baseモジュールを読み込み、id="demo"の要素を0×0のサイズになるまでアニメーションするためのY.Animオブジェクトを生成しています。実際にアニメーションを実行しているのは（3）のrunメソッドです。
まとめ
YUI3の全体像と使用するための準備、基本の書き方を説明しました。次回からはコアの部分を中心に、各ユーティリティなどを、例題をみながら説明していきたいと思います。
