古籏一浩のJavaScriptラボ ― 第15回
どこよりも早い「Yahoo! UI Library 3」(YUI 3)入門
2009年10月15日 12時46分更新
モジュールを読み込む
ライブラリーファイルの準備ができたら、さっそく使ってみましょう。はじめに、scriptタグでライブラリー本体を読み込ませます。
<script type="text/javascript" src="build/yui/yui.js"></script>
次に、必要に応じて読み込むモジュールをスクリプト内で指定します。モジュールはuse()メソッドを使い、以下の書式で指定します。
YUI().use(読み込むモジュール名, .... , コールバック関数)
複数のモジュールを指定する場合は、モジュール名の数だけ引数を追加します。
●1つだけ読み込む場合
YUI().use('node', function(Y){ ～ })
●2つ読み込む場合
YUI().use('node', 'anim', function(Y){ ～ })
●3つ読み込む場合
YUI().use('event','node', 'anim', function(Y){ ～ })
いずれの場合も、モジュールの読み込み完了時に呼び出されるコールバック関数は、use()の最後の引数に指定します。コールバック関数にはモジュール機能が追加されたYUIオブジェクトが引数として渡されます。
YUI 3のイベントの処理を試す
YUI 3のもっとも簡単なサンプルとして、Webページが読み込まれたらアラートダイアログを表示するスクリプトを書いてみましょう。ページが読み込まれたタイミングで発生するloadイベントを扱います。
YUI 3でイベントを処理するには、eventモジュールを読み込む必要があります(*3)。モジュールの読み込みはuse()で、引数に'event'を指定します。
イベントの種類や処理の内容は、on()で設定します。on()の最初の引数にイベントの種類（ここでは'load'）、2番目の引数にイベントが発生した時に呼び出される関数（イベントハンドラ）を指定します。説明を読むよりも実際のプログラムを見た方が早いかもしれません。ここまでをまとめたサンプル01を見てください。
 |
|---|
| サンプル01の実行結果。ページが読み込まれloadイベントが発生するとアラートダイアログが表示される |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="build/yui/yui.js"></script>
<script type="text/javascript"><!--
YUI().use('event', function(Y){
Y.on('load', function(){
alert('onloadイベントが発生しました');
});
});
// --></script>
</head>
<body>
<h1>YUI v3 イベントサンプル</h1>
</body>
</html>
loadイベントの代わりに、DOMの準備ができたら処理を実行するDomReadyイベントを設定してサンプル01を書き直したのがサンプル02です。'load'を'domready'に変更しています。
 |
|---|
| サンプル02の実行結果。ページが読み込まれdomreadyイベントが発生するとアラートダイアログが表示される |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="build/yui/yui.js"></script>
<script type="text/javascript"><!--
YUI().use('event', function(Y){
Y.on('domready', function(){
alert('domreadyイベントが発生しました');
});
});
// --></script>
</head>
<body>
<h1>YUI v3 イベントサンプル</h1>
</body>
</html>
参考までに、サンプル02をjQueryで書くと以下のようになります。
$(function(){
alert('domreadyイベントが発生しました');
});
ヤフーのサーバーからYUIを直接読み込む場合は
本文ではライブラリー本体をダウンロードして利用する方法を説明していますが、ヤフーのサーバーにホスティングされているライブラリーをscriptタグで直接読み込む方法もあります。その場合はscriptタグの記述を変更し、http://yui.yahooapis.com/3.0.0/を付加してください。
<script type="text/javascript" src="build/yui/yui.js"></script>
↓
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js"></script>
また、yui.jsはファイルサイズが少し大きいため（85KB）、少しでも読み込みを高速化したい場合は圧縮版の「yui-min.js」（15KB）を指定してください。
*3 他のモジュールが読み込まれた時にeventモジュールが自動的に読み込まれる場合もあります。今回のサンプルは、eventの代わりにnodeやanimを指定しても動作します。
この連載の記事
- 第53回 Mac用ウィジェットをHTML/CSSで自作
- 第52回 Web技術で作るDashboardウィジェット開発入門
- 第51回 iOS 4.2×localStorageで作るGPSレコーダー
- 第50回 HTML5 SVGで作るシューティングゲーム
- 第49回 HTML5のInline SVGをJavaScriptで操作
- 第48回 HTML5で注目！インラインSVGの使い方
- 第47回 iOS 4.2の新機能で作るHTML5+JSアプリ
- 第46回 JavaScriptでEPUBビューアーを自作してみた
- 第45回 Audio Data APIでブラウザーをシーケンサーに！
- 第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
