closure-library始める - H2Databaseを追っかけていたりしたブログ

closure-libraryはgoogleがつくった、gmail等で利用されているライブラリ。かっちり作りこみたい向きのためのライブラリなので、小さい規模の開発には面倒が多い、という感じを受ける。
関連プロダクトであるclosure compilerを使って、最適化して使うことが前提になっており、そのためにはpythonインストールする必要があるなど、さらに敷居が高い。

しかし、最近はjava製のplovrというツールがあり、これをつかうとオンデマンドでコンパイルしてくれるようになり、若干手軽に開発できる。

環境を準備する。DocumentRoot以下に適当なディレクトリを作る。

closure libraryはsvnでチェックアウトして持ってくる。

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

plovrは以下からjarがダウンロードできる。最新の持ってくればいいんだと思う。
http://code.google.com/p/plovr/downloads/list

plovrはjavaなので、javaが実行できるようにしておく必要がある。

ドキュメントルート下の適当なディレクトリ下の構成は下記の通り。cssの下にスタイルシートを、scriptsの下にjavascriptを置く想定。closure-libraryはチェックアウトしてきたclosure library。

closure-library/
css/
scripts/app.js
config.json
index.html
plovr.jar

config.jsonはplovrのための設定ファイル。

{"id":"base","paths":"scripts/","inputs":"scripts/app.js"}

scripts/app.jsに最小限のスクリプト。

goog.provide('hoge.App');
goog.require('goog.dom');

hoge.App = function(){
  this.initialize_();
}
hoge.App.prototype.initialize_ = function(){
  var hc = goog.dom.createDom('span',null,'Hello Closure');
  goog.dom.appendChild(document.body, hc);
};
new hoge.App();

index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>closure test</title>
    <script type="text/javascript" src="http://hostname:9810/compile?id=hoge"></script>
  </head>
  <body>
    <div id="hoge"></div>
    <script type="text/javascript">
      goog.require('hoge.App');
    </script>
  </body>
</html>

これで、用意はできたので、まずplovrを起動してみる。デフォルトでは9810ポートで上がる。

java -jar plovr.jar serve config.json > /dev/null 2>&1

ブラウザで http://ホスト名:9810/ でアクセスしてみるとそれっぽい画面が起動していれば、まぁ、いいんじゃないか。

http://ホスト名:9810/compile?id=hoge でアクセスしてみると、minifyされたscriptが返ってくる。よく見ると、自分がapp.jsで書いたコードが含まれているのがわかるはず。以降app.jsを書き換えて、表示する都度コンパイルしてくれる。この状態になら、あまり意識せず開発できそうだ。

で、ブラウザで、http://ホスト名/適切な/パス名/index.html にアクセスすると間違いがなければ、ちゃんとHello Closureと表示されているはずだ。はじめの一歩。