maf2013 enterprise windows 8 – architecture for rapid development of winrt apps

Microsoft Architect Forum 2013

Enterprise Windows 8 開発- 今やるWindows ストアLOB アプリ開発のための設計手法

鈴木章太郎テクニカルエバンジェリスト日本マイクロソフト株式会社

中田光昭シニアコンサルタント日本マイクロソフト株式会社


新しい時代の Microsoft の Vision -

Devices + Services

今までも、これからもひき続き「ひと」中心のコンピューティング実現のために


本日お持ち帰りいただきたいこと

Windows ストア LOB アプリに求められるもの

MVVM（Model-View-ViewModel）の考え方

社内外のデータソースの選択肢とその利用方法

Windows Azure 連携アプリ開発の方法

アジェンダ

Windows アプリの分類デスクトップアプリWindows ストアアプリWindows ストアアプリデスクトップアプリケーション


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

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

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

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

配布の方法

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

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


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

データベースとの接続

（特に SQL Server）

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

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

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

連携

WCF Data Services

SharePoint Server

2010/2013Office 365

ASP.NET Web API、

MobileServices


ストアアプリ 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 テンプレート


Windows ストア LOB アプリ適用シナリオ

文書画像添付ファイル

SharePoint Server 2010

ユーザー

文書画像添付ファイル

Office 365/Share Point 2013

11

Windows Azure

Websites

WindowsAzure BLOB

Windows AzureSQL

Database

Windows Azure

ユーザー


MVVM とはアーキテクチャーパターン

John Gossman（WPF チーム）により提唱

MVC パターンのバリエーション

Martin Fowler の “Presentation

Model pattern” に類似

XAML のデータバインディングとコマンディングを基礎に稼働

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

View

ViewModel

Model

UI、XAML

ロジック、状態

データソース


Adventure Works RI のご紹介

CodePlex に公開された MVVM

フレームワーク

Prism 4.5 の一部を利用

C# / XAML に特化

Windows ストア LOB アプリ開発のために最適化設定・検索チャーム

各フレームへの遷移

バリデーション

その他順次追加予定

http://prismwindowsruntime.codeplex.com/


Demo Windows Store Business Apps Guidance using Prism for Windows Runtimehttp://prismwindowsruntime.codeplex.com


MVVM のメリット関心の分離ができる

メンテナンスしやすくなる

Code 内を可視化しやすい

View 変更に影響受けない

テストしやすくなる

単体テスト、XAML 活用

C#/XAML フレームワーク

自体が MVVM をサポートデータバインディング/ INotifyPropertyChanged /データコンテキスト/Observable パターン

Data Model

View

XAML

分離コード

View Model

State +

Operations

Change Notification

Data-binding and commands


MVVM のデメリット標準モデルは存在しない

• Grid テンプレート自体、独自の “MVVM” モデルを持つ

シンプルな UI にはMVVM はオーバースペック

多くのコードが必要

INotifyPropertyChanged

Grid テンプレートの

BindableBase

Commands 等

Data Model

View

XAML

分離コード

View Model

State +

Operations

Change Notification

Data-binding and commands


Grid テンプレートにおける MVVM

データバインドで使用するデータクラスの基底クラス

BindableBase を継承したデータモデル

実際に表示するデータはここで定義される

データの定義、読み込み動作などのサンプルが記述されている

¥Common¥

BindableBase.cs INotifyPropertyChanged を実装

¥DataModel

SampleDataModel.cs バインディングで使用するデータモデルのサンプル


SharePoint Server 2010 連携シナリオ社内ニュース配信

各種社内ニュースを表示

カテゴリー別ニュースを表示

ニュース詳細を表示スタートスクリーンに最新ニュースを表示


アーキテクチャ概要 SharePointリスト、ドキュメントライブラリを利用してクライアントへニュースを配信

21

ニュース画像添付ファイル

SharePoint Server

管理者

アップロード

ニュース登録ツール

ユーザー

デスクトップアプリ

Web


Office 365/SharePoint 2013 連携シナリオ商品カタログ配信

各種社内ニュースを表示

カテゴリー別ニュースを表示

ニュース詳細を表示スタートスクリーンに最新ニュースを表示


アーキテクチャ概要

管理者

アップロード

ニュース登録ツール25

メタ情報画像

SharePoint Online

ユーザー

SharePointリスト、ドキュメントライブラリを利用してクライアントへ商品カタログを配信

デスクトップアプリ

Web


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

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

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

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


アーキテクチャー概要

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

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

29

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ストア


まとめ

Windows ストア LOB アプリに求められるもの

MVVM（Model-View-ViewModel）の考え方

社内外のデータソースの選択肢とその利用方法

Windows Azure 連携アプリ開発の方法

32


リソース Windows ストアアプリ開発用テンプレート

http://msdn.microsoft.com/ja-jp/jj556277.aspx

Windows アプリアートギャラリー

http://msdn.microsoft.com/ja-jp/hh544699

Adventure Works RI


SharePoint Online/Windows Azure 開発関連技術情報

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

ストア LOB アプリ/Windows Azure 開発関連技術情報

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

33

http://msdn.microsoft.com/ja-jp/jj556277.aspx

http://msdn.microsoft.com/ja-jp/hh544699


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

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

(株)デジタルアドバンテージ主催、日本マイクロソフト(株) 他エンジニアリング企業協賛

Not “How-to” . . . コンセプトは、ハイ・レベルで Hot なテーマをわかりやすく ! (アーキテクト向)

本日、コンテンツ公開開始 !6月8日(土) キックオフ・イベント実施予定

maf2013 enterprise windows 8 – architecture for rapid development of winrt apps

Technology