Microsoft Architect Forum 2013
Enterprise Windows 8 開発- 今やるWindows ストアLOB アプリ開発のための設計手法
鈴木章太郎テクニカルエバンジェリスト日本マイクロソフト株式会社
中田光昭シニアコンサルタント日本マイクロソフト株式会社
Microsoft Architect Forum 2013
新しい時代の Microsoft の Vision -
Devices + Services
今までも、これからもひき続き「ひと」中心のコンピューティング実現のために
Microsoft Architect Forum 2013
本日お持ち帰りいただきたいこと
Windows ストア LOB アプリに求められるもの
MVVM(Model-View-ViewModel)の考え方
社内外のデータソースの選択肢とその利用方法
Windows Azure 連携アプリ開発の方法
アジェンダ
Windows アプリの分類デスクトップアプリWindows ストアアプリWindows ストアアプリ デスクトップアプリケーション
Microsoft Architect Forum 2013
ストアアプリの企業導入に伴う課題
既存アプリケーションとの住み分け
アプリケーション化のターゲット
開発リソース確保、技術研修
配布の方法
百貨店の店舗用商品カタログのフロー例
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 テンプレート
Microsoft Architect Forum 2013
Windows ストア LOB アプリ適用シナリオ
文書 画像 添付ファイル
SharePoint Server 2010
ユーザー
文書 画像 添付ファイル
Office 365/Share Point 2013
11
Windows Azure
Websites
WindowsAzure BLOB
Windows AzureSQL
Database
Windows Azure
ユーザー
Microsoft Architect Forum 2013
MVVM とは アーキテクチャーパターン
John Gossman(WPF チーム)により提唱
MVC パターンのバリエーション
Martin Fowler の “Presentation
Model pattern” に類似
XAML のデータバインディングとコマンディングを基礎に稼働
デザイナー担当 開発者が担当
View
ViewModel
Model
UI、XAML
ロジック、状態
データソース
Microsoft Architect Forum 2013
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
Microsoft Architect Forum 2013
MVVM のメリット 関心の分離ができる
メンテナンスしやすくなる
Code 内を可視化しやすい
View 変更に影響受けない
テストしやすくなる
単体テスト、XAML 活用
C#/XAML フレームワーク
自体が MVVM をサポート データバインディング/ INotifyPropertyChanged /データコンテキスト/Observable パターン
Data Model
View
XAML
分離コード
View Model
State +
Operations
Change Notification
Data-binding and commands
Microsoft Architect Forum 2013
MVVM のデメリット 標準モデルは存在しない
• Grid テンプレート自体、独自の “MVVM” モデルを持つ
シンプルな UI にはMVVM はオーバースペック
多くのコードが必要
INotifyPropertyChanged
Grid テンプレートの
BindableBase
Commands 等
Data Model
View
XAML
分離コード
View Model
State +
Operations
Change Notification
Data-binding and commands
Microsoft Architect Forum 2013
Grid テンプレートにおける MVVM
データバインドで使用するデータクラスの基底クラス
BindableBase を継承したデータモデル
実際に表示するデータはここで定義される
データの定義、読み込み動作などのサンプルが記述されている
¥Common¥
BindableBase.cs INotifyPropertyChanged を実装
¥DataModel
SampleDataModel.cs バインディングで使用するデータモデルのサンプル
Microsoft Architect Forum 2013
SharePoint Server 2010 連携シナリオ 社内ニュース配信
各種社内ニュースを表示
カテゴリー別ニュースを表示
ニュース詳細を表示スタートスクリーンに最新ニュースを表示
Microsoft Architect Forum 2013
アーキテクチャ概要 SharePointリスト、ドキュメントライブラリを利用してクライアントへニュースを配信
21
ニュース 画像 添付ファイル
SharePoint Server
管理者
アップロード
ニュース登録ツール
ユーザー
デスクトップアプリ
Web
Microsoft Architect Forum 2013
Office 365/SharePoint 2013 連携シナリオ 商品カタログ配信
各種社内ニュースを表示
カテゴリー別ニュースを表示
ニュース詳細を表示スタートスクリーンに最新ニュースを表示
Microsoft Architect Forum 2013
アーキテクチャ概要
管理者
アップロード
ニュース登録ツール25
メタ情報 画像
SharePoint Online
ユーザー
SharePointリスト、ドキュメントライブラリを利用してクライアントへ商品カタログを配信
デスクトップアプリ
Web
Microsoft Architect Forum 2013
Windows Azure 連携シナリオ オンライン楽器ストアアプリ
各商品を表示 タイトルを編集 詳細情報編集、削除可能
スタートスクリーン 全商品表示(Hub) 一覧・登録(Sections)
個別商品表示・編集(Details)
Microsoft Architect Forum 2013
アーキテクチャー概要
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ストア
Microsoft Architect Forum 2013
まとめ
Windows ストア LOB アプリに求められるもの
MVVM(Model-View-ViewModel)の考え方
社内外のデータソースの選択肢とその利用方法
Windows Azure 連携アプリ開発の方法
32
Microsoft Architect Forum 2013
リソース 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日(土) キックオフ・イベント実施予定
Top Related