米Yahoo!が開発した「The Yahoo! User Interface Library」(以下、YUI)は、UI(ユーザーインタフェース)の機能を多く持つAjaxライブラリです。UI機能という点では他のAjaxライブラリとは比較にならないほど数が多く高機能です。
ただし、YUIだけで全てが済むことはありません。明らかに機能が不足している面もあるため、他のライブラリと組み合わせるか、独自に作成しなければならないこともあります。この点に留意すれば、UI部分の強化および補助という観点でYUIは非常に強力なライブラリとなります。
本稿では、YUIの初期の頃から用意されているUIの1つ、カレンダー機能について説明します。このカレンダー機能はバージョンアップのたびに修正が加えられてきたため、少し古いバージョンで解説してあるページや書籍では役に立たないことがあります。ここではYUIの最新バージョン2.3.1(2007年11月13日現在)で説明します。
YUIの入手
まず、YUIを入手しましょう。YUIのダウンロードはこのURLにある[Download YUI]ボタンをクリックします。
 |
「Yahoo! Developer Network」内の「The Yahoo! User Interface Library」からダウンロードする |
ダウンロードしたZIP形式のファイルを解凍すると、build、docs、examplesフォルダとREADMEファイルが生成されます。今回必要になるファイルは、以下の2つのJavaScriptファイルと、build/calendar/assetsフォルダ内のファイルです(図参照)。
- 「yahoo-dom-event.js」(yahoo-dom-event配下)
- 「calendar.js」(build配下calendarの下)
- build/calendar/assetsフォルダ内にある全ファイル
 |
必要ファイルの抽出 |
これらのファイルを適当なフォルダに入れて利用します。今回解説しているサンプルは下図のフォルダ構成になっています。
 |
本稿用の構成 |
