SenchaCon 2013年で、弊社のCEOマイケル・ムレイニーがMicrosoftとSenchaの開発者コミュニティを連携し、Sencha TouchのパワーとWindows Azureのクラウドサービスの機能性を組み合わせる、戦略的提携を発表しました。

今、我々は Sencha Touch に Windows Azure 拡張を導入して、Sencha Market から、あるいは次の様に Sencha Cmd からインストールすると使用できます：

sencha package get touch-azure

この記事では、Sencha Touch の Windows Azure拡張を紹介し、Sencha Touchのアプリケーションでの利用法について説明します。

Sencha Touch の Windows Azure拡張に関する詳しい情報と使い始めるための手順はAPIドキュメントとガイドをご覧ください。パッケージには、入門用のサンプルもいくつかそろっています！

Sencha Touch の Windows Azure拡張

Sencha Touch の Windows Azure 拡張を使うと、簡単にSencha Touchアプリケーションを Windows Azureモバイルやストレージサービスに連携できます。次のような項目をシームレスにサポートします：

• データとカスタムAPIの接続
• Microsoft, Google, Facebook, Twitter経由でユーザーを認証する
• iOS, Android, Windows Phoneのプッシュ通知の管理
• 高度な Table と Blob ストレージ

Sencha TouchとWindows Azureではクラウドに存在するモバイルアプリケーション開発はより簡単になりました！このビデオをご覧ください： Sencha で Windows Azure Mobile Services を使う

さあ始めましょう

Sencha TouchアプリケーションでSencha Touch の Windows Azure拡張パッケージを使うのは簡単です！ Sencha Touch の Windows Azure 拡張がパソコンにインストールしたあとの、最初の手順は必要なリソースとして、app.jsonにパッケージを追加することです：

1
2
3

requires : [
  'touch-azure'
]

次に、Ext.application() の requires 配列に Ext.azure.Azureを追加してます。

1
2
3

requires : [
  'Ext.azure.Azure'
]

Azureモバイルサービス

アプリケーションを Windows Azure のモバイルサービスアカウントに連携している場合は、最後の手順としてモバイルサービスの証明書で Ext.Azure を初期化します：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Ext.application({
  requires : [
      'Ext.azure.Azure'
  ],
 
  //...
 
  launch : function() {
      Ext.Azure.init({
          appKey : '...',
          appUrl : '...'
 
          //optional configs for authentication 
          //and push notifications
      });
  }
});

この時点で、Ext.azure.Proxy クラスを使って、モバイルサービスのデータに接続するように選択できます。通常通りプロキシをモデルやストアに付与します：

1
2
3
4
5
6
7
8

Ext.create(‘Ext.data.Store’, {
  //…
 
  proxy : {
      type : ‘azure’,
      tableName : ‘mytable’ //from your Azure account
  }
});

Azure データプロキシでは、ストアに url を定義する必要はありません – Ext.Azure は自動的にどこに接続して、データを読み込むかを知っています。Azure プロキシはページング/フィルタリングのパラメータとクロスドメインHTTPヘッダーを正確にフォーマットするため、Azure モバイルサービスのREST APIと通信するのはとても簡単です。

ユーザー認証をする必要があれば、Windows Azure を通して簡単に行えます。Ext.azure.Authentication クラス（とオプションで、Ext.azure.AuthOptions のビュー）はMicrosoft, Google, Facebook, Twitter経由で認証するために必要なoAuthリダイレクトをシームレスに管理します：

Ext.azure.Authentication.login(‘twitter’); //launched oAuth dialogue/redirect

最後に、Windows Azure のパワーを使って様々なモバイルデバイスでプッシュ通知を管理できます。CordovaでパッケージされたSencha Touchアプリケーションを使って、Ext.Azure のコンフィグに pushConfig オブジェクトを追加するだけです：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Ext.application({
  requires : [
      'Ext.azure.Azure'
  ],
 
  //...
 
  launch : function() {
      Ext.Azure.init({
          appKey : '...',
          appUrl : '...',
          pushConfig : {
              ios : true,
              android : ‘...’,
              windowsphone : ‘...’
          }
      });
  }
});

Ext.azure.Push シングルトンはプッシュ通知を受け取るように、あなたの端末を自動的に登録します。プッシュ通知を管理し、送信するためのロジックは Windows Azure のポータル（ユーザーガイドをご覧ください）に存在していますが、あなたのSencha Touchアプリケーションは単に “pushnotification” イベントをリッスンするだけです。そうするとユーザーに対し通知できます。

Azure ストレージサービス

アプリケーションをWindows Azure ストレージサービスアカウントに接続すると、必要に応じて単純にTableとBlobコンポーネントをアプリケーションコード内で生成できます：

1
2
3
4
5
6
7
8

var blobAccount = Ext.create('Ext.azure.storage.Blob', {
  accountName : '...',
  accessKey   : '...'
});
 
blobAccount.getBlob(
  //params here...
);

Sencha Architect を使う

Sencha Touch の Windows Azure拡張は Sencha Architect と完全に互換性があります。我々のインストールガイドに従う必要がありますが、Sencha Architect で Ext.Azure を利用するのはとても簡単です。

まずは、ツールボックスに Sencha Touch の Windows Azure拡張パッケージが使用可能な状態になっているかを確認して下さい：

次に、アプリケーションノードに “azure” という新しいプロパティを生成して下さい。オブジェクトで次のようになっているはずです：

1
2
3
4
5
6
7

azure : {
    appKey : '...',
    appUrl : '...'
 
    //other configs for authentication
    //and push notifications
}

最後の手順は Project Inspector に Ext.azure.Controller をドラッグすることです。このクラスはアプリケーションが起動する時点で Ext.Azure を初期化します：そして Ext.Azure ユーティリティを自由に使えるようになります。

クラウドへ！

我々はMicrosoftとの戦略的提携を楽しみにしています、Sencha Touch の Windows Azure拡張を是非お試し下さい。

Sencha Touch のパワーと Windows Azure のクラウドサービスの力を合わせて、素晴らしいアプリケーションを作成できるでしょう。フォーラムやコメントでそのアプリケーションのことを教えて下さい！