PR

YUIを使ってみよう

2009年1月8日(木)
たにぐち まこと

Yahoo! YUI Libraryを利用する

 前回までで、Yahoo! UI Library(YUI)について紹介しました。それでは、実際にYUIを利用してみましょう。

 YUIを利用する方法は、以下の3種類があります。

1.ダウンロードをして利用する
2.リンクして利用する
3.Google AJAX Libraries APIを利用する

 最も一般的なのは、ダウンロードをして利用する方法です。まずは、YUIのWebサイト(http://developer.yahoo.com/yui/)に移動します。画面の真ん中上部に「Download YUI」というボタンがあるので、これをクリックしましょう。

 YUIは、「SourceForge.net(http://sourceforge.net/)」というファイル管理サイトで管理されています。ですので、SourceForge.netにジャンプされ、自動的に最新版のダウンロードがはじまります。

 ダウンロードしたファイルを解凍すると、ドキュメントやサンプルなど、非常に多くのファイル群が含まれていますが、実際の利用に必要なディレクトリは「build」ディレクトリになります。この中でさらにコントロールごとにディレクトリが分かれ、さらに中にはそれぞれ以下のファイルが含まれます。

・xxx.js
・xxx-debug.js
・xxx-min.js

 なにも付いていないファイル名が基本のソースファイルで、「-debug」と付いたファイルは、デバッグ用にメッセージの出力処理などを加えたファイル、「-min」は元のファイルの内容はそのままに、サイズを小さくしたファイルになります。

 通常、利用するだけであれば「-min」のファイルを使うのが良いでしょう。改造したり、より深く使いたい時などに、ほかのファイルを使うことになります。

そのほかの利用方法

 YUIは、ダウンロードをしなくてもYahoo!のサーバーから直接リンクして利用することもできます。「yui.yahooapis.com」というWebサーバーに、最新版を含めたYUIのライブラリが保管されており、直接利用することができるのです。

 例えば、前回(http://thinkit.jp/article/755/1/)紹介した「ボタン」のサンプルプログラムを見てみましょう。

http://developer.yahoo.com/yui/button/

 このページの「Getting Started」の項目を見ると、次のようにしてライブラリが参照されています。



 この記述により、利用者はファイルをダウンロードすることなく、YUIの最新版を利用できるというわけです。CSSファイルも、同様に直接リンクをすることができます。



 各ライブラリのリンク先は、ドキュメントやサンプルなどに記載されています。またバージョンアップした時に、利用しているライブラリもバージョンアップしたい場合は、ディレクトリ部分を変えればバージョンアップができ、非常に便利です。

 また、Googleが提供している、Ajaxライブラリを直接リンクできるサービス「Google AJAX Libraries API(http://code.google.com/intl/en/apis/ajaxlibs/)」を利用することもできます。

 このサービスでは、「Prototype(http://www.prototypejs.org/)」「jQuery(http://jquery.com/)」など、非常に多くのJavaScriptをサポートしており、YUIもそのラインアップに含まれているのです。

 例えば、先ほどと同様に「ボタン」のライブラリを利用するためには次のように記述します。



 YUIよりも、最新版への対応などは遅くなる可能性がありますが、ほかのJavaScriptライブラリと同時に使いたい場合に便利ですし、多くの人が同じ場所からライブラリを使うことで、訪問者のWebブラウザにキャッシュが効率よく貯(た)まり、全体の動作速度が速くなるという利点があります。

 次回は、実際にライブラリを参照しながら簡単なプログラムを作ってみましょう。

株式会社エイチツーオー・スペース
東京代々木でWeb制作業を営む、デザインユニット。「ちゃんとWeb」というコーポレートテーマで、なんとなくキレイ、なんとなく動いているサイトではない「ちゃんとした」サイト作りを心がける。現在は、「ちゃんとWeb.net」や「aquanotes Shop.」などのサイト運営を通じて、Webの運営担当者に啓蒙中。http://h2o-space.jp

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています