米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フォルダ内にある全ファイル

必要ファイルの抽出

これらのファイルを適当なフォルダに入れて利用します。今回解説しているサンプルは下図のフォルダ構成になっています。

本稿用の構成