• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ライブラリにあらず! 〜Google Closure Toolsの事始め〜
 

ライブラリにあらず! 〜Google Closure Toolsの事始め〜

on

  • 3,812 views

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

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

Statistics

Views

Total Views
3,812
Views on SlideShare
3,232
Embed Views
580

Actions

Likes
4
Downloads
8
Comments
0

2 Embeds 580

https://ocean.cybozu-dev.com 555
https://twitter.com 25

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

ライブラリにあらず! 〜Google Closure Toolsの事始め〜 ライブラリにあらず! 〜Google Closure Toolsの事始め〜 Presentation Transcript

  • ライブラリにあらず!∼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というファイルを使います
  • Buildする$ java -jar SoyToJsSrcCompiler.jar --shouldProvideRequireSoyNamespaces --outputPathFormat simple.js simple.soy
  • Buildする$ java -jar SoyToJsSrcCompiler.jar --shouldProvideRequireSoyNamespaces --outputPathFormat simple.js simple.soy
  • Google Closure Compiler
  • 弊社社内でも最後の仕上げとして、圧縮するために使われたりしています
  • CompileするSRC = js/hoge.js js/fuga.jsCOMBINE = 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) 弊社で使われているshell script
  • CompileするSRC = js/hoge.js js/fuga.jsCOMBINE = 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) 弊社で使われているshell script
  • Google Closure Library
  • Google Closure Toolsの中でもコア機能Googleの集大成ともいえるライブラリ群
  • 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"
  • 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"
  • • 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によるアプリ開発のはじめ方
  • ご清聴ありがとうございました