テクニカルエバンジェリストhttp://blogs.msdn.com/b/shosuz

MTC アーキテクトhttp://www.microsoft.com/ja-jp/business/mtc/ads.aspx

呟きネタは主に、Windows Azure, Windows, RIA, HTML5, MVVM, iOS/Android x Windows Azure連携, Guitar … 等

ASPIC 執行役員 (‘05 ~),

Wipse モバイル x クラウド部会長（’11 ~)

東京工業大学大学院（’13～）,早稲田大学大学院（’05-12）,中央大学総合政策学部（’08-10）で非常勤講師

Microsoft 軽音楽部広報担当 (Gt./Key./DAW)

(‘12 ～)https://www.facebook.com/shosuz

Windows ストア LOB アプリ開発

ストアアプリの企業導入に伴う課題

既存アプリケーションとの住み分け

アプリケーション化のターゲット

開発リソース確保、技術研修

配布の方法

百貨店の店舗用商品カタログのフロー例

SharePoint Site

http://sharepoint/url

se

ar

ch

Browse PageSite Actions username

Parent > Parent > Current PagePage Title

This Site: site search

Libraries

Site Pages

Shared

Documents

Drop Off

Library

Custom

library

Current PagePage One Page Two

7:37 AM マスター情報を取得

商品情報を検索

マスター情報を検索

画像 URL

を検索

画像 URL

を取得

画像 URLを含む商品情報を取得

画像情報をリクエスト

画像情報を返す

XML-RPC

REST

REST

Microsoft Architect Forum 2013

データソースとしての選択肢の選定

データベースとの接続（特に SQL Server）

社内のコンテンツサーバー

クラウド上のコンテンツサーバー

クラウドや公開されたサービスとの

連携

WCF Data Services

SharePoint Server

2010/2013Office 365

ASP.NET Web API、

MobileServices

Microsoft Architect Forum 2013

ストアアプリ Grid テンプレートやMVVM (Model-View-ViewModel) の利用 階層型ページ遷移で画面を活用

ユーザーに適切な情報を提供

画面に必要なコンテンツのみ表示

MVVMの積極的採用

MVVM (Model-View-ViewModel）サンプル実装

Contoso Travel Featured destinations Last minute deals

7 night Alaska Cruise

Last Minute Deals

Featured destinations Barcelona, Spain

Last Minute Deals 7 Night Alaska Cruise

Ocean View Cabins

Upgrade from an inside cabin and

save $43/night/person!Picture windows with ocean and port viewsFrom $2,099 — only $150/night/person based on double

occupancy

Suites

Upgrade from an inside cabin and save $43/night/person!

Picture windows with ocean and port viewFrom $2,099 — only $150/night/person do

My Trips Weather7 days

Chicago (3/11 – 3/19)Today54/43 Mostly Sunny

Today

54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today

54/43 Mostly Sunny

Today54/43

Mostly Sunny

Attractions

My Trips Featured Destinations Top Destinations for 2012

Barcelona, Spain

My Trips City Guide City Guide

Windows ストアアプリGrid テンプレート

MVVM フレームワークのご紹介

•

•

• MVC

• Presentation Model pattern

• XAML

デザイナー担当 開発者が担当

View

ViewModel

Model

UI、XAML

ロジック、状態

データソース

Data Model

View

XAML

分離コード

View Model

State +

Operations

Change Notification

Data-binding and commands

独自の“MVVM” モデル

BindableBase

Data Model

View

XAML

分離コード

View Model

State +

Operations

Change Notification

Data-binding and commands

実装済みサンプルご紹介

- Adventure Works

Reference Implementation

http://prismwindowsruntime.codeplex.com/

Demo Windows Store Business Apps Guidance using Prism for Windows Runtime

http://prismwindowsruntime.codeplex.com

ビジネスアプリケーションとPrism - patterns & practices guidance for building Windows Store business apps -

// View フォルダを作りStartPage.xaml を追加

// その中に追加する

<TextBlock

Text="Hello World!!!"

Style="{StaticResource HeaderTextStyle}" />

// App.xaml.cs の using の部分より下を全部消した後、追加

// Microsoft.Practices.Prism.StoreApps ライブラリ参照設定

using Microsoft.Practices.Prism.StoreApps;

sealed partial class App : MvvmAppBase

{

public App()

{

this.InitializeComponent();

}

}

// App.xaml を下記のように囲む

<Infrastructure:MvvmAppBasexmlns:Infrastructure=

"using:Microsoft.Practices.Prism.StoreApps">

...

</Infrastructure:MvvmAppBase>

protected override void OnLaunchApplication

(LaunchActivatedEventArgs args)

{

NavigationService.Navigate("Start", null);

}

MVVM (Model-View-ViewModel）の基本的な実装- patterns & practices guidance for building Windows Store business apps -

// StartPageViewModel クラスに FirstName プロパティと背後のフィールドを追加

private string _firstName;

public string FirstName

{

get { return _firstName; }

set { _firstName = value; }

}

// Microsoft.Practices.Prism.StoreApps ライブラリのタイプを

StartPageViewModel クラスにインポート

// ViewModel Base クラスから StartPageViewModel クラスを作成

することにより、ViewModel Base クラスの

INotifyPropertyChanged の実装を利用することが可能

using Microsoft.Practices.Prism.StoreApps;

// Microsoft.Practices.Prism.StoreApps ライブラリを利用し、

FirstName プロパティを SetProperty メソッドを使うように変更

public string FirstName

{

get { return _firstName; }

set { SetProperty(ref _firstName, value); }

}

// ViewModelLocator.AutoWireViewModel attached property を

StartPage のための Page コントロールに追加する

<Page xmlns:Infrastructure=

"using:Microsoft.Practices.Prism.StoreApps"

Infrastructure:ViewModelLocator.AutoWireViewModel

="True"

... >

...

</Page>

// StartPageViewModel クラスを更新し、FirstName プロパティに

[RestorableState] アトリビュートを適用

[RestorableState]

public string FirstName

{

get { return _firstName; }

set { SetProperty(ref _firstName, value); }

}

Flyout Services クラスを使ったFlyout の作成・表示- patterns & practices guidance for building Windows Store business apps -

// SignInFlyout ページを作成

// その中の Grid 内に TextBlock 追加

<Grid Background="White">

<TextBlock Text="Sign In!"

Foreground="Black" />

</Grid>

// Microsoft.Practices.Prism.StoreApps ライブラリ

内で StandardFlyoutSize クラスを定義

// FlyoutView base クラスから SignInFlyout クラスを継承するよう

変更。また、コンストラクターの中で Width も決定

public sealed partial class SignInFlyout : FlyoutView

{

public SignInFlyout() : base(StandardFlyoutSize.Narrow)

{

this.InitializeComponent();

}

}

// SignInFlyout.xaml ファイルを更新し、SignInFlyout View が

Microsoft.Practices.Prism.StoreApps ライブラリにある

FlyoutView base class を拡張するように変更する

<Infrastructure:FlyoutView

xmlns:Infrastructure=

"using:Microsoft.Practices.Prism.StoreApps"

...

</Infrastructure:FlyoutView>

// StartPage が SignInFlyout を表示するように変更する

Microsoft.Practices.Prism.StoreApps 名前空間からの

インターフェースを StartPageViewModel クラスにインポートする

using Microsoft.Practices.Prism.StoreApps.Interfaces

// StartPageViewModel クラスにコンストラクタを追加し、

IFlyoutService タイプのパラメータを取るようにする

StartPageViewModel クラスにはデフォルトコンストラクタは存在しない

public StartPageViewModel(IFlyoutService flyoutService)

{

}

// ViewModelLocator をファクトリーに提供し StartPage のための

ViewModel インスタンスを作成

// App class 内にある OnInitialize メソッドをオーバーライドし

ViewModelLocator に StartPageViewModel インスタンス構成を教える

protected override void

OnInitialize(IActivatedEventArgs args)

{

ViewModelLocator.Register(typeof(StartPage).ToString(),

() => new StartPageViewModel(FlyoutService));

}

// StartPage 内の StackPanel に SignInFlyout を表示するボタンを追加

当該ボタンの Command property は StartPageViewModel クラス内の

SignInCommand にバインドされる

<StackPanel>

<TextBlock Text="Hello World!!!" />

<TextBox Text=

"{Binding FirstName, Mode=TwoWay}" />

<Button Content="ShowFlyout"

Command="{Binding SignInCommand}" />

</StackPanel>

// StartPageViewModel class に System.Windows.Input 名前空間をインポート

using System.Windows.Input;

// SignInCommand プロパティを StartPageViewModel クラスに追加

Public Icommand SignInCommand { get; private set; }

// 当該プロパティは private setter を持つ（内部的にのみセット可能故)

// SignInCommand プロパティを DelegateCommand インスタンスに設定しFlyoutServiceを呼び出す

public StartPageViewModel(IFlyoutService flyoutService)

{

SignInCommand = new DelegateCommand(() =>

flyoutService.ShowFlyout("SignIn"));

}

// 設定ペインに SignInFlyout を表示するアイテムを追加する

// アプリを停止し、App class の中の GetSettingsCharmActionItems メソッドをオーバーライド

// このメソッドは SettingsPane class の CommandsRequested イベント が発生したとき呼ばれる

// SignInFlyout を開くための設定ペインに SettingsCharmActionItem を追加する

Protected override Ilist<SettingsCharmActionItem> GetSettingsCharmActionItems()

{

return new List<SettingsCharmActionItem>{ new

SettingsCharmActionItem("Sign In",

() => FlyoutService.ShowFlyout("SignIn"))};

}

Dependency Injection コンテナの統合- patterns & practices guidance for building Windows Store business apps -

// Dependency Injection Container ライブラリへの参照を追加

※ Unity v3 container via NuGet(http://www.nuget.org/packages/Unity/).

// App class に当該コンテナを保持するプライベートメンバー変数追加

private UnityContainer _container =

new UnityContainer();

// App class 内の Resolve メソッドをオーバーライドして

当該コンテナが一つのタイプからオブジェクトインスタンスを

生成できるようにする

protected override object Resolve(Type type)

{

return _container.Resolve(type);

}

// MvvmAppBase により提供される3つのサービスを登録するコード

protected override void OnInitialize

(IActivatedEventArgs args)

{

_container.RegisterInstance(NavigationService);

_container.RegisterInstance(FlyoutService);

_container.RegisterInstance(SessionStateService);

}

ユーザー入力のバリデーション- patterns & practices guidance for building Windows Store business apps -

HighlightFormFieldOnErrors.PropertyErrors

private string _username;

private string _password;

public string Username

{

get { return _username; }

set { SetProperty(ref _username, value); }

}

public string Password

{

get { return _password; }

set { SetProperty(ref _password, value); }

}

// 各プロパティに “Required”・“StringLength” DataAnnotations

attributes を追加

[Required]

[StringLength(10)]

public string Username

{

get { return _username; }

set { SetProperty(ref _username, value); }

}

[Required]

[StringLength(20)]

public string Password ・・・

// Model クラスができたのでそれを SignInFlyoutViewModel 上で公開

// ViewModels フォルダに SignInFlyoutViewModel 追加

// SignInFlyoutViewModel に当該 Credential Model を公開する

プロパティを追加

public class SignInFlyoutViewModel

{

public SignInFlyoutViewModel()

{

UserCredential = new Credential();

}

public Credential UserCredential { get; set; }

}

// SignInFlyout ページ とこのページ (view) とを

SignInFlyoutViewModel にバインド

ViewModelLocator.AutoWireViewModel=”True”

// いくつか Controls を View に追加して、当該 ViewModel の

Credential Username プロパティと Password プロパティ値を格納

//何らかの Validation error messagesとバインドされた TextBlock群

<TextBox Text=

"{Binding UserCredential.Username, Mode=TwoWay}"

BorderBrush="Black" />

<TextBlock Text="{Binding UserCredential.Errors[Username],

Converter={StaticResource

FirstErrorConverter}}" Foreground="Red" />

<TextBox Text="{Binding UserCredential.Password,

Mode=TwoWay}" BorderBrush="Black" />

<TextBlock Text="{Binding UserCredential.Errors[Password],

Converter={StaticResource

FirstErrorConverter}}" Foreground="Red"/>

// FirstErrorConverter のソース

public sealed class FirstErrorConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, string language)

{

ICollection<string> errors = value as ICollection<string>;

return errors != null && errors.Count > 0 ?

errors.ElementAt(0):null;

}

public object ConvertBack(object value, Type targetType,

object parameter, string language)

{

throw new NotImplementedException();

}

}

// この値コンバータを Static resource として使うには、

App.xaml の中で参照設定する

<ResourceDictionary>

...

<converters:FirstErrorConverter

x:Key="FirstErrorConverter" />

</ResourceDictionary>

// Model プロジェクトの全てのプロパティをバリデートする

UserCredential.ValidateProperties()

public SignInFlyoutViewModel()

{

UserCredential = new Credential();

ValidateAll =

new DelegateCommand(() => UserCredential.ValidateProperties());

}

public Credential UserCredential { get; set; }

public ICommand ValidateAll { get; set; }

15.Add a button to the view that binds to the ValidateAll

// View にボタンを追加して ValidateAll command にバインド

<Button Command="{Binding ValidateAll}"

Content="Validate All"

Foreground="Black"/>

public class MyViewModel : ViewModel, INavigationAware{

private string _name;

[RestorableState]public string Name{

get { return _name; }set { SetProperty(ref _name, value); }

}}

Model の追加（1）Entity Framework + Code First によるデータモデル構築

Entity Data Model概念モデル (CSDL)問題領域の概念的な

エンティティやリレーションの定義

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

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

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

Entity SQL

概念モデルのエンティティと

オブジェクトとの間でマッピング

プレゼンテーション層

ドメイン層

データ層

public partial class Entry

{public virtual int ID

{

get;

set;

}

RDB

Model の追加（2）ASP.NET MVC4 Web API によるサービスの公開と利用

•

クライアントアプリ

Web サーバー

ASP.NET

Web

API

Get/Post/Put/Delete

JSON/XML

データソース

ブラウザー

En

tity

Fram

ew

ork

サービス

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

Windows Azure 連携シナリオ• オンライン楽器ストアアプリ

各商品を表示 タイトルを編集 詳細情報編集、削除可能

スタートスクリーン 全商品表示（Hub） 一覧・登録（Sections）

個別商品表示・編集（Details）

アーキテクチャー概要

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

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

69

En

tity

Fra

mew

ork

SQL Database

Windows Azure Webサイト

Windows Azure

Windows AzureWebsites

Windows Azure SQL Database

Windows Azure Storage (BLOB)

画像文字数値

ASP.NET Web API

Entity

Framew

orkドメイン

モデル

店舗管理者

一般ユーザー

Gridテンプレート

Get/Post/

Put/Delete

JSONREST

Code F

irstサイド

ローディング

Windowsストア

Demo Musical Instruments Storeutilizing Adventure Works RIworking with Windows Azureas Model

http://aka.ms/VS2012-Case

http://aka.ms/VS2012-Sol

http://aka.ms/VS2012-Prod

http://aka.ms/VS2012-Try

http://aka.ms/VS2012-Lic

http://prismwindowsruntime.codeplex.com

.exe

.zip