ライブラリにあらず! 〜google closure toolsの事始め〜
TRANSCRIPT
![Page 1: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/1.jpg)
ライブラリにあらず!~Google Closure Toolsの事始め~
面白法人カヤックHTMLファイ部 比留間和也
![Page 2: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/2.jpg)
自己紹介
• 面白法人カヤックHTMLファイ部所属比留間 和也
• 最近はJSばっかりで、あんまりHTML書いてません。
![Page 3: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/3.jpg)
ちょっと書きました
すべての人に知っておいてほしいHTML5 & CSS3 の基本原則
すべての人に知っておいてほしい スタイルシートデザインの基本原則
![Page 4: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/4.jpg)
Google Closure Toolsとは
![Page 5: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/5.jpg)
Google Closure Toolsは、いわゆる一般的なJavaScriptライブラリ
![Page 6: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/6.jpg)
![Page 7: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/7.jpg)
ではありません
![Page 8: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/8.jpg)
GCTは3種の神器
![Page 9: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/9.jpg)
• Google Closure Library
• Google Closure Compiler
• Google Closure Template
![Page 10: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/10.jpg)
これら3つが組み合わさって初めて「Google Closure Tools」の真価が発揮される
![Page 11: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/11.jpg)
Google Closure Template
![Page 12: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/12.jpg)
SoyToJsSrcCompiler.jarというファイルを使います
![Page 13: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/13.jpg)
![Page 14: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/14.jpg)
$ java -jar SoyToJsSrcCompiler.jar \--shouldProvideRequireSoyNamespaces \--outputPathFormat simple.js simple.soy
Buildする
![Page 15: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/15.jpg)
$ java -jar SoyToJsSrcCompiler.jar \--shouldProvideRequireSoyNamespaces \--outputPathFormat simple.js simple.soy
Buildする
![Page 16: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/16.jpg)
![Page 17: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/17.jpg)
Google Closure Compiler
![Page 18: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/18.jpg)
弊社社内でも最後の仕上げとして、圧縮するために使われたりしています
![Page 19: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/19.jpg)
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
![Page 20: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/20.jpg)
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
![Page 21: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/21.jpg)
Google Closure Library
![Page 22: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/22.jpg)
Google Closure Toolsの中でもコア機能Googleの集大成ともいえるライブラリ群
![Page 23: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/23.jpg)
![Page 24: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/24.jpg)
![Page 25: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/25.jpg)
$ 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"
圧縮のレベルを指定するオプション
![Page 26: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/26.jpg)
$ 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"
圧縮のレベルを指定するオプション
![Page 27: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/27.jpg)
• JavaScriptで手軽にクラスベース風の継承機能を提供
• require的な各ファイルの依存関係を解決してくれるPythonベースのツール
• 依存関係の解決から圧縮までをコマンドライン一発でやってくれるPythonベースのツール
![Page 28: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/28.jpg)
Google Closure Toolsは、こうしたツール群を駆使してつくり上げる巨大なフレームワーク
![Page 29: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/29.jpg)
ライブコーディング
![Page 30: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/30.jpg)
Appendix
• Google Closure Tools
• Google Closure Library
• Google Closure Templates
• Google Closure Compiler
• Google Closure compilerをオンラインで
• Closure Libraryによるアプリ開発のはじめ方
![Page 31: ライブラリにあらず! 〜Google Closure Toolsの事始め〜](https://reader034.vdocuments.mx/reader034/viewer/2022050613/558de5281a28abe2428b4690/html5/thumbnails/31.jpg)
ご清聴ありがとうございました