ライブラリとは

　Yahoo! UI Library（YUI）を紹介する前に、まずはライブラリというものを紹介しましょう。

　前回の通り、JavaScriptライブラリで有名なものには「Prototype（http://www.prototypejs.org/）」「jQuery（http://jquery.com/）」といったものがあり、それらは「フレームワーク」とも呼ばれます。

　厳密には、フレームワークとライブラリは違うものになります。フレームワークとは、その名の通り「枠組み」とか「骨格」といった意味で、JavaScriptのプログラムを作るための基礎となるプログラム群のことを指します。ライブラリとは、その名の通り「図書館」の役割です。図書館で足りない知識を補うように、プログラムでも「足りない機能」を補うために使われます。例えば、「Lightbox.js（http://www.lokeshdhakar.com/projects/lightbox2/）」などのスライドショーを実現するためのものをライブラリと呼びます。

　ただし、最近ではこの辺りの定義はあいまいになってきており、一律で「ライブラリ」と呼ばれることが多くなってきました。YUIも、厳密にはフレームワークに当たると思われますが、名前の通り「Library」と名乗っています。

サンプルを見てみよう！

　YUIでは何ができるのでしょうか。それでは、デモンストレーションを見ていきましょう。

　「YUI Library Examples: Button Control: Push Buttons（http://developer.yahoo.com/yui/examples/button/btn_example01.html）」は、ちょっと見た目がおしゃれなボタンのサンプルです。画像を表示したり、ロールオーバー時の制御ができるなど、通常のボタンよりも高機能です。

　「YUI Library Examples: Rich Text Editor: Editor ― Basic Buttons（http://developer.yahoo.com/yui/examples/editor/editor_adv_editor.html）」は、リッチテキストエディタです。HTMLの見た目を編集することができます。

　上記は、YUIの代表的なものですが、基本的なコントロールから非常に高度なコントロールまで数多く取りそろえられています。

　「YUI Library Examples: Animation Utility: Basic Animation（http://developer.yahoo.com/yui/examples/animation/basic.html）」は、「run」ボタンをクリックすると、グレーのバーが縮んでいくアニメーションを見ることができます。このようなアニメーションの演出も豊富に準備されていて、jQueryなどの代わりに利用することができます。

　「YUI Library Examples: Reset CSS: Basic Test Suite for YUI Reset（http://developer.yahoo.com/yui/examples/reset/reset-simple.html）は、「View example in new window」をクリックすると、新しいウィンドウが開き、文字がずらずらと表示されます。実はこれは、HTMLの「リセット」を行うCSSファイルです。

、、

などの各要素があらかじめ持っているフォントサイズ、余白などのスタイルを一括してリセットし、デザインをしやすくします。

　YUIには、このようなCSSファイルなども公開されており、JavaScriptを利用しないデザイナーやマークアップエンジニアにも便利なライブラリなのです。YUIでは、これらのボタンやリッチテキストエディタ、このほかダイアログボックスやスライダ、プログレスバーなど、さまざまな「コントロール」が公開されています。「Yahoo!
User Interface Library (YUI): Index of Library
Examples（http://developer.yahoo.com/yui/examples/）」で、公開されていますので、ぜひ試してみましょう。

　これらを自由に組み合わせて、アプリケーションソフトのような見た目を作ったり、Webページの中に埋め込んで使ったりすることができます。また、これらのコントロールは、CSSで見た目が制御されているため、これを変更すれば自由にデザインをすることもできます。

　このように、非常にパワフルなライブラリが YUIです。

　次回は、YUIの実際の使い方を詳しく紹介します。