JavaScriptやCSSを自動的にロード--YUILoader

　YUILoaderは、コンポーネントを用いるにあたって必要となるJavaScriptやCSSを自動的にロードするというものだ。画面表示には関係しないが、<link>や<script>をたくさん記述しなくて済むコンポーネントだ。プログラマには、Javaのimport、Perlのrequireのようなものと言ったほうが分かりやすいかもしれない。

　これはベータ版なので、対応するブラウザや利用条件に配慮した上でご利用いただきたい。また、実行環境となるWebブラウザはJavaScriptを実行可能にしておかなくてはならないのもこれまでと同様だ。

コンポーネントの概要

　第2回で紹介したColorPickerを利用するには、事前にCSSとJavaScriptを4つ指定しておかなければならない（第2回のリスト1参照）。第3回のRich Text Editorでは、それらを10も指定しなくてはならない（第3回のリスト1参照）。

　しかし、コンポーネントごとにどのCSSやJavaScriptを指定しなくてはならないのかをいちいち調べるのは面倒だ。かといって指定を重複させてしまうのはムダだ。YUILoaderは、コンポーネント名を指定すれば、それに必要なものをロードしてくれるので、<link>や<script>を何行も記述する必要がない。

　ここでは、ロードを行う3つの方法を紹介していくことにする。URLによってロードする方法もあるが、これは実質的に<link>や<script>と同様の処理といえるので、説明は省略する。

定義済みのコンポーネントのロード

　ロードの方法としては最も多く用いられると思われる方法で、YUILoaderに対してコンポーネントの名称を指定する。リスト1はこれを用いてColorPickerをロードする例だ。ColorPickerの定義処理は事前にcolorPickerに記述し、最後のinsertメソッドで実行させている。

　重要なのことは2点ある。まず<link>がリスト1のどこにも記述されていないこと。次にロード処理はrequireメソッドで行われるということだ。このメソッドの引数'colorpicker'はColorPickerを指している。

　こうしたコンポーネントごとの名称はYUILoader.moduleInfoの値を調べれば分かるのだが、執筆時点では対応表のようなものは整備されておらず、値を解析する以外はソースコードを直接参照するしかない。ちなみにRich Text Editorにはeditorという名称が対応している。詳細はAPIドキュメントを参照していただきたい。

リスト2 YUILoaderによるColorPickerのロード

<script src="build/yuiloader/yuiloader-beta.js"></script>
<script type="text/javascript"><!--
  /*  ..... 以下のソースコードはFirefox2.0.0.6で実行確認 .....  */
  // ColorPickerの定義
  var colorPicker = function() {
    var picker = new YAHOO.widget.ColorPicker("yui_colorpicker", {
      // ColorPickerに対する設定(第2回のリスト2参照)
    });
    // イベント処理の定義など(第2回のリスト3参照)
  };

  var loader = new YAHOO.util.YUILoader();
  loader.require( 'colorpicker' );   // 
  loader.insert( colorPicker );
  // loader.onLoadComplete = colorPicker;
  // loader.insert();
// --></script>