【Javascript】Ajax YUIライブラリを使う準備

Ajax YUIライブラリを使う準備

---

1: Yahoo! User Interface Library(YUI)
2: ダウンロードする
3: 解凍したファイルの構成
4: 設置
5: ネームスペース

解凍したファイルの構成

前ページでダウンロードしたファイルは「yui_2.2.0.zip」といった名前です。 「2.2.0」の部分はバージョン番号ですので、今後変わる可能性があります。

ダウンロードしたファイルを解凍すると、下のようなディレクトリ構成になります。この構成はバージョン毎に異なりますので注意が必要です。

  yui/
    ├build/      (ライブラリ本体)
    ├examples/   (サンプル)
    ├docs/       (ドキュメント)
    └README      (YUIリリースノート)

更に、ライブラリが置かれた build ディレクトリを開くと次のように各ライブラリがそれぞれのディレクトリとして 構成されています。

  build/
    ├animation/
    ├calendar/
    ├connection/
   (省略)
    ├dom/
    ├docs/
    ├dragdrop/
    ├event/
    ├slider/
    ├treeview/
    └yahoo/

参考までに、animation ディレクトリを開くとそこには、3つの.jsファイルとREADMEが置かれています。

  animation/
    ├animation.js       (通常のAnimationライブラリソース)
    ├animation-debug.js (デバッグ関連)
    ├animation-min.js   (コメントなどを削除した軽量版)
    └README             (animationリリースノート)

このうち、animation-min.jsのように「-min」の付いた.jsファイルはソースからコメントなどを削除した軽量版で、半分以下のサイズになっていますから、実際に設置するときには、こちらを利用することをお勧めします。

設置

次に、展開したこれらのファイルの設置方法ですが、普通は、build ディレクトリごと、あるいは、必要なディレクトリを選んで、自分のサイトへFTPで設置して、 HTML内のSCRIPTタグのSRC属性などで呼び出して利用します。

たとえば、アニメーションを利用したければ、一般的にはanimation.jsだけではなく、まず必須のyahoo.jsと、その他にも関連するevent.jsやom.jsなども含めて、次のような書き方になります。

<script type="text/javascript"
        src="./build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" 
        src="./build/animation/animation-min.js"></script>
<script type="text/javascript" 
        src="./build/event/event-min.js"></script>
<script type="text/javascript" 
        src="./build/dom/dom-min.js"></script>

ネームスペース

上記、build ディレクトリ下の.jsファイルのうち、YUIを使う時に必須のライブラリがあります。 yahoo ディレクトリ下のyahoo.js(あるいはyahoo-min.js)です。

このファイルの中には、まず下記のような記述があります。

if (typeof YAHOO == "undefined") {
    var YAHOO = {};
}

これは、YAHOOという名前のグローバルなオブジェクト (あるいは変数なども含む)が存在しない(つまり、typeof YAHOO == "undefined")場合に 「 var YAHOO = {};」によって、新たにYAHOOという名前の空のオブジェクトを作成するということです。

YUIでは、このグローバルな唯一のオブジェクト「YAHOO」の下に、すべてのライブラリが配置されています。

ライブラリなどの再利用を目的とするコードに、 グローバルな変数や配列がいくつも存在する場合には、スクリプト内のそれらをすべて把握せずに利用すると、意図せずに大事なデータを書き換えてしまうリスクを抱え込むことになります。

YUIでは、この心配がありません。

これによって、YUIを利用する開発者が、YUI内のグローバルな変数や関数、オブジェクト名などと、 YUIと組み合わせる自分のプログラム内のメンバー各名称とが、衝突するかもしれないという心配と労力を省略し、 安心して利用することができようになります。 これが、YUIの大きな魅力の一つです。

JavaScriptでは、特にネームスペースという概念は無いのですが、歴史的に、このようなオブジェクト階層を利用して ネームスペースとして機能させる方法がよく利用されており、YUIでも意図的にこの「YAHOO」オブジェクトを 「グローバル ネームスペース オブジェクト」と呼んでいます。

実際に使う場合には、たとえば、アニメーションを使いたければ「YAHOO.util.Anim」以下のメソッド群などを利用し、イベントなら「YAHOO.util.Event」、 DOMを簡便に利用するツール群は「YAHOO.util.Dom」、カレンダーは「YAHOO.widget.Calendar」、 ドラッグドロップを使いたければ「YAHOO.util.DD」、ツリーによる階層メニューなら「YAHOO.widget.TreeView」 と言った具合に、各ライブラリがすべて、「YAHOO」オブジェクトの下に配置されていて 、それぞれのライブラリを含んだ.jsファイルを読み込んで使うことになります。

その読み込む.jsファイルが、たとえば、アニメーションの「YAHOO.util.Anim」なら、 上記の build/animation/animation.jsやanimation-min.jsファイル内に記述されているので、 繰り返すと、次のように読み込んで利用することになるわけです。

<script type="text/javascript"
        src="./build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" 
        src="./build/animation/animation-min.js"></script>

では、次回からは、自分のサイトに設置したYUIライブラリを利用した簡単なサンプルを見ていくことにします。