PR

 非常に見づらいですが,改行が取り払われて変数名などが簡略化されました。日本語でコード内に書かれていた「猫」などのデータ名が\u732bのようにユニコードの文字参照に変換されていることもわかります。

 <script>と</script>の間をこのコードに書き換えればサンプルは最適化前と全く同じように動作します。さて問題の外部参照リンクです。このドキュメントはhttp://www.google.com/jsapiという外部ライブラリを参照しています。したがってJavaScriptを正しく動作させるには,その端末がネットワークにつながっていてGoogle.comまで接続できなくてはなりません。

 ライブラリを読み込めないとどうなるのかは,外部参照リンクの部分をコメントアウトすることで確かめられます。グラフの描画はライブラリ内の関数を呼び出しているわけですから,ライブラリが読み込めない,つまりネットワークから切断された環境ではサンプルは動作しなくなってしまいます。

 外部参照がある場合には,Closure Compilerの画面の最上段の「Add a URL」というテキストボックスに外部参照しているJavaScriptのURLを記述して「Add」ボタンを押します。するとテキストエリアのコンパイル・オプション部に下記のような1行が追加されることがわかります(図4)。

// @code_url http://www.google.com/jsapi

図4●Add a URL欄に外部参照しているJavaScriptのURLを入力してAddボタンを押したところ
図4●Add a URL欄に外部参照しているJavaScriptのURLを入力してAddボタンを押したところ
[画像のクリックで拡大表示]

 ここで登録したURLのJavaScriptは,テキストエリア内に書かれているJavaScriptコードと同様に最適化の対象になります。最適化してみると,先ほどとは違い,かなりの量のコードが,右側の領域に最適化したコードとして表示されます(図5)。

図5●外部参照しているライブラリのコードを含めて最適化されたコードが右側の領域に表示される(この図では途中までしか表示されていない)。リスト2-1に比べて非常に長くなっていることがわかる
図5●外部参照しているライブラリのコードを含めて最適化されたコードが右側の領域に表示される(この図では途中までしか表示されていない)。リスト2-1に比べて非常に長くなっていることがわかる
[画像のクリックで拡大表示]

 最適化されたコードはhttp://www.google.com/jsapiの内容を含みます。このコードを<script>と</script>の間に記述すれば,外部参照のリンクを削除しても円グラフは描画されます。Google.comに対しての接続が要求されないので,スタンドアロン・コードとして動作します。

 この最適化は二つのメリットを生み出します。一つはすでに述べたように,ネットワークから切断されている状態でもJavaScriptアプリケーションが動作させられるようになる点です。この考え方そのものはGoogle Gearsに近いと言えます。

 もう一つのメリットは,アクセスが集中するであろうGoogle.comのようなサイトへ,ライブラリ本体を入手するために接続する必要が無くなる点です。一つのドキュメントが表示を完了させるために,別のサイトからライブラリを集めてくるのには結構なオーバーヘッドがかかります。ドキュメント内でライブラリ処理が完結すれば,実質的な表示速度向上につながります。

 デメリットは見ておわかりの通りです。これだけ長く改行もないJavaScriptのコードを埋め込むと,HTMLソースが見栄えとして極端に格好悪くなる点でしょう。また,そのままコードを修正する気には到底なれないでしょう。