windows 8.1 におけるストア ビジネスアプリの設計と開発

鈴木 章太郎テクニカルエバンジェリスト日本マイクロソフト株式会社http://blogs.msdn.com/b/shosuz/

Windows 8.1 におけるストア ビジネスアプリの設計と開発

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

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

・呟きネタは主に、 Windows 8 、 Windows Azure 、 Windows Phone, RIA, HTML5, MVVM, iOS/Android x Windows Azure 連携 , Guitar … 等・ ASPIC 執行役員、情報社会学会運営委員（ 2005- ）・早稲田大学大学院（ 2005-2012 ）非常勤講師、 　中央大学（ 2008-2010 ）非常勤講師、　　東京工業大学大学院（ 2013- ）非常勤講師・ Microsoft 軽音楽部広報担当（ Guitar/Keyboard ）

Windows ストア ビジネスアプリ を

Prism for Windows Runtime を用いて

　　　　　　　　で開発する方法を

ご理解いただくこと

本セッションの目的このセッションの目的

• Windows ストア ビジネスアプリの設計・開発に必要な要素• Model-View-ViewModel (MVVM) パターンの利用• ページ間のナビゲーション• アプリケーション データの管理• 中断、再開、アクティブ化の処理• 疎結合コンポーネント間の通信• ユーザー入力の検証• まとめ

Agenda

Windows ストアビジネスアプリの設計・開発に必要な要素

Windows ストア ビジネスアプリとは• ストア “ LOB “ アプリ

• 高品質、適切なアーキテクチャー、メンテナンスしやすい、テストがしやすい

• コンシューマーアプリとの違い • バリデーションが必要、サスペンド時等にも状態データが消えない

• チーム開発が普通• 疎結合のアーキテクチャー• メンテナンスしやすくテストしやすいコードベース

• Prism• 品質とメンテナンス性を高める Proven なガイダンスとライブラリ• 加えて、ビジネスストアアプリを簡単に作成できるようにする

Windows ストア ビジネス アプリ開発者のタスク• ガイダンスの概要とチェックリスト• Windows ランタイム向け Prism

の使用① 　 Model-View-ViewModel (MVVM) 　　　　　パターンの利用② 　ページ間のナビゲーション③ 　ユーザー入力の検証④ 　アプリケーション データの管理⑤ 　中断、再開、アクティブ化の処理⑥ 　疎結合コンポーネント間の通信

• ユーザー エクスペリエンスの 設計

• ページの作成• タッチの使用• アプリケーション データの管理• タイルの操作• 検索の実装• パフォーマンスの向上• アプリのテストと展開

http://msdn.microsoft.com/ja-jp/library/windows/apps/dn535962.aspx

Adventure Works Reference Implementation

• Prism for Windows Runtime 　のサンプルアプリ• C# / XAML に特化• ストア ビジネスアプリ　開発のために最適化• Windows 8.1 対応と更新

http://code.msdn.microsoft.com/windowsapps/Prism-for-the-Windows-86b8fb72/

Adventure Works Reference Implementation•論理アーキテクチャ図提供•AutoRotatingGridView Grid コントロールを作成•IncrementalUpdateBehavior Blend ビヘイビアの使用 •ポップアップに替え、 Flyout/MenuFlyout を使用•FlyoutViews を SettingsFlyout を使うように変更•Watermark に標準のコントロールを使用 •Blend ビヘイビアを多用•SearchBox 及び 新しいサーチ API を使用 •更新された Top アプリバー /Bottom アプリバーを使用し CommandBars と Action Button を配置•System.Net.Http.HttpClient → Windows.Web.Http.HttpClient に変更Prism for Windows Runtime•VisualStateAwarePage → ページサイズと縦横の向きに反応するよう更新 •FlyoutService と FlyoutView → 削除 •SearchPaneService と SearchQueryArguments → 新しい SearchBox コントロールを使用

Windows 8.1 version で更新された点

MVVM (Model-View-ViewModel ） 　パターンの利用

MVVM とは• アーキテクチャーパターン• John Gossman （ WPF チー

ム）により提唱• MVC パターンの亜種• Martin Fowler の

“ Presentation Model pattern” に類似

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

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

View

ViewModel

Model

UI 、 XAML

ロジック、状態

データソース

MVVM のメリット• 関心の分離ができる• メンテナンスしやすくなる

• Code 内を可視化しやすい• View 変更に影響受けない

• テストしやすくなる• 単体テスト、 XAML 活用

• C#/XAML フレームワーク　自体が MVVM をサポート

• データバインディング• INotifyPropertyChanged• データコンテキスト• Observable パターン

Data Model

View

XAML

分離コード

View ModelState +

Operations

Change Notification

Data-binding and commands

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

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

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

• 多くのコードが必要• INotifyPropertyChanged

• Grid テンプレートの BindableBase

• Commands 等

Data Model

View

XAML

分離コード

View Model

State + Operatio

ns

Change Notification

Data-binding and commands

MVVM 実装はハードルが高いのか？• 「普通の開発者にはハードルが高い」「参入障壁が高い」？• しかし、実際には Prism の利用は難しくない• そこで、シンプルなアプリを Prism で実装する• よりシンプルに明確に作れるはず

Demo

Prism for Windows Runtime を使った　シンプルなアプリの開発

Grid Template を Prism 対応 MVVM に• さらに、 Grid Template を Prism for Windows Runtime で再構

築• こちらもよりシンプルに明確に作れるはず• 更に応用が利くようになる

Demo

Prism for Windows Runtime を使った　Grid Template の改造

ページ間のナビゲーションhttp://msdn.microsoft.com/ja-jp/library/windows/apps/xx130640.aspx

ページ間のナビゲーション

• MVVM パターンを使い、ページ（ View ）を作成• XAML データバインディングを用いて、各ページを

ViewModel 　　オブジェクトにリンク• 横向き、縦向き、最小限のレイアウトに合わせページを設計、

Microsoft.Practices.Prism.StoreApps - VisualStateAwarePage 　　クラスでビューを管理

• クラスがナビゲーション操作に参加できるように利用Microsoft.Practices.Prism.StoreApps – INavigationAware インターフェイスクラスがナビゲーションをサポートできるように利用Microsoft.Practices.Prism.StoreApps - FrameNavigationService クラス

ページ間のナビゲーション

Demo

ページ間のナビゲーション

アプリケーション データの管理http://msdn.microsoft.com/ja-jp/library/windows/apps/xx130650.aspx

• アプリケーション データ API を使いアプリケーション データを操作し、データの物理的記憶域が、システムによって管理されるようにする

• ユーザーがアプリに正常にサインインし、パスワードの保存を選んだ場合にのみ、パスワードを資格情報保管ボックスに格納する

• ASP.NET Web API を使って、さまざまな種類のコンテンツを　渡すことができる、リソース指向の Web サービスを作る

アプリケーション データの管理

ストア ビジネスアプリのデータアクセスクラウドを経由

オンプレミスに直接

Sockets• Datagram• MessageWeb• TCP stream• StreamWeb

HTTP• HttpClient/

HttpReponseMessage• WinJS.XHR• XmlHttpRequest

Atom Pub/Syndication

• File• SQLite• IndexedDB• SQL Server• Dynamics• SharePoint Server• その他

a

Data Services• ASMX• WCF, WCF Data Services• OData• ASP.NET Web API

• Windows Azure Storage• SQL Database• Windows Azure Mobile Services

• Dynamics Online• 0ffice 365

Windows ビジネスストアアプリの認証エンタープライズの標準に準拠統合 Windows 　認証

エンタープライズ認証プライベートネットワーク

http://code.msdn.microsoft.com/windowsapps/Credential-picker-sample-30fcba2e

アプリケーション証明書My and Root stores 　Certificates

http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465029.aspx

多要素認証

Credential picker shared user certifications

http://msdn.microsoft.com/ja-jp/library/windows/apps/jj659079.aspx 　http://msdn.microsoft.com/ja-jp/library/windows/apps/windows.security.credentials.passwordvault.aspx

フェデレーションADFS 認証

Web authentication broker

シングルサインオン（ Twitter, Facebook, Microsoft Account, etc. ）

Web authentication broker

http://code.msdn.microsoft.com/windowsapps/Authenticate-Account-827dd37b

中断、再開、アクティブ化の処理http://msdn.microsoft.com/ja-jp/library/windows/apps/xx130647.aspx

中断、再開、アクティブ化の処理

• アプリが中断された時点でアプリケーションデータを保存• 必要に応じて、保存済みのアプリケーション データを使って

アプリを復元• Microsoft.Practices.Prism.StoreApps ライブラリで提供される

MvvmAppBase クラス、 VisualStateAwarePage クラス、 RestorableState カスタム属性を使って、ビューとビュー モデルはそれぞれに関連する状態を保存し、復元できる

中断、再開、アクティブ化の処理

Demo

中断、再開、　　　アクティブ化の処理

疎結合コンポーネント間の通信http://msdn.microsoft.com/ja-jp/library/windows/apps/xx130639.aspx

疎結合コンポーネント間の通信• アプリの疎結合コンポーネント間の通信には

Microsoft.Practices.Prism.PubSubEvents ライブラリを使う

• パブ / サブ イベントをイベント アグリゲーターから　取得し、 PubSubEvent<TPayload> クラスの Publish 　　メソッドを呼び出すことでサブスクライバーに通知

• PubSubEvent<TPayload> クラスで使用できる Subscribe メソッド オーバーロードの 1 つを使い、通知を　　　受け取るように登録

Demo

Windows ストア 　　ビジネスアプリの　イベント集約の検証

http://msdn.microsoft.com/ja-jp/library/windows/apps/xx130644.aspx

ユーザー入力の検証http://msdn.microsoft.com/ja-jp/library/windows/apps/xx13659.aspx

• クライアント側での検証を行うために、Microsoft.Practices.Prism.StoreApps ライブラリ内にあるValidatableBindableBase クラスからモデルクラスを派生させる

• プロパティに DataAnnotation 属性を追加することで、モデル プロパティの検証規則を指定

• ValidatableBindableBase.ValidateProperties メソッドを呼び出し、ValidationAttribute 属性から派生する属性を持つ　　　　　　モデルオブジェクトのすべてのプロパティを検証

ユーザー入力のバリデーション

Demo

ユーザー入力の検証

http://msdn.microsoft.com/ja-jp/library/windows/apps/xx130660.aspx

Windows ストア ビジネスアプリ を

Prism for Windows Runtime を用いて

　　　　　　で開発すると

シンプルに明確に開発できます！

本セッションの目的まとめ

・ http://slideshare.net/shosuz にスライド公開・ MSDN Blog (http://blogs.msdn.com/b/shosuz ) にデモの詳細解説 & ソースコードをリンク

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.