PR

核になるのはClosure Library

図8●ドキュメント右のナビゲーション・メニューで見るClosure Libraryのオブジェクト/カテゴリ
図8●ドキュメント右のナビゲーション・メニューで見るClosure Libraryのオブジェクト/カテゴリ
[画像のクリックで拡大表示]

 Google Closure Toolsをツールという観点から見ると,これまで述べてきたClosure Compilerが,「いかにも」といった存在感を醸し出しています。しかし,Google Closure Toolsの本当の意味でのコアは,JavaScriptライブラリの「Closure Library」です。

 Closure LibraryはGoogleがいろいろなサービスで実際に使用しているJavaScriptライブラリです。JavaScriptのライブラリとしてはすでにprototypeやjQueryなどが存在しますが,選択肢が増えることは開発者として歓迎すべきでしよう。

 開発者がライブラリを選択する重要な要素の一つとして,ドキュメントがどれだけ充実しているか,という点があると思います。Closure Libraryのドキュメントは,体系的にまとめられていてサンプルもほどよい数が掲載されている印象です(公開開始の時点では英語のみです)。ただし解説はやや事務的かつ淡泊で,少なくても初心者が簡単に使える感じではありません。

 Closure Libraryは,35個のオブジェクト/カテゴリに分類されています(図8)。

 すべてのオブジェクトはgoog名前空間の下に位置し,中にはuiのように138個もオブジェクトを持っているカテゴリもあります。このuiオブジェクトですが,よく見ていくとgoog.ui.emoji.Emojiといったものもあって,どうやら携帯電話の絵文字も扱えるようです。

ライブラリをダウンロードするにはsvn管理ソフトが必要

 さて実際にどうやってこのライブラリを使うかなんですが,まずはダウンロードをしなくてはなりません。ところがちょっとやっかいなことに,Closure Libraryをファイル群をまとめたzip書庫のようなものは存在していません。

 ドキュメントを見るとClosure Libraryのダウンロードにはsvnを使うように指示されています。svnを使うと,バージョン管理システム「Subversion」の仕様に沿って管理されているソースを利用することができます。Windowsでsvnを扱えるソフトはいくつかありますが,今回は「TortoiseSVN」というsvnクライアントを導入してみました。

 TortoiseSVNは独立したソフトウエアではなく,Windowsのシェル・エクステンションとして動作します。32bit版と64bit版があるので,ご使用のWindowsに合わせたバージョンをダウンロードしてください。ダウンロードしたファイルはmsi形式なので,そのままダブルクリックでインストールが始まります。

 TortoiseSVNを使ってClosure Libraryをダウンロードする手順は以下の通りです。

  1. ダウンロードしたいフォルダを開く
  2. 空のフォルダの画面で右クリックしてコンテキスト・メニューを出す(図9
  3. URL欄にhttp://closure-library.googlecode.com/svn/trunk/と入力してOKボタン(図10
  4. ダウンロードが開始される(図11
図9●コンテキスト・メニューの「SVN  Checkout...」をクリック
図9●コンテキスト・メニューの「SVN Checkout...」をクリック
[画像のクリックで拡大表示]
図10●チェックアウトの画面が出るのでURLを入力して「OK」ボタンを押す
図10●チェックアウトの画面が出るのでURLを入力して「OK」ボタンを押す
[画像のクリックで拡大表示]
図11●ダウンロードが開始されると状況を伝えるモニター画面が出る
図11●ダウンロードが開始されると状況を伝えるモニター画面が出る
[画像のクリックで拡大表示]

 以上でダウンロード(正しくいえば最新バージョンのファイルのチェックアウト)が始まります。サブフォルダはダウンロード中に自動的に作成されます。ファイルサイズは,本稿の執筆時点でおよそ15MBといったところです。svnで提供されているのですから,おそらく今後ライブラリの追加や更新が行われるのでしょう。

 Linuxの場合は,Subversionがそのまま使えます。この場合はシェルでダウンロードしたいディレクトリに移動後,次のようにタイプするとダウンロード取得できます。

svn checkout http://closure-library.googlecode.com/svn/trunk/ closure-library-read-only

 ダウンロードしたライブラリを使ってサイトを構築する場合には,サーバーに対してファイル群をアップロードする必要があります。サーバーがLinuxで,外部からSSHなどで操作できる場合には,直接Linuxでsvnを使ってソースを入手する方が管理が楽になるのは言うまでもありません。

Closure Libraryのサンプルを覗いてみよう

 Closure Libraryを使用する場合,まずbase.jsというコア・ファイルを参照しなくてはなりません。

<script src="closure-library-read-only/closure/goog/base.js"></script>

 上記のように外部参照で記述しますが,src="…"の中身は当然ながらHTMLドキュメントから見た相対位置でパスを記述する必要があります。Closure Libraryは現時点でも15MBにおよぶ相当数のファイルで構成されていますが,base.jsさえ読み込めば,必要なファイルは下位ディレクトリから自動的に読み込んでくれます。例えば配列を利用するために/closure/goog/array/array.jsが必要だったとしても,このファイルを外部参照する必要はありません。

 ごく簡単なサンプルを掲載しておきます(図12)。

<html>
  <head>
  <!--この行は皆さんの環境に合わせて書き換えてください-->
    <script src="svn/closure/goog/base.js"></script>
    <script>
    //DOMオブジェクトを扱うライブラリの読み込み
    goog.require('goog.dom');

function sayHi() {
  var newDiv = goog.dom.createDom('h1', {'style': 'background-color:#ff0000'},
    'こんにちは');
  goog.dom.appendChild(document.body, newDiv);
}
    </script>
  </head>
  <body onload="sayHi()"><!--HTMLロード時にfunction呼び出し-->
  </body>
</html>

図12●簡単なサンプル
図12●簡単なサンプル
[画像のクリックで拡大表示]

 HTMLとしては空の状態(<body>に何も含んでいない)のドキュメントに対して<h1>のDOMを新規に追加するコードです。dom.appendChildという処理で本来は存在していなかった<h1>を書き出しています。

 ライブラリを使うからといって特に難しいことはなく,外部参照でbase.jsを読み込み,必要なオブジェクトに対する処理を含んだ個別のライブラリ・ファイルをgoog.require('goog.ライブラリ');で読み込むだけです。あとはプロパティやメソッドを使って処理していくだけですから,リファレンスを見ながらアイディアを捻り出して色々やってみるだけです。

 もっと高等なサンプルについてはデモの一覧でじっくりと見ていただくのがいいでしょう。特にuiオブジェクト関係は,通常のHTML+JavaScriptを大きく超えた表現力を使用できるようになる部分ですので,ぜひ一通り確認することをお勧めしておきます。