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 Page
Page 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/2013
Office 365
ASP.NET
Web API、
Mobile
Services

ストアアプリ 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 destinationsBarcelona,Spain
Last Minute Deals7 Night Alaska Cruise
Ocean View Cabins
Upgrade from an inside cabin and
save $43/night/person!
Picture windows with ocean and port
views
From $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 view
From $2,099 — only
$150/night/person do
My Trips Weather
7 days
Chicago (3/11 – 3/19)
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Today
54/43
Mostly Sunny
Attractions
My TripsFeatured Destinations
Top Destinations for 2012
Barcelona, Spain
My Trips City GuideCity Guide
Windows ストアアプリ
Grid テンプレート

Windows ストア LOB アプリ適用シナリオ
文書画像添付ファイル
SharePoint Server 2010
ユーザー
文書画像添付ファイル
Office 365/Share Point 2013
11
Windows
Azure
Websites
Windows
Azure
BLOB
Windows
Azure
SQL
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 Runtime
http://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
Entity
Framework
SQL Database
Windows Azure
Web サイト
Windows Azure
Windows Azure
Websites
Windows Azure
SQL Database
Windows Azure
Storage (BLOB)
画像
文字
数値
ASP.NET Web API
Entity
Framework
ドメイン
モデル
店舗
管理者
一般
ユーザー
Grid
テンプレート
Get/Post/
Put/Delete
JSON
REST
CodeFirst
サイド
ローディング
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
 http://prismwindowsruntime.codeplex.com/
 SharePoint Online/Windows Azure 開発関連技術情報
 http://blogs.msdn.com/b/tsmatsuz/
 ストア LOB アプリ/Windows Azure 開発関連技術情報
 http://blogs.msdn.com/b/shosuz/
33

(株)デジタルアドバンテージ主催、
日本マイクロソフト(株) 他エンジニアリング企業協賛
 Not “How-to” . . . コンセプトは、
ハイ・レベルで Hot なテーマをわかりやすく ! (アーキテクト向)
 本日、コンテンツ公開開始 !
6月8日(土) キックオフ・イベント実施予定

MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps

MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps

Similar to MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps (20)

More from Shotaro Suzuki

More from Shotaro Suzuki (20)

Recently uploaded

Recently uploaded (8)

MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps