Sencha Spaceのinvokeでアプリケーションを連携する

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

この記事は、US Sencha社ブログ Connecting Applications in Sencha Space with Invoke を翻訳したものです。

Sencha Space Invoke API Sencha Spaceはモバイルデバイス上のHTML5アプリケーションを管理し、デプロイし、保護する方法です。Spaceは7月にSenchaConで公開され、現在は開発者プレビューに入っています。Sencha Spaceを開発しながら、Webブラウザ、またはネイティブモバイルアプリケーションで既存のものを超えたいという思いがありました。Sencha Space内で動作しているそれぞれのHTML5アプリケーションが直接かつ安全に相互のアプリケーションと通信をとれる方法を求めていました。そうするために開発者がSencha Spaceで展開するすべてのアプリケーションに追加できる、簡単なJavaScript APIを開発しました。

次の動画は次の動きを示しています：1) フォトアプリケーションを呼び出せるアプリケーション、2) 最初のアプリケーションからのフォトアプリケーションの呼び出し、3) 外部から呼び出したフォトアプリケーションを利用した写真の選択、4) 最初に呼び出したアプリケーションへ選択された写真の返す。

space内でWebアプリケーションの動作方法を示すクイックビデオは、Invoke APIを使用して互いに通信することができる所をデモしています

フォアグラウンドとバックグラウンドでInvokeを利用する

アプリケーションがInvokeを利用して通信する方法は二つあります：フォアグラウンドとバックグラウンドです。

フォアグラウンドのInvokeコールはユーザーを一つのアプリケーションから別のアプリケーションに切り替えます。ユーザーが二つ目のアプリケーションで作業して、完了したらSencha Spaceがユーザーを最初のアプリケーションに戻します。簡単な例は写真です。Sencha Spaceではあなたの組織の写真のロケーションを全て知るアプリケーションが可能となります。他のアプリケーションが写真を必要とすると、ユーザーをPhotosアプリケーションにリダイレクトします。ユーザーが欲しい写真を選択して、起動したアプリケーションに返され、そのアプリケーションが選択された写真の一覧表を取得しています。

バックグラウンドInvokeコールはアプリケーション通信の新しい可能性を広げます。ユーザーが現在入っているアプリケーションから出なくても、二つのアプリケーションがバックグラウンドで非同期にデータの交換ができます。SenchaConで紹介した例では、我々のアドレス帳のアプリケーションがチャットのアプリケーションと通信し、現在の連絡先のオンライン・オフライン状態を取得して、連絡先のレコードをアップデートします。アドレス帳のアプリケーションはチャットライブラリを統合したり、チャット・プレゼンスサーバーとの接続を維持する必要がありませんでした。ただSencha Spaceで動作しているチャットアプリケーションに簡単なコールをするだけでした。

Sencha Space APIをインクルードする

可能な限り簡単にアプリケーションにSencha Space APIを追加したいと望んでいました。始めるためにダウンロードする必要はありません。単にCDNがホストするspace.jsのコピーをアプリケーションにインクルードします（Sencha Touchアプリケーションに限らず、どんなHTML5アプリケーションやWebサイトでも大丈夫です）。：

1	<script src="http://space.sencha.io/space.js"></script>

フォアグラウンドでInvoke Applicationを利用する方法

別のアプリケーションと通信するためには、はじめにそれと接続する必要があります：

1	Ext.space.Invoke.get('photos').then(send, failure);

もしPhotosアプリケーションが無い場合、またはアプリケーションがそのアプリケーションを呼び出すアクセス権限を持っていない場合は、failureコールバックが呼び出されます：

1
2
3

var failure = function(error) {
    console.log('Could not find photos app', error);
}

接続したら、アプリケーションからメッセージを送信することができます：

var send = function(connection) {
    connection.send({tags: ['keynote', 'space'], 
                     time: '1d'}, true).then(usePhoto, failure);
};

はじめのsendパラメータは、呼び出しているアプリケーションに送信したいJSONデータです。第二のパラメータはフォアグラウンド/バックグラウンドの論理値です。フォアグラウンドの値はtrueでバックグラウンドの値はfalseです。

ユーザーがPhotsアプリケーションにリダイレクトされて、写真の選択が可能となり、コールバックを介してアプリケーションに写真の一覧表をアプリケーションに返します：

1
2
3

var usePhoto = function(photos) {
    log('user selected photos', photos);
}

Photosアプリケーションの完全なソースコードを提供します。コードがどのように書かれているか確認できます。我々のサンプルのリポジトリをgithubでご覧ください：https://github.com/sencha/SpaceExamples/tree/master/Photos

バックグラウンドでInvoke Applicationを利用する方法

次の例で、ユーザーのプレゼンスを取得するためにバックグラウンドでチャットアプリケーションを呼び出します。APIコールは前の例とほぼ同じです。ただ今度はSend関数に第二パラメータとしてfalseを渡しています。

Ext.space.Invoke.get('chat').then(send, failure);
 
var send = function(connection) {
        connection.send(
            {type: 'presence', 
                 user: 'joe@sencha.com'}, false)
            .then(
        success,
        failure
    );
};
 
var success = function(message) {
    console.log(message);
};
 
//output
{user: "jason.cline@sencha.com", connected: true, status: 'away' }

別のアプリケーションから着信メッセージを処理する

onMessage APIで別のアプリケーションからのメッセージを処理します。onMessage関数がJSONメッセージを受け取ります。onMessage関数がExt.Promiseを生成して返す必要があります。呼び出しているアプリケーションにデータを返すために、そのPromiseは解決されないといけません。

Ext.space.Invoke.onMessage(function(senderId, message) {
 
    var promise = new Ext.Promise();
 
    handleMessage(message, promise);
 
    return promise;
 
});

handleMessageでは、ユーザー情報が非同期で取得され、プロミスを解決して返されます：

function handleMessage(message, promise) {
 
    if(message.type == "presence") {
 
        this.getUser(message.user, function(user){
            var response = {user: user.email, 
                            connected: user.isConnected, 
                            status: user.status};
 
            promise.fulfill(response);
 
        })
 
    } else {
         promise.reject('Message is not understood');
    }
 
}

Invoke APIの例をより多くご覧になりたい場合、我々のサンプルアプリケーションをご覧になって下さい： https://github.com/sencha/SpaceExamples

Invokeは新しいHTML5のアプリケーション作成方法を表しています。あなたのアプリケーションはサーバーへのラウンドトリップを介して接続されている島である必要はありません。Invokeを利用すると、シンプルなAPIを公開する一つの目的のアプリケーションを作成することができます。

追加情報

早くアクセスしたければ http://sencha.com/try-space へどうぞ。
For a detailed overview of Space, watch this webinar by Greg Rewis: Sencha Spaceの全体の詳細は、Greg Rewisによる次のwebinarをご覧ください。 http://vimeo.com/71997671

Sencha Blog