Yahoo! UI Library 3（YUI3）の基本

Yahoo! UI Library Ver.3 を使ってみよう（1）

YUI3の特徴

　本体はYahoo!のWebサイトにあります。本体とはAPI（Application Program Interface）といわれる命令や関数の集合体のことです。Yahoo!が実際に使用しているライブラリーの中で公開可能なものをライブラリーとしてまとめています。APIの詳細説明ファイルはダウンロードページにある、Full Developer Kitに含まれています。

　YUI3はコアを中心として、いくつかの部品に分類されます。

YUI3コア

　YUI3ライブラリーの基本となる部分です。YUI3を使用するためには、YUI seedと呼ばれるシードファイルをページに組み込んで作成します。バージョン3からは軽量化されました。シードファイルをページに組み込んで定義した関数を通して、いろいろなYUI3の基本ライブラリーにアクセスします。

　YUI3のシードファイルとは、YUI3のアクセス方法を定義したテキストファイルです。YUI3を利用するときは必ず読み込んでおく必要があります。コアといわれる部分はシードファイルに定義されています。もちろんシードファイルのみでアクセスできない処理もあります。いくつかのJavaScriptファイルを設定してプログラムを書いていくことになります。

　シードファイルを定義するには、URLでYahoo!内のファイルを指定することも、シードファイルをダウンロードして、直接ダウンロードしたファイルを指定することもできます。以下のリストはシードファイルを定義する2つの方法の例です

［リスト1］シードファイルを定義する方法

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>    （1）
<script src="./yui-min.js"></script>    （2）

　（1）はYahoo!のサーバー内にあるyui-min.jsを呼び出しています。（2）はダウンロードしたJavaScriptを呼び出しています。どちらの定義でも大丈夫です。

　コアには以下の要素が含まれています。それぞれ単体で使うというより組み合わせることによって、アニメーション効果やドラッグ＆ドロップなどの機能を提供します。

（1）Global Object（標準オブジェクト）

　YUI3のための言語ユーティリティと基本の関数群、ビルドインローダーが設定されています。以下のコンポーネントが含まれます。

Grobal Objectコンポーネント

コンポーネント	モジュール	説明
Array Operations	array	配列の操作
YUI Core	core	コアとなる部品
Language helper methods	lang	命令が使える範囲の確認など
Periodic execution method	later	定期的な処理の実行
Logging support	log	ログのサポート
Object Operations	object	オブジェクトの操作
Browser Sniffing	ua	ブラウザの検出
YUI Object	yui	YUIの全体の基本となる部分をまとめたもの
Dynamic script and css loading	get	必要になったときに読み込む処理のサポート
YUI Loader	loader	各コンポーネントの読み込み

（2）Node（ノード）

　DOM操作のためのインターフェイスです。標準のDOM APIをベースにして、操作を容易にします。DOM（文書オブジェクトモデル）とはライブラリーへのアクセスや操作の方法を定義するモデルです。以前のバージョンのDOM操作はここでサポートされています。

（3）Event（イベント）

　ブラウザ内でのイベント（マウスのクリックや状態の変化などで起こるもの）処理をサポートするものです。DOMイベント、マウスイベント、キーイベントなどがあります。動的なWebページを作成するためにはなくてはならないものです。

Component Infrastructure：基盤となる部品

　各要素の基本となる部分をまとめたものです。以下のものがあります。

（1）Attribute：属性の設定

　各要素に個別に属性を追加することができます。デフォルト値を設定したり、読み取り専用に設定したり、指定された値を読み込んだりする処理をサポートします。

（2）Base：基本部品

　YUI3の基礎クラスとなるものです。初期化や終了の処理の一貫性を提供します。

（3）Pluigin：（Beta）プラグイン

　プラグインとはアプリケーションに小さなプログラムを追加するものです。

• FocusManager Node Plugin（Beta）：選択された場所の表示のサポートソフト
• MenuNav Node Plugin（Beta）：メニュー表示を便利にするソフト
• Console Filters Plugin（Beta）入出力データから必要なものを取り出すソフト

などがあります。

　現在Beta版ですが、将来いろいろなものが追加されていくと思います。

（4）Widget：（Beta）ウィジェット

　ウィジェット関係のものです。ウィジェットはYahoo!が進めているJavaScriptをベースとして作成されている、小さくて便利なプログラムです。「Yahoo!ウィジェットエンジン」と呼ばれるものをパソコンにインストールすると「ウィジェット」と呼ばれるプログラムをデスクトップ上で使えるようになります。ウィジェットはいろいろなWeb上のツールをアクセスすることができます。Widget部品は、ウィジェットの作成を手助けするライブラリーです。

図1：ウィジェットがセットされたデスクトップ

CSS resource：スタイルシート

　スタイルシート関係のものです。

• CSS Reset：スタイルシートの初期化を担当します
• CSS Base：CSSの基本となる部分が含まれます
• CSS Font：フォント関するCSSのサポートです

などを含みます。スタイルシートはこれからのWebアプリケーション作成に重要な位置を占めるようになると思います。

Developer tools：開発ツール

　ページ作成時に便利なツールをまとめたものです。Console（Beta）・Profiler・Testなどがあります。

　Profilerは動作中のプログラムがどの処理をどういった順序で実行したかを監視します。TestはJavaScriptのテストフレームワークです。デバッグを容易にします。

　プログラムを作成するのは「作成4、デバッグ6」と言われるくらい、実行テスト（デバッグ）は大事です。実行中に思わぬバグを見つけることがあります。どれだけデバッグをやったかで、作成されたプログラムの完成度は変わってきます。開発用のツールが整備されることはとてもありがたいことです。