1. マルチデバイス環境における
バックエンドサービスの共通化と
クライアントアプリの実装
鈴木 章太郎
テクニカルエバンジェリスト
日本マイクロソフト株式会社
http://blogs.msdn.com/b/shosuz/

2. テクニカルエバンジェリスト
http://blogs.msdn.com/b/shosuz
MTC アーキテクト
http://www.microsoft.com/ja-jp/business/mtc/ads.aspx
呟きネタは主に、Windows、Windows Azure、
Windows Phone, RIA, HTML5, MVVM,
iOS/Android x Windows Azure 連携, Guitar … 等
ASPIC 執行役員 (‘04 ~)
Wipse モバイル x クラウド部会長（’11 ~)
2005-2012 早稲田大学大学院非常勤講師、
2008-2010 中央大学非常勤講師、
2013- 東京工業大学非常勤講師
Microsoft 軽音楽部広報担当（Guitar/Keyboard）

3. 



4. 




5. マルチデバイス活用の背景と
Devices + Services

6. Devices
Services

7. 仕事と
プライベート
の曖昧な境界
モバイル
デバイスの浸透
デジタル世代
技術的知識
の向上
マルチ
デバイス
求められる
スピード
7

8. デバイスの爆発的増加

9. デバイスの多様性

10. コンシューマの動向
Minutes on Web
Minutes on Apps
Dec 2010
Jun 2011
Source: Flurry, ComScore, Alexa
Datasource: 総務省 通信利用動向調査(世帯編) 平成23年度報告書
http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html
Dec 2011

11. IT 管理者および経営層が考える
タブレットの利用用途
最も多い利用用途
接客、営業支援のためのプレゼンテーション
今後、必要な仕様
①
②
③
④
業務に特化したアプリ(LOB)
通信回線
位置情報(GPS)
セキュリティ
OS への期待 (右グラフ)
20%
Windows 8
38%
Windows 7
12%
iPad
Android
TM
14%
OSは気にしない
16%
TM
出典: IDC 「 2013 年 国内法人タブレット市場 利用実態調査：Windows 8 タブレ ットを含めたビジネス機会と 2013 年～2017 年の予測」(2013年6月)

12. 



13. 13

14. JavaScript

15. Web ブラウザ
Windows 8
デバイスネイティブアプリ [*]
•
•
•
HTML/JavaScript
Android
•
Objective-C
•
iOS
HTML/JavaScript
C#/VB+XAML
C++ + XAML
Java
メリット
•
•
リーチの獲得
配置が容易
•
•
高い操作性
ハードウェア機能の利用
デメリット
•
操作性やハードウェア利用がブ
ラウザ機能に限定
ブラウザの互換性
•
•
アプリとOSとの対応
デバイスへのアプリの配置
•
[*] タブレットアプリとしての比較のため、Windows は WinRT Apps とする
[*] ネイティブアプリを構築するミドルウェアとして、Unity, PhoneGap, Titanium 等がある

16. リーチ獲得/容易な配置の Web アプリ
コンシューマ向けのネイティブアプリ
タブレット業務のためのネイティブアプリ
Web ブラウザ
Windows 8
iOS
Android
デバイスネイティブアプリ
•
•
•
HTML/JavaScript
HTML/JavaScript
C#/VB+XAML
C++ + XAML
•
Objective-C
•
Java

17. 17

18. ASP.NET Web API
Windows Azure
Mobile Services

19. ASP.NET Web API

20. ・スーパーマーケットのタイムセールを管理する Windows ストアアプリ
・バックエンドサービスは Windows サーバーでも Windows Azure でもほぼ同じコードで配置可能
バックエンドサービス作成
Web サイト
（Localhost）
Windows ストアアプリ
Get/Post/
Put/Delete
Internet Information
Server (IIS)
XAML / C#
JSON
Code
First
Windows ストアアプリの作成
Data Adapter の作成
Grid View 追加
XAML 編集による画面作成
アプリバー、CRUD 処理実装
共有コントラクト実装
Entity Framework
Grid View
バックエンドサービス作成
データモデル作成とデータベース生成
テストプロジェクトの作成とデータの作成
SQL Server
Express
文字・数値
データ

21. 

問題領域の概念的な
エンティティやリレーションの定義
マッピング (MSL)


両モデル間の対応付け
ストレージモデル (SSDL)




特定のデータソースに基づく
論理スキーマのモデル
Entity
SQL
概念モデルのエンティティと
オブジェクトとの間でマッピング
Entity Data Model
概念モデル (CSDL)
プログラム上の
オブジェクト

22. プレゼンテーション層



ドメイン層

データ層
RDB
public partial class Entry
{
public virtual int ID
{
get;
set;
}

23. 




Web サーバー
データソース
アプリ
サービス
Get/Post/
Put/Delete
ブラウザー
JSON/XML
ASP.NET
Web API
Entity
Framework



クライアント

24. Web ブラウザー及び
デスクトップアプリケーションからの
ASP.NET Web API の利用
DEMO

25. 





26.  リモートデータ
 WCF エンドポイント（SOAP / REST)
 従前どおり サービス参照の追加で可能
 OData（REST）
 WCF Data Services で公開（REST, XML/JSON 等ペイロード選択可能）
 ASP.NET Web API で公開（REST, JSON）
 Windows Azure Mobile Services（REST, JSON）
 ローカルデータ
 IsolatedStorage  Windows.Storage, FilePicker
 SQLite

27. 
XAML / C#


Get/Post/
Put/Delete
JSON
ASP.NET
Web API
var client = new HttpClient();
HttpClient
HttpResponseMessage response =
await client.GetAsync(“サービスのURI");
 await
var result =
await
response.Content.ReadAsStringAsync();
var pictures = JsonArray.Parse(result);
// JSONの結果をオブジェクトにバインド …


28. Windows 8.1ストアアプリからの
ASP.NET Web API の利用
DEMO

29. Windows Azure
Mobile Services

30. Windows Azure Mobile Services = MBaaS
Windows 8 SDK、Windows Phone 8 SDK、
iOS SDK、Android SDK, HTML5 SDK
ネイティブ SDK
Mobile Services
API
認証
データ
ロジック
Push
スケジューラ

31. Mobile Services の内実
 データアクセス、
プッシュ通知、
認証サポート
Windows 8、Windows Phone 8 SDK、
iOS SDK、Android SDK, HTML5 SDK
 強力なサーバーサイド
スクリプトのサポート
プッシュ通知、バリデーション、
プリプロセッシング、
ポストプロセッシング、
他の Web サービスとの連携

32. サーバースクリプトリファレンス
http://msdn.microsoft.com/en-us/library/windowsazure/jj554226.aspx

33. 様々な高度なクエリーが実行可能
posts : 読み取り (JavaScript)
function read(query, user, request) {
query.orderByDescending('id');
request.execute({ success:
function(results) {
if (results.length === 0) {
request.respond();
return;
}
var postIds = [];
results.forEach(function(p){
postIds.push(p.id);
});
var sql=
"SELECT posttags.postId, tags. id,
tags.name
FROM posttags,tags
WHERE posttags.postId IN
(";
sql += postIds.join(",");
sql += ")
AND posttags.tagId = tags.id";
console.log(sql);
……

34. 認証
 Microsoft Account、Twitter、
Facebook、Google ID 等
 各 CRUD 操作のテーブルレベルの
アクセス許可
iOS
http://www.windowsazure.com/jajp/develop/mobile/tutorials/get-started-withusers-ios/
Android
http://www.windowsazure.com/jajp/develop/mobile/tutorials/get-started-withusers-android/
・すべてのユーザー
・アプリケーション キーを持つユーザー
・認証されたユーザーのみ
・スクリプトと管理者のみ
 サーバー側スクリプトを使用した
よりきめ細かい制御
HTML5
http://www.windowsazure.com/jajp/develop/mobile/tutorials/get-started-withusers-html/

35. Live Connect ポータル
https://account.live.com/developers/applications/index
Windows ストアアプリポータル
http://msdn.microsoft.com/ja-JP/windows/apps

37. 1. チャネル URI を要求
2. クラウド サービスに
登録
3. 認証とプッシュ通知

38. Mobile Services in 中古楽器店ストアアプリ
http://blogs.msdn.com/b/shosuz/
サイド
ローディング
Windows ストアアプリ
・店舗管理者用 - 編集・登録
Windows
ストア
・一般ユーザー用 - 閲覧・購入・
プッシュ通知・メール (Mobile Services)
38
Entity
Framework
一般
ユーザー
ASP.NET Web API
REST
JSON
Windows Azure
Storage (BLOB)
画像
ドメイン
モデル
Code
First
Grid
テンプレート
Get/Post/
Put/Delete
Entity
Framework
店舗
管理者
WindowsWindows Azure
Azure
Web サイトWebsites
Windows Azure
SQL Database
文字
数値 Database
SQL
Windows Azure

40. Visual Studio 2013 による
Windows Azure Mobile Services
超高速開発
DEMO

41. 41

42. 42

43.  まとめ
NEED IMAGE HERE
(original keeps crashing ppt)
 クラウド時代のマルチデバイス対応の
業務アプリを展開するための
バックエンドサービスは簡単に作れる
 クライアントアプリとして ブラウザー
（PC、スマートフォン）及びWindows
8.1 ビジネスストアアプリ等、順次追加
可能

44. © 2013 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
このプレゼンテーションは、情報提供のみを目的としています。 Microsoft は、この概要について、明示または暗示を問わず、いかなる保証も行いません。