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プログラミングガイド
- 作者: 伊藤千光
- 出版社/メーカー: インプレス
- 発売日: 2010/12/10
- メディア: 単行本(ソフトカバー)
- 購入: 4人 クリック: 183回
- この商品を含むブログ (15件) を見る
とりあえず、ClosureLibraryの初期設定は、やはり伊藤殿のブログを見ていただくとして・・・w
Closure Libraryによるアプリ開発のはじめ方 - WebOS Goodies
実際にSlim3で使う時に、やりたくなるのは以下の点。
とりあえず、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
//Production用と書いてあるファイルだけが、本番環境で実際に読み込むファイルです。
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
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