第3回：YUIライブラリと外部JSの呼び出し手法 (1/2)
 |
|
| JSライブラリ・ラボ - これで君もライブラリ開発者だ！ |
第３回：YUIライブラリと外部JSの呼び出し手法
著者：川崎 有亮 2007/4/2
|
|
|
|
1 2 次のページ
|
|
| YUIライブラリを解剖する
|
「第２回：jQueryライブラリの内部とonloadイベント記法」で解説したPrototypeとjQueryはどちらも個人がリリースするライブラリでしたが、今度は、より規模の大きなライブラリの事例をご紹介します。Yahoo! UIライブラリ（YUI）は、米国Yahoo!がBSDライセンスで提供するJavaScriptライブラリです（図3、注5）。
図3：Yahoo! UIライブラリの配布サイト
個人だけでなく、YUIのように大手企業もライブラリを公開する事例が増えてきています。YUIでは、Ajaxやイベント管理といった基本機能に加えて、アニメーションやドラッグ＆ドロップ処理のユーティリティ、さらにカレンダー／ツールチップ／ダイアログ／タブ表示／ツリー表示といった豊富なウィジェットが提供されているのが特徴です。
YUIは、表3に示す14のモジュールで構成されています。
| モジュール名 |
主な用途 |
| animation |
アニメーション |
| autocomplete |
オートコンプリート |
| calendar |
カレンダー・ウィジェット |
| connection |
Ajax通信 |
| container |
ツールチップ、ダイアログなど |
| dom |
DOM操作 |
| dragdrop |
ドラッグ＆ドロップ |
| event |
イベント管理 |
| logger |
デバッグ用ログ管理 |
| menu |
メニューバー・ウィジェット |
| slider |
スライダ・ウィジェット |
| tabview |
タブ・ウィジェット |
| treeview |
ツリー・ウィジェット |
| yahoo |
ベースクラス |
表3：YUIライブラリのモジュール構成
このうち、ベースとなるyahoo.jsモジュールは必須ですが、それ以外のモジュールはWebページ内で必要な機能に応じて、適切なモジュールのみを呼び出して利用します（表4）。
| モジュール・ファイル名 |
主なオブジェクト |
| build/animation/animation.js |
YAHOO.util.Anim、YAHOO.util.Easing、YAHOO.util.Motion |
| build/autocomplete/autocomplete.js |
YAHOO.widget.AutoComplete、YAHOO.widget.DataSource |
| build/calendar/calendar.js |
YAHOO.widget.Calendar、YAHOO.widget.CalendarGroup、YAHOO.widget.Calendar2up |
| build/connection/connection.js |
YAHOO.util.Connect |
| build/container/container.js |
YAHOO.widget.Tooltip、YAHOO.widget.Panel、YAHOO.widget.Dialog |
| build/dom/dom.js |
YAHOO.util.Dom、YAHOO.util.Region、YAHOO.util.Point |
| build/dragdrop/dragdrop.js |
YAHOO.util.DragDrop、YAHOO.util.DDProxy、YAHOO.util.DDTarget |
| build/event/event.js |
YAHOO.util.CustomEvent、YAHOO.util.Subscriber、YAHOO.util.Event |
| build/logger/logger.js |
YAHOO.widget.LogMsg、YAHOO.widget.LogWriter、YAHOO.widget.Logger |
| build/menu/menu.js |
YAHOO.widget.Menu、YAHOO.widget.ContextMenu、YAHOO.widget.MenuBar |
| build/slider/slider.js |
YAHOO.widget.Slider、YAHOO.widget.SliderThumb |
| build/tabview/tabview.js |
YAHOO.util.Element、YAHOO.widget.Tab、YAHOO.widget.TabView |
| build/treeview/treeview.js |
YAHOO.widget.TreeView、YAHOO.widget.Node、YAHOO.widget.RootNode |
| build/yahoo/yahoo.js |
YAHOO、YAHOO.util、YAHOO.widget |
表4：YUIライブラリのモジュールと主なオブジェクト
例えば、カレンダー・ウィジェットを利用する場合は、リスト2のように4つのJavaScriptファイルを呼び出します。
リスト2：YUIライブラリでカレンダーを利用する例
<script src="inc/yahoo.js" type="text/javascript"></script>
<script src="inc/event.js" type="text/javascript"></script>
<script src="inc/dom.js" type="text/javascript"></script>
<script src="inc/calendar.js" type="text/javascript"></script>
カレンダーモジュールを例にすると、表5のようなファイルで構成されています。
| ファイル名 |
内容 |
| build/calendar/README |
モジュールの更新履歴 |
| build/calendar/calendar.js |
JavaScriptファイル（通常版） |
| build/calendar/calendar-debug.js |
デバッグ用ログ出力付バージョン |
| build/calendar/calendar-min.js |
コメント除去した軽量バージョン |
| build/calendar/assets/ |
画像ファイルやCSSファイルなど |
| docs/Calendar.js.html |
calendar.jsソース閲覧用HTML |
| docs/YAHOO.widget.Calendar.html |
Calendarクラスのドキュメント |
| docs/module_calendar.html |
calendarモジュールのドキュメント |
| examples/calendar/index.html |
calendarクラスのサンプルコード |
表5：calendarモジュールの主な構成ファイル
実際のWebページで利用する際に必要となるのは、軽量版のcalendarmin.jsまたは通常版のcalendar.jsのどちらかのJavaScriptファイルみです。また、JavaScriptソース中にJavaDocの形式で記述したコメントから、各種ドキュメントファイルを自動生成する仕組みを利用しているようです。
※注6：
YUIに関して、本稿では執筆時点の最新版であるバージョン0.12.2を解説しますが、2007年4月現在ではバージョン2.2.0がリリースされています。バージョンが大きく上がっていますが、ルールの変更により、0.12.2の直後のバージョンが2.2.0となっています。2.2.0では新しいコンポーネントが複数追加された他、カレンダーモジュールなど従来な主要な機能もそのまま利用できます。
|
1 2 次のページ
|
|
|
|
著者プロフィール
川崎 有亮
1977年東京生まれ。AjaxなどWeb技術のアーキテクト。株式会社かっぺを経て、現在は株式会社リクルート事業開発室に所属。技術評論社「Ajax／実装のための基礎テクニック」（共著）など書籍・雑誌記事の執筆も多数。
Kawa.net xp：http://www.kawa.net/
|
|
|
|
|
|
|
|
|
|
