1. クラウドを利用した
Windows ストアアプリ開発
～ Windows Azure と連携する
日本マイクロソフト株式会社
デベロッパー＆プラットフォーム統括本部
クライアントテクノロジー推進部
エバンジェリスト 大西 彰 (@oniak3)
aonishi@microsoft.com
～
http://aka.ms/wsazuredev

2. Agenda
デバイスとサービスを組み合わせる
Windows Azure を知る
シナリオ別の実装方法を知る

3. デバイスとサービスを組み合わせる

5. インターネット、
グローバル利用の
視点で考える

6. マイクロソフトが提供しているサービス
マイクロソフトが提供しているサービス
2.5 億
アカウント
200+
サービス
24 時間 / 7 日稼働
約
3億
300 PByte
接続ユーザー
Bing データ
4億
55 億
Email アカウント
サーチ数 / 月
4,800 万
サブスクライバー
約
5,000 万
Office Web Apps
ユーザー

7. そもそも、サーバーって？
クライアント
サーバー型の考え方
クライアントからの要求に対して、
何らかのサービスを提供する側のアプリ

8. クライアント・サーバー型の構成

9. 非同期通信の世界
時刻 t0
時刻 t1
リクエスト
レスポンス
処理時間

10. クライアントとサーバーのデータ交換
時刻 t0
時刻 t1
リクエスト
レスポンス
文字列
文字列
JSON や XML
処理時間

11. サービスにつながらない状況

12. ちょっと前までとは違った視点で開発
デバイス＆サービス
これからの考え方
・常時接続とは限らない
モバイルにおけるタブレット利用
・直接データベースに接続しない
サービスアプリを経由して通信
・文字列でデータ交換
XML
：型を明確にする
JSON ：型を緩やかにする

13. Windows Azure を知る

15. Windows Azure

16. 開発言語
アプリケーション
キャッシュ
Web
サイト
クラウド
サービス
ID
仮想
マシン
サービスバス
モバイル
サービス
コンピューティング
世界規模のクラウド基盤
サーバー/ ネットワーク/ データセンター
高度な自動化
柔軟性
統合リソース管理
従量課金
北米4カ所、ヨーロッパ2カ所、アジア2カ所、日本2カ所
豪州2カ所 + CDN 24 カ所
SQL
メディア
データベース
CDN
ビックデータ
バックアップ
テーブル
データ管理
HPC
BLOB
データ分析
仮想
ネットワーク
統合
トラフィック
マネージャー
ネットワーク

17. シナリオ別の実装方法を知る

18. 代表的なシナリオ
シナリオ
ストアアプリ側
クラウド側
Web ページの表示
WebView
Web サイト
RSS / ATOM フィード
SyndicationClient
Web サイト上のブログ
画像、音楽、ビデオ
Image, MediaElement
Azure ストレージ
軽量なデータアクセス
MobileServiceClient
モバイルサービス
軽量なデバイスへの通知
MobileServiceClient
モバイルサービス
REST サービスの呼出
HttpClient
サービス参照
クラウドサービス
WCF サービスの呼出
クラウドサービス

19. Web ページの表示
<WebView x:Name="myWebView" />
myWebView.Navigate(new Uri("http://8store.azurewebsites.net"));
Navigate
LoadCompleted

20. RSS / ATOM フィード
async void LoadFeed()
{
var client = new SyndicationClient();
var uri = new Uri("http://8store.azurewebsites.net/?feed=rss2");
var feed = await client.RetrieveFeedAsync(uri);
}
await client.RetrieveFeedAsync
SyndicationFeed feed

21. 画像
<Image Source=
"https://mediasvc5wm2h8jg564k6.blob.core.windows.net/demo/onia3beer.jpg" />
Source
画像の読み込みは
非同期

22. 画像のダウンロード
GetBufferAsync
async void DownloadImage()
{
var client = new HttpClient();
var uri = new
Uri("https://mediasvc5wm2h8jg564k6.blob.core.windows.net/demo/onia3beer.jpg");
var stream = await client.GetBufferAsync(uri);
var destination = Path.GetFileName(uri.LocalPath);
StorageFile file =
await KnownFolders.PicturesLibrary.CreateFileAsync(
destination, CreationCollisionOption.GenerateUniqueName);
await FileIO.WriteBufferAsync(file, stream);
}

23. 音楽・ビデオの再生
<MediaElement x:Name="myME" AreTransportControlsEnabled="True"
Width="640" Height="400"
Source="https://mediasvc5wm2h8jg564k6.blob.core.windows.net/demo/Win
dows81intro.mp4"/>
Source

24. 軽量なデータアクセス
MbClient はモバイルサービスのクライアント
public class TodoItem
{
public int Id { get; set; }
GetTable<TodoItem>()
public string Text { get; set; }
public bool Complete { get; set; } .InsertAsync
}
async void SaveData()
{
var newItem = new TodoItem {
Text = string.Format("{0} > Developer Camp デモ",
System.DateTime.Now.ToString("hh:mm:ss")) };
await App.MbClient.GetTable<TodoItem>().InsertAsync(newItem);
}

25. 軽量なデバイスへの通知
Node.js サーバー側
クライアント側

26. REST サービスの呼び出し
async Task<string> GetFromWebAPI()
{
var client = new HttpClient();
var uri = new Uri("http://aka.ms/boyacatalog2");
return await client.GetStringAsync(uri);
}
GetStringAsync
string

27. WCF サービスの呼び出し
async Task<string> PostMyMessage(string message)
{
ServiceReference1.MyServiceClient client =
new ServiceReference1.MyServiceClient();
var echo = await client.EchoAsync(message);
return echo;
}
EchoAsync
string

28. デバイス＆サービス 考え方の一例

30. デバイス上でサービスのマッシュアップ
読み
通信
書き
<Windows Azure Web サイト>
商品サービス
ASP.NET Web API
<Windows Azure Web サイト>
注文モニタ
ASP.NET SignalR
<Windows Azure モバイルサービス>
注文サービス
TodoItemテーブル

31. デバイス＆サービス、これからの開発
マルチ デバイス
クラウド
社内システム
オーダー
リアルタイム/
バッチ連携
オーダー
オーダー
構築アプリ
活用サービス
開発ツール
デバイス アプリ
バックエンドサービス
基幹システム
Windowsストア、
Xamarin
Windows Azure
モバイルサービス など
パッケージ
Visual Studio
（共通プラットフォーム／共通スキルで開発）

32. クラウドを利用した
Windows ストアアプリ
・非同期呼び出し
・仕事用も遊び用も
・グローバルリーチ