第3回 YUIを使ってみよう

Yahoo! YUI Libraryを利用する

　前回までで、Yahoo! UI Library（YUI）について紹介しました。それでは、実際にYUIを利用してみましょう。

　YUIを利用する方法は、以下の3種類があります。

1.ダウンロードをして利用する
2.リンクして利用する
3.Google AJAX Libraries APIを利用する

　最も一般的なのは、ダウンロードをして利用する方法です。まずは、YUIのWebサイト（http://developer.yahoo.com/yui/）に移動します。画面の真ん中上部に「Download YUI」というボタンがあるので、これをクリックしましょう。

　YUIは、「SourceForge.net（http://sourceforge.net/）」というファイル管理サイトで管理されています。ですので、SourceForge.netにジャンプされ、自動的に最新版のダウンロードがはじまります。

　ダウンロードしたファイルを解凍すると、ドキュメントやサンプルなど、非常に多くのファイル群が含まれていますが、実際の利用に必要なディレクトリは「build」ディレクトリになります。この中でさらにコントロールごとにディレクトリが分かれ、さらに中にはそれぞれ以下のファイルが含まれます。

・xxx.js
・xxx-debug.js
・xxx-min.js

　なにも付いていないファイル名が基本のソースファイルで、「-debug」と付いたファイルは、デバッグ用にメッセージの出力処理などを加えたファイル、「-min」は元のファイルの内容はそのままに、サイズを小さくしたファイルになります。

　通常、利用するだけであれば「-min」のファイルを使うのが良いでしょう。改造したり、より深く使いたい時などに、ほかのファイルを使うことになります。

そのほかの利用方法

　YUIは、ダウンロードをしなくてもYahoo!のサーバーから直接リンクして利用することもできます。「yui.yahooapis.com」というWebサーバーに、最新版を含めたYUIのライブラリが保管されており、直接利用することができるのです。

　例えば、前回（http://thinkit.jp/article/755/1/）紹介した「ボタン」のサンプルプログラムを見てみましょう。

http://developer.yahoo.com/yui/button/

　このページの「Getting Started」の項目を見ると、次のようにしてライブラリが参照されています。

<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>

　この記述により、利用者はファイルをダウンロードすることなく、YUIの最新版を利用できるというわけです。CSSファイルも、同様に直接リンクをすることができます。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">

　各ライブラリのリンク先は、ドキュメントやサンプルなどに記載されています。またバージョンアップした時に、利用しているライブラリもバージョンアップしたい場合は、ディレクトリ部分を変えればバージョンアップができ、非常に便利です。

　また、Googleが提供している、Ajaxライブラリを直接リンクできるサービス「Google AJAX Libraries API（http://code.google.com/intl/en/apis/ajaxlibs/）」を利用することもできます。

　このサービスでは、「Prototype（http://www.prototypejs.org/）」「jQuery（http://jquery.com/）」など、非常に多くのJavaScriptをサポートしており、YUIもそのラインアップに含まれているのです。

　例えば、先ほどと同様に「ボタン」のライブラリを利用するためには次のように記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/button/button-min.js"></script>

　YUIよりも、最新版への対応などは遅くなる可能性がありますが、ほかのJavaScriptライブラリと同時に使いたい場合に便利ですし、多くの人が同じ場所からライブラリを使うことで、訪問者のWebブラウザにキャッシュが効率よく貯（た）まり、全体の動作速度が速くなるという利点があります。

　次回は、実際にライブラリを参照しながら簡単なプログラムを作ってみましょう。