Closure Library - Google Code
Googleのアプリケーションでも使われているライブラリらしい。
UIコンポーネントも用意されている。
ダイアログとかは確かにどこかでみたデザイン。
特徴
- Google謹製
- よくテストされたコード（自称）
- UI コンポーネント
- DOM操作
- サーバとの通信
- アニメーション
- データ構造
- ユニットテスト
- リッチテキストエディタ
- 複数のブラウザ互換
- などなど
ライセンスはソースコードを見ると Apache License, Version 2.0 となっていた。
APIドキュメント（英語）
Closure Library API Documentation (Closure Library API Documentation - JavaScript)
APIドキュメントは非常によく整備されている。ドキュメントが整備されているかどうかはライブラリの品質の一部であって、この点は仕事で使う場合とても重要。日本で使う場合の難点は英語のドキュメントしかないというところか。実際に動作するサンプルコード、ライブラリのソースコードなどにアクセスできる。
GAEで使う
これを GAEで使う。まずは subversionでソースをゲット。手順は下記を参考。
Getting Started with the Closure Library - Closure Library - Google Code
チェックアウトすると closure-library-read-only が作成される。
[closure-library-read-only]$ ls LICENSE all_tests.html closure README alltests.js third_party
GAEのアプリフォルダ内にここへのシンボリックリンクを作る（※とりあえず動かす。後日デプロイする時に正式な配置を考える。）
$ ln -s /Users/hashi/development/closure-library-read-only/closure \ /Users/hashi/development/GAE/closuresample/closure
index.html を編集して Google Closure Library 用のコードを書く。今回はダイアログを表示させてみる。
index.html
1 <html>
2 <head>
3 <link rel="stylesheet" href="closure/goog/demos/css/dialog.css">
4 <script src="/closure/goog/base.js"></script>
5 <script>
6 goog.require('goog.ui.Dialog');
7 </script>
8 <script>
9 var fu_dialog = new goog.ui.Dialog();
10 fu_dialog.setContent('content');
11 fu_dialog.setTitle('File upload window');
12 fu_dialog.setButtonSet(goog.ui.Dialog.ButtonSet.CONTINUE_SAVE_CANCEL);
13 </script>
14
15 </head>
16 <body>
17 <h1>name={{ name }}</h1>
18 <ul>
19 {% for animal in animals %}
20 <li>{{ animal }}</li>
21 {% endfor %}
22 </ul>
23 <button onclick="fu_dialog.setVisible(true)">open dialog</button>
24 </body>
25 </html>CSS は demos 配下のものを使う（CSSを指定しないとダイアログが体をなさない）。
静的ファイル
GAE でHTMLやJavaScript, CSSなどの静的ファイルを扱うにはパスを登録する必要がある。これは app.yaml に記述する。
（参考）Using Static Files - Google App Engine - Google Code
こんな感じ。
app.yaml
1 application: closuresample 2 version: 1 3 runtime: python 4 api_version: 1 5 6 handlers: 7 - url: /closure 8 static_dir: closure 9 10 - url: .* 11 script: main.py 12なお handlers: は上から評価されていくので順番を間違えると後ろの方の設定が評価されない。上の例の場合、/closure を下にすると、先に .* が評価されるので、無視されてしまう。
実行
さて実行してみよう。
- - - -
Python も初めてだし、JavaScriptもモダンなフレームワークを使うのは初めて。もちろんGAEも初めて。初めてづくしでやることだらけ。。
0 件のコメント:
コメントを投稿