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

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 連携 アプリ開発の方法 Microsoft Architect Forum 2013

アジェンダ     

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

ストアアプリの企業導入に伴う課題 既存アプリケーション との住み分け 開発リソース確保、 技術研修 アプリケーション化 のターゲット 配布の方法 Microsoft Architect Forum 2013

百貨店の店舗用商品カタログのフロー例 XML-RPC マスター情報を検索 商品情報 を検索 REST 7:37 AM 画像 URLを 含む商品情 報を取得 画像 URL を検索 REST SharePoint Site se ar ch username http://sharepoint/url Site Actions Browse Page Parent > Parent > Current Page Page Title 画像情報を リクエスト 画像情報を 返す Current Page Page One Libraries Site Pages Shared Documents 画像 URL を取得 Drop Off Library Custom library Page Two This Site: site search マスター 情報を取得

• http://sharepoint/url

データソースとしての選択肢の選定 データベース との接続 （特に SQL Server） 社内の コンテンツ サーバー WCF Data Services SharePoint Server 2010/2013 Microsoft Architect Forum 2013 クラウド上の コンテンツ サーバー クラウドや 公開された サービスとの 連携 Office 365 ASP.NET Web API、 Mobile Services

ストアアプリ Grid テンプレートや MVVM (Model-View-ViewModel) の利用  階層型ページ遷移 Windows ストアアプリ で画面を活用 Grid テンプレート  ユーザーに適切な 情報を提供  画面に必要な コンテンツのみ 表示  MVVM の積極的 MVVM (Model-ViewViewModel）サンプル実装 採用 Contoso Travel My Trips Last minute deals Featured destinations Featured Destinations Top Destinations for 2012 City Guide Last Minute Deals My Trips Barcelona, Spain 7 night Alaska Cruise Featured destinations Barcelona, Spain Last Minute Deals 7 Night Alaska Cruise My Trips Chicago (3/11 – 3/19) Weather 7 days Attractions Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Microsoft Architect Forum 2013 Ocean View Cabins Suites 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 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 Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny

Windows ストア LOB アプリ適用シナリオ SharePoint Server 2010 文書 画像 添付ファイル Office 365/Share Point 2013 文書 画像 Windows Azure Websites Windows Azure BLOB 添付ファイル Windows Azure SQL Database ユーザー Windows Azure Microsoft Architect Forum 2013 11

MVVM とは  アーキテクチャーパターン  John Gossman（WPF チーム） により提唱  MVC パターンのバリエーション  Martin Fowler の “Presentation Model pattern” に類似  XAML のデータバインディング とコマンディングを基礎に稼働 デザイナー担当 View ViewModel Model Microsoft Architect Forum 2013 開発者が担当 UI、XAML ロジック、状態 データソース

Adventure Works RI のご紹介 http://prismwindowsruntime.codeplex.com/  CodePlex に公開された MVVM フレームワーク  Prism 4.5 の一部を利用  C# / XAML に特化  Windows ストア LOB アプリ開発 のために最適化     設定・検索チャーム 各フレームへの遷移 バリデーション その他順次追加予定 Microsoft Architect Forum 2013

• 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 をサポート  View XAML 分離コード Data-binding and commands View Model State + Operations Change Notification Data Model データバインディング/ INotifyPropertyChanged /データコンテキスト/Observable パターン Microsoft Architect Forum 2013

MVVM のデメリット  標準モデルは存在しない • Grid テンプレート自体、独自 の “MVVM” モデルを持つ  シンプルな UI には MVVM はオーバースペック  多くのコードが必要  INotifyPropertyChanged  Grid テンプレートの BindableBase  Commands 等 Microsoft Architect Forum 2013 View XAML 分離コード Data-binding and commands View Model State + Operations Change Notification Data Model

Grid テンプレートにおける MVVM ¥Common¥ BindableBase.cs INotifyPropertyChanged を実装  データバインドで使用するデータクラスの基底クラス ¥DataModel SampleDataModel.cs バインディングで使用するデータモデルの サンプル  BindableBase を継承したデータモデル  実際に表示するデータはここで定義される  データの定義、読み込み動作などのサンプルが記述されている Microsoft Architect Forum 2013

SharePoint Server 2010 連携シナリオ  社内ニュース配信 カテゴリー別ニュースを表 示 各種社内ニュースを表示 スタートスクリーンに 最新ニュースを表示 Microsoft Architect Forum 2013 ニュース詳細を表示

アーキテクチャ概要  SharePointリスト、ドキュメントライブラリを利用して クライアントへニュースを配信 アップロード SharePoint Server ニュース 管理者 画像 添付ファイル Web デスクトップ アプリ ユーザー ニュース登録ツール Microsoft Architect Forum 2013 21

Office 365/SharePoint 2013 連携シナリオ  商品カタログ配信 カテゴリー別ニュースを表 示 各種社内ニュースを表示 スタートスクリーンに 最新ニュースを表示 Microsoft Architect Forum 2013 ニュース詳細を表示

アーキテクチャ概要  SharePointリスト、ドキュメントライブラリを利用して クライアントへ商品カタログを配信 アップロード SharePoint Online メタ情報 管理者 画像 Web デスクトップ アプリ ユーザー ニュース登録ツール Microsoft Architect Forum 2013 25

Windows Azure 連携シナリオ  オンライン楽器ストアアプリ スタートスクリーン 全商品表示（Hub） 一覧・登録（Sections） 個別商品表示・編集（Details） 各商品を表示 Microsoft Architect Forum 2013 タイトルを編集 詳細情報編集、削除可能

アーキテクチャー概要 サイド ローディング Windows Azure Windows ストアアプリ ・店舗管理者用 - 編集・登録 REST JSON Windows ストア ・一般ユーザー用 - 閲覧・購入・ プッシュ通知（Mobile Services）・ メール（SendGrid) Microsoft Architect Forum 2013 ASP.NET Web API Entity Framework 一般 ユーザー Get/Post/ Put/Delete ドメイン モデル 29 Windows Azure Storage (BLOB) 画像 Windows Azure SQL Database 文字 数値 SQL Database Windows Azure Code First Grid テンプレート Entity Framework 店舗 管理者 Windows Azure Web サイトWebsites

まとめ     Windows ストア LOB アプリに求められるもの MVVM（Model-View-ViewModel）の考え方 社内外のデータソースの選択肢とその利用方法 Windows Azure 連携 アプリ開発の方法 Microsoft Architect Forum 2013 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/ Microsoft Architect Forum 2013 33

• http://msdn.microsoft.com/ja-jp/jj556277.aspx
• http://msdn.microsoft.com/ja-jp/hh544699
• http://prismwindowsruntime.codeplex.com/
• http://blogs.msdn.com/b/tsmatsuz/
• http://blogs.msdn.com/b/shosuz/

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