Ext.DirectのバックエンドをNode.jsで書く

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Writing an Ext.Direct Backend in Node.js を翻訳したものです。

皆様の中で挑戦された方もおられるかと思いますが、余り広く知られてないけれどもとても良い機能であるSencha Ext.Directをまだ利用したことがない開発者も大勢おられるでしょう。Sencha Ext.Directは2009年に発表され、Ext JS 3.0で導入された数ある技術の中でも屈指の機能です。

この記事では、Ext.Directを紹介し、Node.jsのExt.Directコネクターとバックエンドの例を提供します。

なぜExt.Directを検討するべきか

本質的にExt.Directはクライアントとサーバーの間で通信するための、言語およびプラットフォームに依存しない技術です。全ての呼び出しはクライアント側から開始され、コーディングが再び楽しくなる機能が提供されます。”ステロイドを打っRPC”と呼びたいぐらいです。最も重要な特徴はExt.DirectはExt JSに含まれているので、立ち上げるにあたってクライアント側に別のライブラリを必要としません。そして呼び出しの再試行、ファイルのアップロード、バッチトランザクションの能力も持っています。ここから全ての仕様を見る事が出来ます。

Ext JSはサーバー側に依存しないので幅広いWebサービスを使用できます。そのため、とても強力なクライアント側のフレームワークと言えます。最も人気のある通信方法はREST、JSONやXMLデータを使った標準的なAjax呼び出し、そしてJSONPになります。これらは実に人気がありよく利用されていますが、時々もっと柔軟でフレームワークに相性の良いスタックが欲しい時もあります。このようなときにExt.Directは輝きます。

Ext.Directは公開済みまたは定義済みのサーバー側メソッドを呼び出すために利用されます。この素晴らしいポイントはどんなサーバー側手順の呼び出しであっても、ローカルで他のJavaScriptメソッドを実行するのと同じ感覚で呼び出せるという点です。例えば：

ExtRemote.DXStaff.create({firstName:’John’,lastName:’Smith’});

サーバー側メソッドを実行する手順の間に何があるのか、またバックエンドをどのように扱うかを考えなくても大丈夫です。それがデータベースからのデータセレクションだろうと、数学的な計算であろうと、これはただ呼び出すと返事をもらえるメソッド付きのオブジェクトになります。Ext.Directのもう一つの利点はフォームやストアとの密接な統合です。この場合はCRUDアクションのエンドポイントメソッドやフォームのload/submitメソッドを指定するだけです。

Sencha Touch 2.3ではExt.Directの仕様は完全に実装されていて、フォームへの対応とデータストアのCRUD機能性があります。Ext JSとSencha Touchには両方同じシンタックスが適用できます。広範なドキュメンテーションは次の例とバックエンドコネクター、またはSenchaドキュメンテーションで提供されています。

現在のサーバー側のスタック

さて、サーバー側を見てましょう。もしあなたの会社がPHPまたはJavaを実行していたら、Ext.Directを活用できるか悩むかもしれません。Ext.DirectにはPHPでの単純な実装があり、我々のユーザーコミュニティメンバーの対応によって、他にもたくさんの実装があります。例えばJava, Perl, Ruby, .NET, ColdFusion and Python。この増えていくリストにNode.jsのバックエンドも追加されました。

Ext.Direct ConnectorとNode.jsのバックエンド

もしバックエンドソリューションとしてNode.jsを利用して、Ext.Directの機能を試したい場合、Node.jsのExt.Direct Connectorが必要となります。ここのnpmレポジトリにあります。npm経由、またはgithubからソースコードを取得してダウンロードおよびインストールできます。

開発が立ち上がるために、ここに広範な例を生成しました。我々のフレームワークが対応する最も通常のシナリオとウィジェットを紹介しています。

Node.jsバックエンドを書き込むことに慣れてない開発者をより楽にするために、静的な内容を提供する完全機能Webサーバーを提供しました。データベースの選択に対して、MySQLとMongoDBの例、またはExt JS 4.2.xとSencha Touch 2.3.xのクライアントを提供しました。

バックエンドは次のような機能を提供しています：

APIの自動検出
柔軟なサーバーポート
ロギング
開発・プロダクション環境
Ext.Directルーターと静的ページの提供
ファイルアップロード
セッションサポート
ファイルアップロード
セッションサポート
CORSサポート
柔軟なレスポンスヘッダーと経過時間
httpとhttpsプロトコル

Node.jsのバックエンドをダウンロードした後、それを構成する必要があります。もしMySQLを利用したかったら、データベースのスキーマもインポートする必要があります（オプションなので、例だけに利用されます）。サーバースクリプトを変更する予定がないかぎり、全て必要なものは server-config.json と db-config.json. という二つのスクリプトから構成できます。構成されたら、ターミナルからこのコマンドを実行して下さい：

npm install extdirect

これは必要なモジュールと依存関係をインストールします。

他は自明となりますので、もっと細かくExt.Directの構成オプションをご覧になりましょう。

"ExtDirectConfig": {
   "namespace": "ExtRemote", // Direct namespace
   "apiName": "REMOTING_API", //Direct API name (both entries should match at client side)
   "apiPath": "/directapi", // URL endpoint where API will be served
   "classPath": "/direct", //location of your Ext.Direct classes
   "classPrefix": "DX", // For advanced cases,You may have multiple class instances in the same folder, this way you can separate and list prefixed classes only
   "server": "localhost", //RPC server domain
   "port": "3000", //RPC server port
   "protocol": "http", // [http|https] 
   "appendRequestResponseObjects": true //if true, every API call will receive full request and response objects as part of the argument list
}

この時点でサーバーが構成されたので、起動できます：このコマンドをターミナルから実行して下さい（Node.jsサーバーが既に設置されている前提です）

node server.js

デフォルトで、サーバーはポート3000経由で要求に返事するように構成されています。もしポート80（通常のhttp）からリクエストに応えるつもりならconfigファイル内でそれを変更し、スーパーユーザー権限でサーバーを動作させる必要があります。

sudo node server.js

同じサーバーからアプリケーションを提供するつもりなら、そのファイルを/publicフォルダに入れて下さい。 /publicfolder.

最も単純なHelloWorld APIのメソッドは次のようになります：

var DXHello = {
    wave: function(params, callback){
        callback({
            success:true,
            msg:'Hello world',
            params: params
        });
    }
};
 
module.exports = DXHello;

このメソッドは同じシンタックスを利用してExt JSとSencha Touchの両方から呼び出せます：

ExtRemote.DXHello.wave('Hi!',
    function(res){
        console.dir(res);
    }
);

関数の共通のシグネチャは次のようになります：

// method signature has 5 parameters
    /**
     *
     * @param params object with received parameters
     * @param callback callback function to call at the end of current method
     * @param sessionID - current session ID if "enableSessions" set to true, otherwise null
     * @param request only if "appendRequestResponseObjects" enabled
     * @param response only if "appendRequestResponseObjects" enabled
     */
    happyNewYear: function(params, callback, sessionID, request, response) {
 
    // Your code here
}

この例が役に立ったら嬉しいです。試してみてSenchaフォーラムにフィードバックして下さい。Happy coding!

Sencha Blog