ライブラリにあらず！～Google Closure Toolsの事始め～

面白法人カヤックHTMLファイ部 比留間和也

自己紹介

• 面白法人カヤックHTMLファイ部所属比留間 和也

• 最近はJSばっかりで、あんまりHTML書いてません。

ちょっと書きました

すべての人に知っておいてほしいHTML5 & CSS3 の基本原則

すべての人に知っておいてほしい スタイルシートデザインの基本原則

Google Closure Toolsとは

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

ではありません

GCTは3種の神器

• Google Closure Library

• Google Closure Compiler

• Google Closure Template

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

Google Closure Template

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

$ java -jar SoyToJsSrcCompiler.jar \--shouldProvideRequireSoyNamespaces \--outputPathFormat simple.js simple.soy

Buildする

$ java -jar SoyToJsSrcCompiler.jar \--shouldProvideRequireSoyNamespaces \--outputPathFormat simple.js simple.soy

Buildする

Google Closure Compiler

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

SRC = js/hoge.js js/fuga.js

COMBINE = js/hoge.prod.jsCOMPRESS = js/hoge.prod.min.js $(COMBINE) : $(SRC) cat $^ > $@

java -jar /Applications/gcc/compiler.jar \--js $(COMBINE) \--js_output_file $(COMPRESS)

.PHONY: cleanclean : rm -f $(COMBINE) $(COMPRESS)

Compileする

弊社で使われているshell script

SRC = js/hoge.js js/fuga.js

COMBINE = js/hoge.prod.jsCOMPRESS = js/hoge.prod.min.js $(COMBINE) : $(SRC) cat $^ > $@

java -jar /Applications/gcc/compiler.jar \--js $(COMBINE) \--js_output_file $(COMPRESS)

.PHONY: cleanclean : rm -f $(COMBINE) $(COMPRESS)

Compileする

弊社で使われているshell script

Google Closure Library

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

$ 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"

Build

#-f "--compilation_level=ADVANCED_OPTIMIZATIONS"

圧縮のレベルを指定するオプション

$ 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"

Build

#-f "--compilation_level=ADVANCED_OPTIMIZATIONS"

圧縮のレベルを指定するオプション

• JavaScriptで手軽にクラスベース風の継承機能を提供

• require的な各ファイルの依存関係を解決してくれるPythonベースのツール

• 依存関係の解決から圧縮までをコマンドライン一発でやってくれるPythonベースのツール

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

ライブコーディング

Appendix

• Google Closure Tools

• Google Closure Library

• Google Closure Templates

• Google Closure Compiler

• Google Closure compilerをオンラインで

• Closure Libraryによるアプリ開発のはじめ方

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