古籏一浩のJavaScriptラボ ― 第15回
どこよりも早い「Yahoo! UI Library 3」(YUI 3)入門
2009年10月15日 12時46分更新
※この記事は「古籏一浩のJavaScriptラボ」の第15回です。過去の記事も合わせてご覧ください。
 |
|---|
最新のライブラリーやJavaScriptの新しい活用法を紹介する「JavaScriptラボ」。今回は、9月末にリリースされたばかりの「YUI 3（Yahoo! UI Library Version 3）」を取り上げます。
Yahoo! UI Libraryとは？
「Yahoo! UI Library」（以降、YUI）はその名の通り、ユーザーインターフェース周りを得意とする米ヤフー製のAjaxライブラリーです。YUIは、Ajaxが普及し始めた2005年に登場し、面倒なUI周りを簡単に処理できることから次第に普及していきました。実は、以前取り上げたAjaxフレームワーク「Ext JS」も、もともとはYUIの機能拡張(Extension)として生まれたものです。
YUIはタブパネルやスライダー、ドラッグ＆ドロップ、アニメーション機能など、他のライブラリーやフレームワークを凌ぐ充実したUI部品と豊富な機能を備えています。Yahoo!をはじめとする大規模サイトで使用されている実績もあり、非常に動作が安定しているのも特徴です。Prototype.jsやjQuery、MooToolsなどではうまくいかない複雑なDOM操作（複雑なHTML構造でのエレメント座標値の取得など）も、YUIなら何の問題もなく実現できることも少なくありません。
YUIは非常に高性能なAjaxライブラリーですが、現在広く利用されているjQueryに比べると、手軽さに欠けます。YUIは、組み込む機能に応じてscriptタグで関連ライブラリーファイルを一式読み込まなければならないなど、煩雑な面もあり(*1)、意外と利用されていないのが実情のようです。
そうした中、YUIの新バージョン「Yahoo! UI Library ver 3」（YUI 3）の正式版が2009年9月末にリリースされました。YUI 3では設計が見直され、YUI 2.xに比べて手軽に使えるようになっています（*2）。
 |
|---|
| YUIの公式サイト |
●Yahoo! UI Library ver 3
http://developer.yahoo.com/yui/3/
 |  | |
|---|---|---|
| 簡単なアニメーションのサンプル | ドラッグドロップのサンプル |
この連載では、今回から3回にわたって、簡単なサンプルプログラムを作りながらYUI 3の使い方を解説します。1回目はYUI 3によるマウスオーバー／アウト処理（ロールオーバー処理）を試してみましょう。
●連載ラインナップ
- 第1回 ライブラリの読み込みとイベント処理（この記事）
- 第2回 YUI 3のアニメーション機能を使う
- 第3回 YUI 3を使ったアニメーションスライドショー
*1 途中のバージョンからサポートされたYUILoaderを使えばモジュール単位での読み込みもできます。
*2 手軽に使えるようになった反面、YUI 3はYUI 2.xとは互換性がまったくなく、YUI 2.xで用意されていた機能のほとんどは現時点では利用できません。カレンダーやタブパネル、ウィンドウなど、目立ったUIもほとんどありません。おそらくYUI 2の登場時と同じく、順次追加されていくはずです。
この連載の記事
- 第24回 JavaScriptでRSSからPhotoshop画像を生成！
- 第23回 Adobe BridgeのJavaScriptでXMLを操作しよう
- 第22回 JSでWeb制作を自動化するAdobe Bridge活用入門
- 第21回 飛び出すカルーセルをUIZE Frameworkで作る（後編）
- 第20回 飛び出すカルーセルをUIZE Frameworkで作る（前編）
- 第19回 JS超えた!? UIZE Frameworkの特殊効果を見せます！
- 第18回 JSで超ド派手なアニメが作れる「UIZE Framework」入門
- 第17回 Yahoo! UI Library 3版スライドショーの作り方
- 第16回 Yahoo! UI Library 3で驚きのアニメーションを作成
- 第14回 HTML5のcanvasで作る画像フィルター
- この連載の一覧へ
