Sencha Touch 2 で Ext Direct を使う (1)

去る3月31日に、新宿で Ext JS / Sencha Touch Perfectday #008 が開催されました。 その時に、私が発表する予定だった内容を、小堤さん(@kotsutsumi)が発表してくださいました。 発表されている中で、まとまったことはきっと中村がブログに残すでしょう、なんてことを 仰っていたので、ある程度資料としてまとめて、ブログにしておくことにします。 この記事を最初に4回ぐらいの連載になりそうです。

不明な点や、誤っている点がありましたら、是非、Twitterやこのブログのコメントでお知らせください。

Ext Direct とは

SenchaのExt JS 4のページにこんな記述があります。

Ext Directは、クライアントサイドからリモートサーバサイドメソッドを呼び出す、 プラットフォームや言語にとわられない技術です。Ext Directは、クライアントサイドのExt JSアプリケーションと、ポピュラーなサーバプラットフォームの間でシームレスな通信を可能にします。

まるで夢のようです。(´-｀)

Ext Directには、次のような機能があります。

  • サーバー上の関数を直接コールできる
  • StoreやModelと連係できる。DirectProxy
  • 短時間に複数のリクエストがあった場合にそれをまとめて（コンバイン）してくれる

Sencha.comの第一資料

Ext JS でのことになりますが、Sencha.comの Ext Directのページ が参考になります。 ここには、サーバーサイドの実装についての解説が書いてあります。 また、クライアントについてはAPIドキュメントの、Ext.direct以下とか、 Ext.data.proxy.Directあたりの解説が参考になります。 これまたExt JSのことですが、 Ext JS 4の日本語版API でもDirectの部分はほとんど翻訳されています。

ただし、Ext JS 4 と Senca Touch 2 は非常によく似たアーキテクチャですが、 Sencha Touch 2 とは微妙な違いがあることがあるので、 実装の段階では、Sencha Touch 2 のAPIを参照することが必要です。

まずは、ここら辺を嫁ということになるのですが、 実際には覚えることが多く、その順番もどうしたらいいか最初はわからないと思うので、ポイントをかいつまんで話します。

サーバーサイド

Ext Directでは、サーバーのメソッドを直接呼び出せるっていうことになるのですが、 それはサーバーサイドの助けがあってこそ可能になるのはおわかりのことと思います。 ここでは、サーバーサイドでどのようなことをするのかを説明します。

サーバーサイドでは、APIとRouterという2つの要素で、 クライアントサイドからメソッドを実行できるようにします。

API

APIというのは、サーバー側でどんなメソッドが公開されているのかを開示するものです。 クライアント側のExt Directは、APIが返す情報を見て利用できる関数がわかる仕組みです。

APIは次のように、htmlファイルの中でscriptタグで読み込まれます。

[html] <script src="Api.php"></script> [/html]

APIのサーバー側の処理では、こんな感じのJavaScriptコードを返すようにします。

[js] Ext.app.REMOTING_API = { "url":"remote/router.php", "type":"remoting", "actions":{ "AlbumList":[{ "name":"getAll", "len":0 },{ "name":"add", "len":1 }] } }; [/js]

1つのオブジェクト変数を返しています。内容は次のとおり。

url
Routerのurl
type
プロバイダのタイプ remoting or polling
actions
サーバーサイドのメソッドの仕様

クライアント側では、このオブジェクトを Ext.direct.Manager.addProvider に渡してプロバイダーを追加します。

[js] Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); [/js]

APIを用意しなくても、addProviderにオブジェクトリテラルを渡してやれば、動くっちゃ動きます。 実際、Senchaのサンプルの中でもpollingプロバイダのサンプルはその手を使っています。 ですが、サーバー側でメソッドを公開する以上、APIをサーバー側が用意するのが筋というものですよね。

Router

ルーターはクライアントがサーバーサイドのメソッドをコールしたときに、 リクエストの中身を解析して、実際のメソッドをコールします。

Provider, API, Router に関しては、初出の Ext Dirctのページおよび API. Ext.direct.Manager のドキュメントに説明があります。 routerを実装するつもりはないので、ここでは細かな解説はしません。(ひとまかせｗ)

サーバーサイドの実装

Senchaが用意しているサーバーサイドの実装には、Ext.Direct Pack というのがあります。 Ext JS 3の時はあったのに、Ext Directのページ からのリンクがないので、 なくなってしまったのかとおもったらちゃんと今でもありました。

Related Download の所からダウンロードできます。

ただ、動作が少し怪しいという指摘もあります。 （僕は使ったことないのでわからんけど）

Sencha.com のExt Directのページには

Ext Direct has been integrated with many server-side environments including:
PHP Java .NET ColdFusion Ruby Perl

なんて書いてあります。 Symphonyとか、いろいろなフレームワークなどで用意されているみたいです。 Ext.Direct – Server-side Stacks のブログ記事(英文)にいろいろ書いてあります。

僕は、サーバーサイドには、xFrameworkPX を使っています。 Xenophyさんのフレームワークで、Ext Directに標準で対応していて、Ext Directを使うのが非常に簡単になっています。 僕が思うに、一番簡単にExt Directを利用できるソリューションです。 xFrameworkPXとDirectを組み合わせて使うあたりについては、 このブログや、 本館 に情報がころがっています。