Ajax YUIライブラリを使う準備 [Javascript] All About

Ajax YUIライブラリを使う準備

1: Yahoo! User Interface Library(YUI)

2: ダウンロードする

3: 解凍したファイルの構成

4: 設置

5: ネームスペース

YUIのTreeView

Yahoo! User Interface Library(YUI)は、Yahoo!が提供するJavaScriptライブラリで、Ajaxを含めたDHTMLのテクニックを使用することで、リッチで対話的なウェブアプリケーションを簡単に作成するためのユーティリティやコントロール群です。

私の記事では、これまでも、何度か紹介し、利用もしてきました（ Yahoo! UIのTreeViewを使う2 、 YUIのツリーメニューで動的ロード、 Google Maps+YUIメニューツリー、マッシュアップ3 など）が、この度、 2007年2月に初のv2レベルバージョンであるv2.2.0がリリースされました。そこでこの機会に、YUIの概略を押さえつつ簡単で入門的な使い方を少し紹介してみたいと思います。

YUIのCalendar

Ajaxの爆発的な流行と共に、prototype.jsやDojo、jQueryなどなどJavaScriptライブラリがいくつもリリースされていますが、YUIはその中でも丁寧なコードと充実したドキュメントや精力的なメンテナンスで、いわば正統派なライブラリと呼んでもよいポジションにあるのではないかと思います。

YUIのMenu

(※今回、紹介するのは、このv2.2.0です。したがって、今後リリースされるバージョンによっては違いが発生する可能性もあり得ますのであらかじめご了承ください。)

Yahoo! User Interface Library(YUI)

YUIは、DOMスクリプティングや、DHTMLやAJAXなどのテクニックを使用するJavaScriptで書かれたクロスブラウザなライブラリです。また、いくつかのCSSのリソースも含んでおり、それらのすべてがオープンソースとして BSD license のもとSourceForgeで公開(YUI Library)されています。

Yahoo!によるYUIのメインサイトは、Yahoo! User Interface Library です。ここは英語ではありますが、最新のドキュメントや解説、サンプルが充実しています。バージョンアップやバグフィックスなどの情報は、BlogのRSSなどをチェックすると良いかもしれません。また、拙著ですが、『Ajax実践テクニック』のサポートページにもYUI、prototype.jsやDojoなど他のライブラリも含めた若干のサンプルがありますので参考になれば幸いです。

YUIには、v2.2.0現在次のようなJavaScriptによるユーテリティやコントロールが用意されており、おそらく今後も順次便利なライブラリが追加されていくと思われます。


YUI Library Utilities(ユーテリティ):

Animation Utility (DOM要素移動や不透明度などのDHTMLアニメーション)
Browser History Manager [実験](状態の遷移を記録する試み) 
Connection Manager (Ajax用XMLHttpRequestなどをサポート)
Drag and Drop Utility (ドラッグドロップをサポート)
DOM Collection (一般的なDOMを簡素化するメソッドなど)
Element Utility [ベータ](DOMを簡素化するラッパーオブジェクト)
Event Utility (クロスブラウザで簡便なイベントサポート)
The YAHOO Global Object (ネームスペースYAHOOオブジェクトを提供)

YUI Library Controls(コントロール):

AutoComplete (Ajaxなオートコンプリート機能)
Button Control (チェックボックス、ラジオボタンなど)
Calendar (カレンダー)
Container (Module,Overlay,Panel,Tooltip,Dialog,SimpleDialogなど) 
DataTable [ベータ](ソートなどのできるデータテーブル)
Logger (デバッグコンソール)
Menu (メニュー)
Slider (スライダー)
TabView (タブビューア)
TreeView (ツリーメニュー)

ダウンロードする

JavaScriptのライブラリには、配布サイトからダウンロードしたものを自分のサイトへ置いて使うものと、 SCRIPT要素のSRC属性によって、先方のサイトからライブラリを直接読み込んで利用するものがあります。

天気予報ウジェットなどのWebサービス的なものは後者のケースが多いと思いますが、YUIは、一般的にはSourceForgeからダウンロードして、解凍し、必要な.jsファイルなどを自分のサイトへ置いて利用するスタイルとなります。

最新版は、下記でダウンロードできます。

ダウンロード→YUI Library

*追記 2007.10からWeb上で直接リンクして利用できる「Serving YUI Files from Yahoo! Servers」が始まりました。これは、ダウンロードしなくても、必要なライブラリのURLをSCRIPTタグのSRC属性へ記述するだけで利用できます。
Serving YUI Files from Yahoo! Servers

ダウンロードしたら次にファイル構成を確認しましょう。

次ページ

1 2

次のページへ