YUI3 の使い方


YUI3 を使ってみたので使い方を紹介します。

YUI3 とは？

YUI は Yahoo! User Interface Library の略で、一言で言うと、Yahoo! が作っている jQuery のようなものです。ダウンロードしてソースコードを入手できる他、HTMLページから直接、Yahoo! のホスティングサイトを指定しても使えます。大きく世代分けがあり、現在のものは3代目（＝YUI3）です。

公式の説明だと、以下の通りです。

Yahoo! User Interface Library（略称：YUI）はDOMスクリプティング、DHTMLやAJAXを利用した高機能なWebアプリケーションの開発に用いられる、JavaScriptとCSSで記述されたユーティリティ群です。

YUI 公式サイト URL

http://developer.yahoo.co.jp/yui/

YUI3 の特長

YUI3 の特長は以下の通りです（独断満載）。

  • jQuery と似たようなものですが、Widgets という呼称で、最終的なユーザ I/F に近いところまでライブラリを提供しているものがある（例：カレンダーからの日付ピッカー、スライダーなど）。
  • CSSも定義してあるので、Widgets はあまり凝らなければ割とそのまま使える。ちなみに CSS クラスには、「yui3-xxx」等の名前がばっちり付いている。
  • jQuery より重厚な感じ。何と言っても「チュートリアル」ページがこれだからね。使うのは技術者だという想定。デザイナの方がコピー＆ペースとしてちょっと使う、というのは最後一息のカスタマイズが難しいのかも。
  • そしてここが素晴らしい点。始めから国際化（日本語化、ローカライズ）されている！！ さすが Yahoo! さま。
  • 使い慣れればかなり便利そうな予感。
  • 2.x の頃に比べて、組み込みが楽になった。機能がかなりパックされていて、その分カスタマイズの際にはドキュメントの読み込みが必要になる感じ。

YUI３ の基本的な使い方

以下のようなコードを HTML ページ末尾（全てのコンテンツの後、</body> の前）に置く。

<script src=”http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js”></script>
<script>
YUI({lang:”ja”}).use(‘node’, ‘other-module’, function (Y) {
//ここに自分の処理を書く
});
</script>

ファイル構成について

この yui-min.js はかなり軽量で 90KB 無い。偉い！

CSS ファイルは、別途動的にロードされる（※1）。小さなアイコン画像などが表示される事があるのだが、それもbackground: url(“data:image/png;base64,iVBORw0KGg…SUVORK5CYII=”) 等の形式で CSS 内に直接指定してある。ページ表示高速化に根性入っている感じです。

※1
JavaScript ファイルをローカルに置いても、CSSファイルは Yahoo! のホスティングサイト（http://yui.yahooapis.com/）に取りに行く。
ここが問題になるケースはあるかも。https で運用したい場合など。

ページのロードとの関係

jQuery にあるような $(document).ready(…) でロードを待つような機能は無いようで、このため、ページ内要素を扱うならばスクリプトはページの末尾におく必要がある。開発の時は、うっかり head 内に document.xxx を扱う処理を書いてもエラーにならないブラウザがあるので注意。

「モジュール」の読込み

「’node’, ‘other-module’」となっている所は、YUI3 で module と呼ばれている機能単位の名前から使うもの指定する。
このモジュール案内は、以下のページからそれっぽい物をつつくとサンプルコードが表示される。
http://yuilibrary.com/yui/docs/guides/

日本語 I/F の指定

I/F が英語で良いならば、{lang:”ja”} 部分は不要。
これだけで、日本語化ができるなんて素晴らしい！ ちなみに、他の言語として何があるかというと、使う機能によって実装は異なると思うが一例として Calendar  モジュールは以下の通り。

calendar-base.js デフォルト（英語）
calendar-base_de.js ドイツ語
calendar-base_en.js 英語（デフォルトと同じ）
calendar-base_es-AR.js アルゼンチンスペイン語
calendar-base_es.js スペイン語
calendar-base_fr.js フランス語
calendar-base_it.js イタリア語
calendar-base_ja.js 日本語
calendar-base_nb-NO.js ノルウェー語
calendar-base_nl.js オランダ語
calendar-base_pt-BR.js ブラジルポルトガル語
calendar-base_ru.js ロシア語
calendar-base_zh-HANT-TW.js 繁体字中国語

素晴らしいな〜。Yahoo! さま素敵！

セレクタ、DOMの操作、イベントハンドラ

セレクタの指定方法は jQuery と同じように id 属性や class 属性で指定できる。
複数の要素を選ぶ時と、一つの要素を選ぶ時でメソッドが異なる（.all または .one）。YUI3 サイトに掲載されているサンプルコードが分かりのでこのまま紹介。

YUI().use(‘node’, function (Y) {
// セレクタ類
var oneElementById     = Y.one(‘#foo’),
oneElementByName   = Y.one(‘body’),
allElementsByClass = Y.all(‘.bar’);

// 動的に要素を作る
var contentNode = Y.Node.create(‘<div>’),
listNode    = Y.Node.create(‘<ul>’),
footerNode  = Y.Node.create(‘<footer>’);

// 要素の挿入
contentNode.setHTML(‘<p>Node makes it easy to add content.</p>’);
listNode.insert(‘<li>Buy milk</li>’);
footerNode.prepend(‘<h2>Footer Content</h2>’);

// 要素の変更
Y.all(‘.important’).addClass(‘highlight’);

// イベントハンドラの指定
Y.one(‘#close-button’).on(‘click’, function () {
contentNode.hide();
});
});

この node モジュールに他にどんなメソッドがあるかを見るには、まずユーザガイドの目次から  モジュール名のリンクを辿ると分かりやすい。
このようなドキュメントを読む事ができる。http://yuilibrary.com/yui/docs/node/

さらに詳しいドキュメントは、Documentation > API Docs の左メニューからモジュール名で探すとメソッドの一覧が表示される。

カレンダーモジュール（Widget）利用のサンプルコード

以下は、カレンダーによる日付ピッカーを実装した時のサンプルコード。
いくつかよく使う、簡単な部分で調べるのに時間が掛かった事があったので（※2）紹介します。

※2
「やりたい事」から、その機能がどのモジュールに含まれているかを調べる方法が無く、それらしいモジュールのドキュメントをめくりながら当たるのを待つ。まず始めにしっかりドキュメントを読みましょうね、という事ではあるのだが。

カレンダー実装はこちら。

<script type=”text/javascript”>
YUI({lang:”ja”}).use(‘calendar’, ‘datatype-date’, ‘node’, function(Y) {
// ここは普通にセレクタ
var myBtn = Y.one(‘#input-calendar’);
var myOff = Y.one(‘#close-calendar’);
var myCal = Y.one(‘#date-picker’);

// 関数定義（イベント用）
var showCal = function(e) {
// スタイルの指定 .setStyle（node モジュール）
// ハイフン付きの属性を指定する場合は、ハイフンを除いた形式を使う（例：backgroundColor）
myCal.setStyle(‘display’, ‘block’);

// マウス座標の 取得は .pageX と .pageY （node モジュール）
// 要素の移動（位置指定）は .setXY（node モジュール）
myCal.setXY([e.pageX, e.pageY]);
}
var hideCal = function(e) {
myCal.setStyle(‘display’, ‘none’);
}

// イベントハンドラの指定
myBtn.on(“click”, showCal);
myOff.on(“click”, hideCal);

// この辺りはカレンダーモジュール固有の設定
var calendar = new Y.Calendar({
contentBox: “#date-picker”,
width:’300px’,
showPrevMonth: true,
showNextMonth: true,
headerRenderer: ” %Y年 %B “,
date: new Date()});

calendar.render();

// 日付用モジュールへの「参照」（フォーマット変換のため）
var dtdate = Y.DataType.Date;

// ‘datatype-date’ というようにハイフンで結ばれているモジュールは2階層になっているものらしい
// ドキュメントは Date クラス の名前がついている所にある

// “selectionChange” はカレンダーモジュールのイベント
calendar.on(“selectionChange”, function (ev) {
var newDate = ev.newSelection[0];

Y.one(‘#mainform input[name=”yyyy”]’).set(‘value’, dtdate.format(newDate,{format:”%Y”}));
Y.one(‘#mainform input[name=”mm”]’).set(‘value’, dtdate.format(newDate,{format:”%m”}));
Y.one(‘#mainform input[name=”dd”]’).set(‘value’, dtdate.format(newDate,{format:”%d”}));

// セレクタは、属性を [attrname=”value”] の形式でも指定できる。

// 属性の値を書き換えるのは .set(‘attrname’, VALUE)
// これで、フォームの入力値だろうが画像の src 属性だろうが同じように書き換えられる。

// 日付の書式設定は Date.format メソッド。形式の指定方法は ドキュメントに記載がある
// http://yuilibrary.com/yui/docs/api/classes/Date.html#method_format

myCal.setStyle(‘display’, ‘none’);
});
});
</script>