SiNBLOG

140文字に入らないことを、極稀に書くBlog

Slim3でClosure Libraryを使ってみた!

ClosureLibraryはGoogleが作成しているJavaScriptのLibraryです。
Gmail,Google CalendarなどGoogleのサービスで利用されています。

Closure Library  |  Google Developers

なかなか面白いもので、以下のような特徴があります。


豊富なUIコンポーネント
jQuery UIのような豊富なUIコンポーネントがあります。
GoogleCalendarで予定を入力する時に出てくるjQuery UI DatepickerのようなUIみたいなやつです。


豊富なツールのサポート
ClosureLibraryはいくつかのツールと共に利用します。

depwriter
jsの依存関係を解決するツールです。
ClosureLibraryでは、Javaのimportのような形で、依存しているライブラリを記述します。
それらを読み取って解決するのがdepwriterです。


closurebuilder
ClosureLibraryは、最後にコンパイルを行います。
とは言えDartのようなものではありません。
コンパイル前も、ブラウザ上で動作し、デバッグすることも可能です。
ただし、非常に多くのjsファイルとcssの読み込みが必要です。
そのため、本番環境に上げる前に、依存関係を解決し、1つのjsファイルに統合します。
その時に、ミニファイも行います。


closure-stylesheets
CSSの統合するツールです。
UIコンポーネントCSSや自分で作ったCSSを統合して、1つのcssファイルにします。


他にも色々ありますが、僕もまだかじった程度なので、詳しくはGoogle API Expartの伊藤 千光殿のブログと見ると良いでしょう。
Closure Library を使うべき 10 の理由 - WebOS Goodies

また、伊藤殿の書籍もあります。
今回作ったサンプルも、この書籍のサンプルを写経しました。

Google API Expertが解説する Closure Libraryプログラミングガイド

Google API Expertが解説する Closure Libraryプログラミングガイド

とりあえず、ClosureLibraryの初期設定は、やはり伊藤殿のブログを見ていただくとして・・・w
Closure Libraryによるアプリ開発のはじめ方 - WebOS Goodies


実際にSlim3で使う時に、やりたくなるのは以下の点。

  1. Local環境では、デバッグしたいので、コンパイル前の状態で動かしたい
  2. Production環境では、高速に動作させたいので、コンパイル後の状態で動かしたい

とりあえず、1つ目の条件を満たすためにwar直下にどーんとClosureLibraryを配置。
問題は、そうするとそのままProduction環境にどーんと上がってしまう点。
ClosureLibraryのファイル数はかなり多いため、GAEの3000ファイル制限を圧迫してしまう。
また、Production環境ではコンパイル後の統合されたjsを利用するため、必要ない。

それを解決してやるために、以下の設定をしてやる。
appengine-web.xml






たぶん、きっと、これで出来ているはず・・・。
GoogleGroupで教えて下さった方々ありがとうございました。
Google グループ

.batもはじいているのは、ClosureLibraryのツールを実行するのを.batで書いているため。
例えば、depwriterを実行するためのbatはこんな感じ。


@echo off

encode is shift-jis
commnet

echo if you run the depwriter please press the y key
set /p CONFIRM=

run depwriter

if "y" == "%CONFIRM%" (
echo depwriter
python ../closure-library\closure\bin\build\depswriter.py --root_with_prefix="scripts ../../../tinyword/scripts" --output_file=deps.js
pause
)

あんまり、batは詳しくないので、模倣する価値があるかは分かりませんが、参考程度に。


作成したもののファイル構成は以下の通り。
基本的に書籍のサンプルのままで、batファイルをそのまま突っ込んでる感じw


tinyword
| closure-stylesheets.bat
| closurebuilder.bat
| deps.js
| depswriter.bat
| index.html

+--files
| scripts.js //Production用
| stylesheet.css //Production用

+--gss
| stylesheet.gss

+--scripts
| app.js
| editor.js
| leftpane.js
| mapsplugin.js
| renaming_map.js
| rightpane.js
| savedialog.js
| savedialogplugin.js
| treecontrol.js
| treenode.js
//Production用と書いてあるファイルだけが、本番環境で実際に読み込むファイルです。
scripts配下のファイルを、コンパイルした結果が、files下のscripts.jsです。
gssはSassやLESSのようなCSS拡張機能を持ったものです。
また、ClosureLibraryと組み合わせることにより、CSSクラス名を短縮することもできます。
これを統合した結果が、files下のstylesheet.cssです。
今回はgss配下には1ファイルしかありませんが、複数ファイルを統合することも可能です。


実際に利用しているhtmlファイルが以下です。
コメントアウトしているところが、Local環境で使っていた部分です。
index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Tiny Word</title>
        <link rel="stylesheet" href="/tinyword/files/stylesheet.css">
        <!--
        <script src="/closure-library/closure/goog/base.js">
        </script>
        <script src="deps.js">
        </script>
        -->
        <script src="files/scripts.js">
        </script>
    </head>
    <body>
        <h1 id="title">Tiny Word</h1>
        <div id="xhr-indicator">
            アクセス中
        </div>
        <!-- このdiv内にアプリケーションUIを表示する -->
        <div id="main">
        </div>
        <!--
        <script>
        goog.require('tinyword.App');
        </script>
        -->
    </body>
</html>

この辺りも自動で変えれれば最高ですが、そこまではまだ思いつかず・・・。

最後に、動いているものを。
書籍のサンプルを写経したのですが、書籍はpythonなので、slim3に作り変えています。
が、途中で、力尽きたので、新規フォルダ作成と名前変更しか動きませんorz
ログイン - Google アカウント


それぞれの機能の細かい話も書きたいですが、とりあえずこんなところで!


因みに上記の書籍を含む、GoogleAPIExpertが書いた書籍6点が電子書籍化されています。
2012/5/31まで、6点まとめ買いで、割引が!
http://tatsu-zine.com/api-expert