Closure Libraryで遊ぶ
最初に読み込むもの
とりあえず開発中とか遊ぶ最中はscriptはgoogleのsvnから読み込むと楽だと思う。
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
基本的に読み込む外部ファイルはこれだけでいい。
クリックイベントをボタンにつけてみる
なんか最近仕事ではすっかりjQueryばっかりなので
$('#btn').click(function() { alert('Click'); });ぐらいのノリを期待するのだが、ここまで短くはなりません。
同じ事をClosure Libraryでやるにはこんな感じ。
goog.require('goog.dom');
goog.require('goog.events');
goog.events.listen(goog.dom.$('btn'), goog.events.EventType.CLICK, function(e) { alert('Click'); });まあ、最初のrequireは置いておけばちょっと名前空間分長くなってしまったかなぐらいですよね。
スクリプトにする
最初にGoogleのリポジトリから読み込むようにしましたが、このスクリプトを読み込むと他にも色々読み込まれています。Firebugとかで見ると、結構しゃれにならない数のスクリプトがGoogleのリポジトリから読み込まれてることがわかります。
おそらくこれのせいで、こんな単純な事しかやっていないHTMLが死ぬほど遅い。。
なので、とりあえずサーバーから読み込まなくていいように一つのスクリプトファイルにしましょう。
ライブラリごと持ってくる
スクリプトファイル化するにはClosure Libraryがまるごと必要です。厳密には知りませんが、てっとり早く全部取ってくる方が楽です。
適当なSubversionクライアントで以下のリポジトリを全部取ってきましょう。
http://closure-library.googlecode.com/svn/trunk/
公式ドキュメントはこちら：
http://code.google.com/intl/ja/closure/library/docs/gettingstarted.html
まずはJSを外部ファイルにする
先程のクリックイベントを記述した内容を外部JavaScriptファイルにします。ここではsample.jsとしましょう。
一応再度ファイルの内容を書いておくと。
goog.require('goog.dom');
goog.require('goog.events');
goog.events.listen(goog.dom.$('btn3'), goog.events.EventType.CLICK, function(e) {
alert(this.value);
});だけですね。
スクリプトファイルにする。
さて、後は実行するだけです。
今回はsample.script.jsという名前で出力するようにしています。
> python %Closure Libraryをチェックアウトしたフォルダ%\closure\bin\calcdeps.py -i .sample.js -p %Closure Libraryをチェックアウトしたフォルダ%\closure\goog -o script > sample.script.js
公式ドキュメントはこちら：
http://code.google.com/intl/ja/closure/library/docs/calcdeps.html
以下のようにコンソールに表示されればOKです。
calcdeps.py: Scanning files... calcdeps.py: Finding Closure dependencies...
できてみたものの...
332KB、結構大きいですね。
それから今回できらスクリプトファイルはheadではなくて、bodyの最後の方で読み込まないと、イベントを付けるボタンが生成されていないためエラーになるので注意してください。
コンパイルしてみる
やっぱりClosure Libraryはコンパイルしてなんぼでしょうということでコンパイルしてみましょう。どれぐらい縮まるのか楽しみです。
今度はコンパイラをダウンロードしてきましょう。
http://closure-compiler.googlecode.com/files/compiler-latest.zip
さてコンパイラを解凍したらさっそく以下の感じで実行してみましょう。
> python %Closure Libraryをチェックアウトしたフォルダ%\closure\bin\calcdeps.py -i sample.js -p %Closure Libraryをチェックアウトしたフォルダ%\closure\goog -o compiled -c %ClosureCompilerを解凍したフォルダ%\compiler-latest\compiler.jar -f "--compilation_level=ADVANCED_OPTIMIZATIONS" > sample.compiled.js
ちょっと長いコンソールログが出ますが、「failed」ってでなければおそらく大丈夫です。
さて今回の大きさは
おお、18KB！！ホントに動くのって感じでしたが、普通に動きました。すごいですねこれは。まあ、YahooとかMSのもこれぐらい小さくしてくれるんだとは思いますが。
