マルチデバイス環境におけるバックエンドサービスの共通化とクライアントアプリの実装

鈴木 章太郎

テクニカルエバンジェリスト

日本マイクロソフト株式会社

http://blogs.msdn.com/b/shosuz/

テクニカルエバンジェリスト

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）

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

Devices Services

7

仕事とプライベートの曖昧な境界

モバイルデバイスの浸透

技術的知識の向上

マルチデバイス

デジタル世代

求められるスピード

デバイスの爆発的増加

デバイスの多様性

Datasource: 総務省 通信利用動向調査(世帯編) 平成23年度報告書http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html

Dec 2010 Jun 2011

Source: Flurry, ComScore, Alexa

Minutes on Apps

Minutes on Web

Dec 2011

コンシューマの動向

IT 管理者および経営層が考えるタブレットの利用用途

最も多い利用用途接客、営業支援のためのプレゼンテーション

今後、必要な仕様① 業務に特化したアプリ(LOB)

② 通信回線

③ 位置情報(GPS)

④ セキュリティ

OS への期待 (右グラフ)

20%

12%

16%14%

38%Windows 8

Windows 7

iPad

Android

OSは気にしない

TMTM

出典: IDC 「 2013 年 国内法人タブレット市場 利用実態調査：Windows 8 タブレ ットを含めたビジネス機会と 2013 年～2017 年の予測」(2013年6月)

13

JavaScript

Web ブラウザ デバイスネイティブアプリ [*]

Windows 8 • HTML/JavaScript• C#/VB+XAML• C++ + XAML

iOS • Objective-C

Android • Java

メリット • リーチの獲得• 配置が容易

• 高い操作性• ハードウェア機能の利用

デメリット • 操作性やハードウェア利用がブラウザ機能に限定

• ブラウザの互換性

• アプリとOSとの対応• デバイスへのアプリの配置

HTML/JavaScript

[*] タブレットアプリとしての比較のため、Windows は WinRT Apps とする[*] ネイティブアプリを構築するミドルウェアとして、Unity, PhoneGap, Titanium 等がある

Web ブラウザ デバイスネイティブアプリ

Windows 8 • HTML/JavaScript• C#/VB+XAML• C++ + XAML

iOS • Objective-C

Android • Java

HTML/JavaScript

リーチ獲得/容易な配置の Web アプリ

コンシューマ向けのネイティブアプリ

タブレット業務のためのネイティブアプリ

17

ASP.NET Web API Windows Azure Mobile Services

ASP.NET Web API

Windows ストアアプリ Web サイト（Localhost）

Internet Information Server (IIS)

Entity Fram

ewo

rk

JSON

SQL ServerExpress

文字・数値データ

CodeFirst

Get/Post/Put/Delete

バックエンドサービス作成データモデル作成とデータベース生成

テストプロジェクトの作成とデータの作成

バックエンドサービス作成

XAML / C#

Grid View

Windows ストアアプリの作成Data Adapter の作成

Grid View 追加XAML 編集による画面作成

アプリバー、CRUD 処理実装共有コントラクト実装

・スーパーマーケットのタイムセールを管理する Windows ストアアプリ・バックエンドサービスは Windows サーバーでも Windows Azure でもほぼ同じコードで配置可能

Entity Data Model概念モデル (CSDL)

問題領域の概念的なエンティティやリレーションの定義

マッピング (MSL)両モデル間の対応付け

ストレージモデル (SSDL)特定のデータソースに基づく

論理スキーマのモデル

プログラム上のオブジェクト

Entity SQL

概念

モデ

ルの

エン

ティ

ティ

とオ

ブジ

ェク

トと

の間

でマ

ッピ

ング

プレゼンテーション層

ドメイン層

データ層

public partial class Entry

{public virtual int ID

{

get;

set;

}

RDB

クライアントアプリ

Web サーバー

ASP.NET Web API

Get/Post/Put/Delete

JSON/XML

データソース

ブラウザー

Entity

Fra

mew

ork

サービス

DEMO

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

リモートデータ

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

HttpClient

await

XAML / C# ASP.NET Web APIJSON

Get/Post/Put/Delete

var client = new HttpClient();

HttpResponseMessage response = await client.GetAsync(“サービスのURI");

var result = await

response.Content.ReadAsStringAsync();var pictures = JsonArray.Parse(result);// JSONの結果をオブジェクトにバインド …

DEMO

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

Windows Azure Mobile Services

認証

データ

ロジック

Push

スケジューラ

Mo

bile S

erv

ices

AP

I

Windows Azure Mobile Services = MBaaS

Windows 8 SDK、Windows Phone 8 SDK、iOS SDK、Android SDK, HTML5 SDK

ネイティブ SDK

Mobile Services の内実

データアクセス、プッシュ通知、認証サポート

Windows 8、Windows Phone 8 SDK、

iOS SDK、Android SDK, HTML5 SDK

強力なサーバーサイドスクリプトのサポート

プッシュ通知、バリデーション、

プリプロセッシング、

ポストプロセッシング、

他の Web サービスとの連携

サーバースクリプトリファレンス

http://msdn.microsoft.com/en-us/library/windowsazure/jj554226.aspx

様々な高度なクエリーが実行可能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);

……

認証

Microsoft Account、Twitter、Facebook、Google ID 等

各 CRUD 操作のテーブルレベルのアクセス許可

・すべてのユーザー

・アプリケーション キーを持つユーザー

・認証されたユーザーのみ

・スクリプトと管理者のみ

サーバー側スクリプトを使用したよりきめ細かい制御

http://www.windowsazure.com/ja-

jp/develop/mobile/tutorials/get-started-with-users-ios/

iOS

http://www.windowsazure.com/ja-

jp/develop/mobile/tutorials/get-started-with-users-android/

Androidhttp://www.windowsazure.com/ja-

jp/develop/mobile/tutorials/get-started-with-users-html/

HTML5

http://msdn.microsoft.com/ja-JP/windows/apps

https://account.live.com/developers/applications/index

Live Connect ポータル

Windows ストアアプリポータル

1. チャネル URI を要求

2. クラウド サービスに登録

3. 認証とプッシュ通知

Mobile Services in 中古楽器店ストアアプリ

Windows ストアアプリ・店舗管理者用 - 編集・登録

・一般ユーザー用 - 閲覧・購入・プッシュ通知・メール (Mobile Services)

38En

tity

Fra

mew

ork

SQL Database

Windows Azure Web サイト

Windows Azure

Windows Azure

Websites

Windows Azure

SQL DatabaseWindows Azure

Storage (BLOB)

画像文字数値

ASP.NET Web API

En

tity

Fra

mew

orkドメイン

モデル

店舗管理者

一般ユーザー

Gridテンプレート

Get/Post/

Put/Delete

JSONREST

Co

de

First

サイドローディング

Windowsストア

http://blogs.msdn.com/b/shosuz/

DEMO

Visual Studio 2013 による

Windows Azure Mobile Services 超高速開発

41

42

クラウド時代のマルチデバイス対応の業務アプリを展開するためのバックエンドサービスは簡単に作れる

クライアントアプリとして ブラウザー（PC、スマートフォン）及びWindows 8.1 ビジネスストアアプリ等、順次追加可能

まとめ

NEED IMAGE HERE(original keeps crashing ppt)

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