ありえるえりあ勉強会で使ったGoogle Closure Toolsの簡単な説明資料。

1. ライブラリにあらず！
∼Google Closure Toolsの事始め∼
面白法人カヤック
HTMLファイ部 比留間和也

2. 自己紹介
• 面白法人カヤック
HTMLファイ部所属
比留間 和也
• 最近はJSばっかりで、
あんまりHTML書いてません。

3. ちょっと書きました
すべての人に知っておいてほしい
HTML5 & CSS3 の基本原則
すべての人に知っておいてほしい
スタイルシートデザインの基本原則

4. Google Closure Toolsとは

5. Google Closure Toolsは、
いわゆる一般的なJavaScriptライブラリ

7. ではありません

8. GCTは3種の神器

9. • Google Closure Library
• Google Closure Compiler
• Google Closure Template

10. これら3つが組み合わさって初めて
「Google Closure Tools」の真価が発揮される

11. Google Closure Template

12. SoyToJsSrcCompiler.jarというファイルを使います

14. Buildする
$ java -jar SoyToJsSrcCompiler.jar
--shouldProvideRequireSoyNamespaces
--outputPathFormat simple.js simple.soy

15. Buildする
$ java -jar SoyToJsSrcCompiler.jar
--shouldProvideRequireSoyNamespaces
--outputPathFormat simple.js simple.soy

17. Google Closure Compiler

18. 弊社社内でも最後の仕上げとして、圧縮する
ために使われたりしています

19. Compileする
SRC = js/hoge.js js/fuga.js
COMBINE = js/hoge.prod.js
COMPRESS = js/hoge.prod.min.js
$(COMBINE) : $(SRC)
cat $^ > $@
java -jar /Applications/gcc/compiler.jar
--js $(COMBINE)
--js_output_file $(COMPRESS)
.PHONY: clean
clean :
rm -f $(COMBINE) $(COMPRESS)
弊社で使われているshell script

20. Compileする
SRC = js/hoge.js js/fuga.js
COMBINE = js/hoge.prod.js
COMPRESS = js/hoge.prod.min.js
$(COMBINE) : $(SRC)
cat $^ > $@
java -jar /Applications/gcc/compiler.jar
--js $(COMBINE)
--js_output_file $(COMPRESS)
.PHONY: clean
clean :
rm -f $(COMBINE) $(COMPRESS)
弊社で使われているshell script

21. Google Closure Library

22. Google Closure Toolsの中でもコア機能
Googleの集大成ともいえるライブラリ群

25. Build
$ python ./closure-library/closure/bin/build/
closurebuilder.py
--root=./js
--root=./closure-library
--namespace="hoge"
--output_mode=compiled
--output_file=hoge.min.js
--compiler_jar=/Applications/gcc/compiler.jar
-f "--define=goog.DEBUG=false"
圧縮のレベルを指定するオプション
#-f "--compilation_level=ADVANCED_OPTIMIZATIONS"

26. Build
$ python ./closure-library/closure/bin/build/
closurebuilder.py
--root=./js
--root=./closure-library
--namespace="hoge"
--output_mode=compiled
--output_file=hoge.min.js
--compiler_jar=/Applications/gcc/compiler.jar
-f "--define=goog.DEBUG=false"
圧縮のレベルを指定するオプション
#-f "--compilation_level=ADVANCED_OPTIMIZATIONS"

27. • JavaScriptで手軽にクラスベース風の継承機能
を提供
• require的な各ファイルの依存関係を解決して
くれるPythonベースのツール
• 依存関係の解決から圧縮までをコマンドライ
ン一発でやってくれるPythonベースのツール

28. Google Closure Toolsは、
こうしたツール群を駆使してつくり上げる
巨大なフレームワーク

29. ライブコーディング

30. Appendix
• Google Closure Tools
• Google Closure Library
• Google Closure Templates
• Google Closure Compiler
• Google Closure compilerをオンラインで
• Closure Libraryによるアプリ開発のはじめ方

31. ご清聴ありがとうございました