Closure Compilerを使う!
http://w.atwiki.jp/aias-closurecompiler/
Closure Compilerを使う!
ja
2010-08-29T15:36:00+09:00
1283063760
-
Closure Inspector
https://w.atwiki.jp/aias-closurecompiler/pages/32.html
&small(){[[トップページ]] >}
#divclass(page_title){
&this_page()
}
Closure InspectorはFirefoxのエクステンションであるデバッガFirebugのエクステンションです。Closure InspectorはFirebugに強力な3つの機能 - ソースマッピング、改良されたスタックトレース、ユニットテストとの統合 - を追加します。ここではClosure Inspectorのインストール手順とその利用法について説明します。
#divclass(additional){{
-このページは公式サイトの&blanklink(こちら){http://code.google.com/closure/compiler/docs/inspector.html}を元に作成しました。
}}
#divclass(cont_title){目次:}
#divclass(contents){
#contents()
}
** インストール
Closure Inspectorの動作には&spanclass(keywd){Firefox 3.x}とFirefoxのエクステンションである&spanclass(keywd){Firebug 1.4}以上が必要です。
Closure Inspectorのインストール手順は以下のとおりです:
+ もしまだFirebugをインストールしていないのなら、&blanklink(){http://getfirebug.com}からダウンロード・インストールを行ってください。
+ &blanklink(Closure Inspector XPI){http://closure-inspector.googlecode.com/files/closureinspector095.xpi}をダウンロードします。もしそのファイルをどう処理するのかブラウザから尋ねられた場合は、''Download''(「ファイルを保存する」)を選択してください。Closure Inspectorのインストール方法は他のFirefoxエクステンションと同じで、ダウンロードの完了後、そのファイルをFirefoxのウィンドウにドラッグ・アンド・ドロップするだけです。
2010-08-29T15:36:00+09:00
1283063760
-
よくある質問
https://w.atwiki.jp/aias-closurecompiler/pages/30.html
&small(){[[トップページ]] >}
#divclass(page_title){
&this_page()
}
#divclass(additional){{
-このページは公式サイトの以下のページを元に作成しました。&br()http://code.google.com/p/closure-compiler/wiki/FAQ &br()http://code.google.com/closure/compiler/faq.html
}}
#divclass(cont_title){目次:}
#divclass(contents){
#contents()
}
** そもそも...
*** Closure Compilerとは何ですか?それを使うべき理由は?
Closure CompilerはJavaScriptのダウンロードと実行の速度を上げるためのツールです。あなたはClosure Compilerを使うことであなたのJavaScriptファイルのサイズを小さくでき、そしてコードはより効率的になります。
*** Closure Compilerはその他のJavaScript圧縮ツールとどう違うのですか?
一般的にClosure Compilerは他の縮小ツールと同等かそれ以上の圧縮率を達成しており、あなたのWebアプリケーションのダウンロード時間を改善することができます。加えて、Closure Compilerは文法エラーを開発中に(テスト中ではなく)発見すること、バグのパターンにはまる可能性のあるコードを見分けることを助けてくれます。
&spanclass(keywd2){SIMPLE_OPTIMIZATIONS}レベルの場合、Compilerはより一層のコードサイズ縮小を図るためにコンパイラ的なコード解析を行い、他のツールよりも優れた結果を実現します。Closure Compilerが行うことの例としては、数回しか出現しない関数のインライン化、変数名の再利用、定数式の事前計算があります。
&spanclass(keywd2){ADVANCED_OPTIMIZATIONS}レベルの場合、Closure Compilerはあなたが追加したデータ型に関するアノテーションも使って、目立たない
2010-08-28T12:53:57+09:00
1282967637
-
高度なトピック
https://w.atwiki.jp/aias-closurecompiler/pages/29.html
&small(){[[トップページ]] > }
#divclass(page_title){
&this_page()
}
このページに続くコンテンツでは、Closure Compilerをより高度に利用するための様々な機能について解説します。
**[[extern宣言]]
externとは、サードパーティのライブラリなどの外部コードが定義するシンボルの名前を宣言し、&spanclass(keywd){ADVANCED_OPTIMIZATIONS}レベルでコンパイルされるコード内でそれらをClosure Compilerのリネーム処理から保護する機能です。externが必要な状況がよく分からない場合は、まず&link_anchor(maintainRelations,page=Compilerが求めるコーディングルール){こちら}を参照してください。
externは[[Closure Compiler Application]]及び[[Closure Compiler Service API]]で利用できます。[[Closure Compiler Service UI]]はexternのためのインターフェースを提供していません。
**[[アノテーションによる型定義]]
Closure CompilerはJavaScript変数のデータ型やその他の情報を利用して、高度な最適化と警告機能を提供します。しかしJavaScriptには型を宣言する構文がありません。このため、あなたはコメントを使用してコード内にそれらを定義する必要があります。
Closure Compilerの型定義言語はドキュメント生成ツールである[[JsDoc Toolkit>http://code.google.com/p/jsdoc-toolkit/]]で使用されているアノテーション(注釈)コメントから派生したものです。このページではClosure Compilerが解釈可能なアノテーションコメントと型表現のセットについて説明します。
**[[--manage_closure_dependenciesによる依存関係の自動解決]]
ブラウザはJavaScriptを記述された順に処理します。アプリケーションが複数のJavaScriptファイルから構成され
2010-08-29T14:57:23+09:00
1283061443
-
エラーと警告のリファレンス
https://w.atwiki.jp/aias-closurecompiler/pages/28.html
&small(){[[トップページ]] > }
#divclass(page_title){
&this_page()
}
このページはClosure Compilerがコンパイル時に出力するエラーと警告のリファレンスです。
ここで対象となっているのはコードの内容が原因となって発生するエラーと警告だけです。例えば必須パラメータの指定漏れのような、リクエストそのものの不備が原因となって発生するエラーについては&link_anchor(serverErr,page=Closure Compiler Service API:リファレンス){こちら}で詳しく解説しています。
#divclass(additional){{
-このページは公式サイトの&blanklink(こちら){http://code.google.com/closure/compiler/docs/error-ref.html}を元に作成しました。
}}
#divclass(cont_title){目次:}
#divclass(contents){
#contents()
}
** エラー
*** JSC_BITWISE_OPERAND_OUT_OF_RANGE
#divclass(syntax){{{{
#html2(){{
Operand out of range, bitwise operation will lose information: NUMBER <span class="alt" >{value of left-hand operand of bitwise operation}</span> :
}}
}}}}
このエラーはビット演算において左側のオペランドのビット長が32ビットを超えていることを意味しています。例えば以下のコードでは&tt(){1024 * 1024 * 1024 * 2}が二進数表現で32ビットを超えているため、このエラーが発生します:
#blockquote{{
&nolink()&spanclass(comment){// Produces JSC_BITWISE_OPERAND_OUT_OF_RANGE error:}
 (br,0)var y = 1024 * 1024 * 1024
2010-09-05T17:05:59+09:00
1283673959
-
--manage_closure_dependenciesによる依存関係の自動解決
https://w.atwiki.jp/aias-closurecompiler/pages/26.html
&small(){[[トップページ]] > [[高度なトピック]] >}
#divclass(page_title){
&this_page()
}
ブラウザはJavaScriptを記述された順に処理します。アプリケーションが複数のJavaScriptファイルから構成されている場合、開発者はそれらが適切な順序で実行されるようにファイルの並び順を管理しなければなりません。以下の説明における依存関係とは、このようなファイル単位のコードの実行順序のことを指します。
Closure Libraryはファイル間の依存関係の管理を助ける&blanklink(いくつかのpythonスクリプト){http://code.google.com/closure/library/docs/calcdeps.html}を提供しています。Closure Libraryの世界では、各JavaScriptファイル内でシンボルが最初に定義されるところで&spanclass(keywd){goog.provide}が呼び出され、シンボルが使用されるファイルの先頭で&spanclass(keywd){goog.require}が呼び出されます。つまり&spanclass(keywd){goog.provide}によるシンボルの宣言は、そのシンボルを指す全ての&spanclass(keywd){goog.require}よりも先行して実行されなければならないのです。Closure Libraryのスクリプトはこの原則を利用してファイルの順序を自動的に決定します。
そして[[Closure Compiler Application]]もその原則に基づいたファイルの依存関係の自動解決をサポートしています。この機能はは&spanclass(keywd){--manage_closure_dependencies}オプションによって有効化されます。
- ''注意:''[[Closure Compiler Service UI]]と[[Closure Compiler Service API]]は依存関係の自動解決をサポートしません。
#divclass(space){}
#divclass(space){}
#divclass(additional){{
-このページは公式
2010-09-11T15:38:09+09:00
1284187089
-
Closure Compiler Application:コマンドラインオプション
https://w.atwiki.jp/aias-closurecompiler/pages/25.html
&small(){[[トップページ]] > [[Closure Compiler Application]] >}
#divclass(page_title){
&this_page()
}
このページでは、Closure Comiler Applicationのコマンドラインオプションについて詳細に説明します。Closure Comiler Applicationの使用方法については[[こちら>Closure Compiler Application]]を参照してください。
#divclass(additional){{
-このページは&link_anchor(prm_help){--help}オプションで出力されるヘルプの情報を元に作成しました。尚、管理人が使い方を理解できなかったオプションについてはヘルプの原文(英語)をそのまま記載しています。
}}
#divclass(cont_title){目次:}
#divclass(contents){
#contents()
}
** 主なオプション
*** --charset
#divclass(syntax){{
&nolink()--charset VAL
}}
全ての入力ファイルの文字エンコーディングを指定します。(入力ファイルは全て同じ文字エンコーディングを使用していなくてはなりません。)省略した場合、ファイルの文字エンコーディングは&spanclass(keywd){UTF-8}であると解釈されます。
*** &aname(prm_compilation_level,option=nolink){--compilation_level}
#divclass(syntax){{
&nolink()--compilation_level [WHITESPACE_ONLY|SIMPLE_OPTIMIZATIONS|ADVANCED_OPTIMIZATIONS]
}}
JavaScriptに適用する圧縮と最適化の度合い([[コンパイルレベル]])を指定します。以下の3つのレベルがあります:
- ''WHITESPACE_ONLY''
#div(){{{{
JavaScriptから空白・改行とコメントだけを削除します。
}}}}
- ''
2010-09-05T13:22:12+09:00
1283660532
-
Closure Compiler Service API:リファレンス
https://w.atwiki.jp/aias-closurecompiler/pages/24.html
&small(){[[トップページ]] > [[Closure Compiler Service API]] >}
#divclass(page_title){
&this_page()
}
このページでは、Closure Comiler Service APIのインターフェース仕様について詳細に説明します。APIの使用方法については[[こちら>Closure Compiler Service API]]を参照してください。
コンパイルされたコードやAPIからの様々な情報を取得するためには、HTTP POSTリクエストを下記のURLに送る必要があります。
#divclass(syntax){{
http://closure-compiler.appspot.com/compile
}}
#divclass(space){}
リクエストボディは「&link_anchor(paramReq){必須リクエストパラメータ}」に列挙されたパラメータを必ず含んでいなければなりません。また「&link_anchor(paramOpt){省略可能なリクエストパラメータ}」に列挙されたパラメータを含めることもできます。
もしサーバがリクエストの処理に失敗した場合には、サーバエラーメッセージが返却されます。それらのメッセージについては「&link_anchor(serverErr){サーバエラーメッセージ}」で説明されています。
#divclass(additional){{
-このページは公式サイトの&blanklink(こちら){http://code.google.com/closure/compiler/docs/api-ref.html}を元に作成しました。
}}
#divclass(cont_title){目次:}
#divclass(contents){
#contents()
}
** &aname(paramReq,option=nolink){必須リクエストパラメータ}
*** &aname(prm_js_code,option=nolink){js_code}
コンパイルするJavaScriptコードをパラメータの値として直接指定します。リクエストにはこのパラメータか&link_anchor
2010-09-05T12:51:53+09:00
1283658713
-
extern宣言
https://w.atwiki.jp/aias-closurecompiler/pages/23.html
&small(){[[トップページ]] > [[高度なトピック]] > }
#divclass(page_title){
&this_page()
}
externとは、サードパーティのライブラリなどの外部コードが定義するシンボルの名前を宣言し、&spanclass(keywd){ADVANCED_OPTIMIZATIONS}レベルでコンパイルされるコード内でそれらをClosure Compilerのリネーム処理から保護する機能です。externが必要な状況がよく分からない場合は、まず&link_anchor(maintainRelations,page=Compilerが求めるコーディングルール){こちら}を参照してください。
externは[[Closure Compiler Application]]及び[[Closure Compiler Service API]]で利用できます。[[Closure Compiler Service UI]]はexternのためのインターフェースを提供していません。
#divclass(additional){{
-このページは公式サイトの以下のページを元に作成しました。&br()http://code.google.com/closure/compiler/docs/api-tutorial3.html
}}
&br()
以下のJavaScriptは、extern宣言を必要とするコードを含んでいます:
#blockquote(){{{{
#divclass(comment){{
/**
 (br,1)* あるページに対し注記のリストを追加するシンプルなスクリプト。
 (br,1)* リストには注記のタイトル、その下に本文が表示される。
 (br,1)*/
}}
 (br,0)
#divclass(comment){{
/**
 (br,1)* 注記のためのDOM構造を作成し、それをドキュメントに追加する。
 (br,1)*/
}}
function makeNoteDom(noteTitle, noteContent, noteContainer) {
 (br,2)&spanclass(comment
2010-09-05T13:22:59+09:00
1283660579
-
アノテーションによる型定義
https://w.atwiki.jp/aias-closurecompiler/pages/22.html
&small(){[[トップページ]] > [[高度なトピック]] >}
#divclass(page_title){
&this_page()
}
Closure CompilerはJavaScript変数のデータ型やその他の情報を利用して、高度な最適化と警告機能を提供します。しかしJavaScriptには型を宣言する構文がありません。このため、あなたはコメントを使用してコード内にそれらを定義する必要があります。
Closure Compilerの型定義言語はドキュメント生成ツールである[[JsDoc Toolkit>http://code.google.com/p/jsdoc-toolkit/]]で使用されているアノテーション(注釈)コメントから派生したものです。このページではClosure Compilerが解釈可能なアノテーションコメントと型表現のセットについて説明します。
#divclass(additional){{
-このページは公式サイトの&blanklink(こちら){http://code.google.com/closure/compiler/docs/js-for-compiler.html}を元に作成しました。
-JsDoc Toolkitについては&blanklink(こちらのサイト){http://www12.atwiki.jp/aias-jsdoctoolkit/}も参考にしてみてください。
}}
#divclass(cont_title){目次:}
#divclass(contents){
#contents()
}
** JsDoc タグ
Closure CompilerはJsDocタグから型情報を探し出します。Compilerがコードの最適化と型エラーやその他の間違いの可能性をチェックする助けとするために、以下の表で説明されているJsDocタグを使用してください。
-この表に含まれるタグはClosure Compilerの動作に影響を及ぼすものだけです。その他のJsDocタグについての情報は、[[JSDoc Toolkit documentation>http://code.google.com/p/jsdoc-toolkit/wiki/TagReference]]を参照し
2010-09-10T00:09:53+09:00
1284044993
-
トップページ
https://w.atwiki.jp/aias-closurecompiler/pages/21.html
#divid(site_desc){
**このサイトについて
}
「Closure Compilerを使う!」は、Googleが提供しているコード圧縮・最適化ツールであるClosure Compilerの使い方を紹介するサイトです。
#divclass(additional){{
-このサイトのコンテンツの大部分は&blanklink(公式サイト){http://code.google.com/p/closure-compiler/}や&blanklink(チュートリアル){http://code.google.com/closure/compiler/}の記述をベースに日本語で再構成したものですが、その内容はあくまで管理人の個人的な理解に基づくものです。ご利用は自己責任でお願いします。
}}
** Closure Compilerとは
Closure CompilerはGoogleが無償で公開しているJavaScriptコードの圧縮・最適化・難読化ツールです。ライセンスは&blanklink(Apache License 2.0){http://www.apache.org/licenses/LICENSE-2.0}です。
JavaScriptのコード圧縮・難読化ツールとしては他に&blanklink(packer){http://dean.edwards.name/packer/}や&blanklink(YUI Compressor){http://developer.yahoo.com/yui/compressor/}などが有名ですが、Closure Compilerも基本的な機能としてそれらと同等のコード圧縮機能を有しています。以下の例は、Closure Compilerがコメント・改行・空白の削除とプライベート変数の短縮によってコードを圧縮している様子を示しています。
-圧縮前のコード
#blockquote(){{
&spanclass(comment){//使われない関数}
 (br,0)function unusedFunction(note) {
 (br,2)alert(note["text"]);
 (br,0)}
 (br,0)
 (br,0)&spanclass(
2011-08-30T22:56:59+09:00
1314712619