Closure Compiler Service UI - Closure Compilerを使う！

トップページ >

Closure Compiler Service UI

Closure Compiler Service UIはClosure Compilerの機能をブラウザベースのWebアプリケーションとして提供します。短いコードをClosure Compiler Service UIに投入してその結果を確認してみることは、Compilerの動作を理解するのには最適の方法といえるでしょう。

• このページは公式サイトのこちらを元に作成しました。

目次:

使い方

1. ブラウザで下のURLにアクセスします。

   http://closure-compiler.appspot.com/

2. Closure Compiler Service UIの画面が表示されます。左下のコード入力欄には、シンプルな'Hello World'関数が予めサンプルとして入力されています。通常はここにユーザのコードが上書きされることになります。
3. そのまま Compile ボタンをクリックすると、コンパイルされたコードが出力されます。

以上で、オリジナルの関数と同じ機能をもつ、より小さなJavaScriptコードを手に入れることがきました。コメント・空白の削除とローカルシンボルのリネームによって、Closure Compilerは92バイトあったコードを55バイトにまで小さくしました。

JavaScriptファイルをコンパイルする

Closure Compiler UIは1つまたは複数のJavaScriptファイルを入力ソースとしてコンパイルを実行することもできます。ただしそのJavaScriptファイルは外部からHTTPでアクセスできる位置に公開されている必要があります。

1. Add a URL: の右のボックスに指定したいJSファイルのURLを入力します。
   • サンプルとして以下のファイルが用意されています。

     http://code.google.com/closure/compiler/samples/tutorial2.js

2. Add ボタンをクリックします。入力欄の先頭コメントに、指定ファイルを値にもつ @code_url パラメータが追加されます。指定したいファイルが複数ある場合は、1.～2.の手順を必要なだけ繰り返します。同じファイルを2度指定した場合はコンパイル時にエラーとなりますので注意してください。

複数指定されたファイルは指定順に結合された後にコンパイルされます。またファイル指定と入力欄へのコード入力を同時に行った場合は、結合されたファイル内コードの後ろに入力コードが結合され、その後コンパイルが実行されます。

コンパイル結果をファイルとして取得する

より使いやすいように、Closure Compiler Service UIはコンパイル結果をJSファイルとして1時間の間サーバ上に保持しています。このファイルにアクセスするには、コード出力欄の上にあるリンクのURLをコピーしてください。（The code may also be accessed at {filename}と表示されているところです）デフォルトの出力ファイル名は default.js ですが、入力欄の先頭部分にある @output_file_name パラメータの値を直接編集することで変更可能です。1時間の間に入力コードが変更されて再度コンパイルが行われた場合、Closure Compilerはサーバ上のファイルを新しい結果で上書きします。

アプリケーションのテスト環境からコンパイル結果へ直接リンクすることで、手軽にコードの動作チェックを行えるようになります。しかし決してこの機能を本番環境で使用しないでください。

• 注意： 過大な負荷を避けるため、あるユーザが一定時間内で連続してClosure Compiler Service UIを利用できる回数には制限が設けられています。もし以下のようなメッセージが表示された場合は、あなたがその制限を一時的にオーバーしてしまったことを示しています：

  Too many compiles performed recently. Try again later

コード入力欄先頭のコメントについて

コード入力欄の先頭にある「 // ==ClosureCompiler 」から始まる一連のコメントは、コンパイル時にコードと共にサーバに送信されるパラメータを表しています。この値は画面上のオプション設定変更に伴って即座に変更されていきますが、逆にこのコメントを直接書き換えて設定を変更することもできます。このときコメントと画面の設定が矛盾する可能性がありますが、コメント上の指定の方が優先されるようです。

コードのコピーペーストなどでこのコメントが一時的に消えてしまっても、送信時に自動的に再作成されます。ただし出力ファイル名（ @output_file_name ）の変更や入力ファイルの指定（ @output_file_name ）は復活しませんので注意してください。

データサイズの制限

Closure Compiler Service UIからサーバに送信できるデータのサイズは最大200,000バイトに制限されています。ここでいうデータには、入力欄に記述されたコードとアプリケーションが作成する各種のコンパイルパラメータが含まれます。データサイズが制限を超過している場合、コンパイル処理は失敗します。

入力コードのうち、サイズ制限の対象となるのは入力欄に直接記入された分のみです。従ってコードのサイズが大きすぎる場合はJavaScriptファイルをコンパイルするで示されている手順に従ってコードをJSファイルとして指定するようにしてください。（なお、コンパイルパラメータのサイズは全部合わせてもせいぜい100バイト程度です）

オプションリファレンス

Add a URL:

入力ファイルのURLを指定します。詳しくはこちらを参照してください。

Optimization:

コードのコンパイルレベルを指定します。

Formatting:

出力されるコンパイル済みJavaScriptコードの整形方式を指定します。

• Pretty print

  チェックが付いている場合、Closure Compilerは人間が読み易くなるよう出力コードに改行とインデントを付加します。以下にその例を示します：

  function hello(a) {
    alert("Hello, " + a)
  }
  hello("New user");

  Pretty print がチェックされていない場合は次のようになります。

  function hello(a){alert("Hello, "+a)}hello("New user");

• Print input delimiter

  チェックが付いている場合、Closure Compilerは各入力ファイルと入力欄に設定されたJavaScriptコードの範囲を示す文字列を出力コード内に付加します。例えば2つのファイルを一緒にコンパイルした場合、出力は次のようになります：

  // Input 0
  alert("hi");
  // Input 1
  alert("bye");

  ファイル間の境界を表す区切り文字としてClosure Compilerは「 // Input X 」を挿入します。これらの区切り文字はコメントであり、JavaScriptの動作を妨げない点に注意してください。

  入力ファイルの区切りには、例えば各ファイルのうちコードサイズの圧縮に最も貢献しているものの把握を助けるというような用途が考えられます。

---