Vs2013 multi device shosuz

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

• 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）

• http://www.microsoft.com/ja-jp/business/mtc/ads.aspx

  

   

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

Devices Services

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

デバイスの爆発的増加

デバイスの多様性

コンシューマの動向 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

• http://www.soumu.go.jp/johotsusintokei/statistics/statistics05.html

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月)

  

13

JavaScript

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

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

17

ASP.NET Web API Windows Azure Mobile Services

ASP.NET Web API

・スーパーマーケットのタイムセールを管理する 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 文字・数値 データ

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

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

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

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

    

 リモートデータ  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

 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の結果をオブジェクトにバインド … 

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

Windows Azure Mobile Services

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

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

• 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 操作のテーブルレベルの アクセス許可 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/

• http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-users-ios/
• http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-users-android/
• http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-users-html/

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

• http://msdn.microsoft.com/ja-JP/windows/apps
• https://account.live.com/developers/applications/index

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

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 店舗 管理者 Azure WindowsWindows Azure Web サイトWebsites Windows Azure SQL Database 文字 数値 SQL Database Windows Azure

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

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

41

42

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

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