Dojo に手を出す~概要を眺める
Google In App Payment っていう、Webでいろいろ販売する仕組みを使った Webアプリケーションをつくってみようと、あらためて、GAE Pythonの環境をつくった。
で、テスト用に、In App Payment のサンドボックス環境にアカウントを作成しようと数時間奮闘するも、なんか、支払い情報が不正とかいって、アカウント作成ができない。クレジットカード番号はダミーでいいとか書いてあるけど、適当入れるとエラーになるし。
ということで、先(?)にクライアント側をつくっていこう。
尊敬する、マーチンファウラー先生は、反感を持っておられるようだが、自分は jQuery 使い勝ってもよいし、文法的にもわかりやすくエレガントであると思っていて気に入っている。
ただ、UI周りのプラグインをいちいち探すのが面倒くさい。jQuery UI があるじゃないか! うーんそうなんだけど、もひとつコンポーネントが充実していない。
ということで、今回は、Dojo を触ってみようと思う。
細かい話は、Developerworks とかみるといろいろ書いてあるので、以下あたりからざっくりまとめる。
全体像が見えないと、さまようからねー
- 基礎から学ぶ Dojo: 第 1 回 Dojo 開発入門
- 基礎から学ぶ Dojo: 第 2 回 Dojo によるオブジェクト指向の開発をマスターする
- 基礎から学ぶ Dojo: 第 3 回 Dijit コンポーネント・フレームワークを利用してリッチなユーザー・インターフェースを作成する
Dojo Toolkit
Dojo Toolkit は、以下の4つの部分からなる。
- Base
- Core
- Dijit
- DojoX
Base
Dojo Toolkit の中核で、基本機能一式を含む。DOM操作、Ajax、イベント処理など
Core
Baseに含まれていない関数で、Base程多用されないが、重要なもの。高度なアニメーション、ドラッグ・アンド・ドロップ、I/O、国際化など
Dijit
Dojo Toolkit を特徴付ける、コンポーネントライブラリ群。強力なUIを最小の手順で作成。JavaScriptで構築する方法と、HTML タグの属性に宣言的に記述を行い、作成する方法とがある
DojoX
コミュニティ主導の実験的拡張ライブラリ
基本
ユーティリティ関数
以下の様な関数群がある
dojo.byId , dojo.query , dojo.create , dojo.body , dojo.empty , dojo.destroy , dojo.place
オブジェクトを取得したり、DOMの操作を行ったり。dojo.query は、CSS3 のセレクタを引数にとりオブジェクトを返すので、jQuery でできることの多くはこっちでもできそう。ただ、やっぱりjQuery が、$ としたのは、すごいな。
配列とNodeList
拡張された配列があり、NodeListというらしい。以下の様な関数が利用できる。
dojo.forEach , dojo.indexOf , dojo.filter , dojo.map , dojo.some , dojo.every
ちなみに、dojo.query の戻り値は NodeList のため、jQuery とあまり使い方は変わらなさそう。dojo.forEach より、jQuery の each の方が、好みだけど。
イベント処理
dojo.connect で、イベントをバインドできる
パブリッシュとサブスクライブ
これは、面白そう。コンポーネント間でお互いを意識せずに相互に対話できる仕組みがあるようだ。
dojo.subscribe , dojo.publish
Ajax
dojo.xhrGet , dojo.xhrPost , dojo.xhrPut , dojo.xhrDelete でAjax
オブジェクト指向
クラスベースのオブジェクト指向をシミュレート
JavaScript のオブジェクト指向は、プロトタイプベースだが、Java等のようなクラスベースのオブジェクト指向のような利用の仕方をすることができる。
dojo.declare("Car",null,{});
上記は、Car クラスを宣言。2つめの引数は、基底クラスを指定、3つめの引数はメンバーからなるオブジェクトを渡す。
ほーおもしろ。
パッケージ化
で、クラスは、パッケージとして管理され、必要時にロードすることができる。上記のクラス宣言は、完全なパッケージを指定すると、
dojo.declare("info.typea.dojo.Car",null,{});
となり、URIと対応するので、上記クラスの js ファイルのURIは、info/typea/dojo/Car.js となるはず。
で、ロードするときには、
dojo.require("info.typea.dojo.Car");
とする。
ビルドシステム
パッケージ化は、管理上は良いが、多数の小さなファイルをロードすることになり、パフォーマンスに深刻な影響を与える可能性がある。このため、不要なホワイトスペースやコメントを削除、ローカル変数名の短縮、リファクタリングなどの縮小化を行うビルドシステムが存在する。
ふむふむ。
これくらい把握できれば、触っていけそうだ。