windows ストア lob アプリ開発のためのガイダンスとフレームワークのご紹介...
Post on 24-May-2015
2.747 Views
Preview:
TRANSCRIPT
テクニカルエバンジェリストhttp://blogs.msdn.com/b/shosuz
MTC アーキテクトhttp://www.microsoft.com/ja-jp/business/mtc/ads.aspx
呟きネタは主に、Windows Azure, Windows, RIA, HTML5, MVVM, iOS/Android x Windows Azure連携, Guitar … 等
ASPIC 執行役員 (‘05 ~),
Wipse モバイル x クラウド部会長（’11 ~)
東京工業大学大学院（’13～）,早稲田大学大学院（’05-12）,中央大学総合政策学部（’08-10）で非常勤講師
Microsoft 軽音楽部広報担当 (Gt./Key./DAW)
(‘12 ～)https://www.facebook.com/shosuz
Windows ストア LOB アプリ開発
ストアアプリの企業導入に伴う課題
既存アプリケーションとの住み分け
アプリケーション化のターゲット
開発リソース確保、技術研修
配布の方法
百貨店の店舗用商品カタログのフロー例
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 テンプレート
MVVM フレームワークのご紹介
•
•
• MVC
• Presentation Model pattern
• XAML
デザイナー担当 開発者が担当
View
ViewModel
Model
UI、XAML
ロジック、状態
データソース
Data Model
View
XAML
分離コード
View Model
State +
Operations
Change Notification
Data-binding and commands
独自の“MVVM” モデル
BindableBase
Data Model
View
XAML
分離コード
View Model
State +
Operations
Change Notification
Data-binding and commands
実装済みサンプルご紹介
- Adventure Works
Reference Implementation
Demo Windows Store Business Apps Guidance using Prism for Windows Runtime
http://prismwindowsruntime.codeplex.com
ビジネスアプリケーションとPrism - patterns & practices guidance for building Windows Store business apps -
// View フォルダを作りStartPage.xaml を追加
// その中に追加する
<TextBlock
Text="Hello World!!!"
Style="{StaticResource HeaderTextStyle}" />
// App.xaml.cs の using の部分より下を全部消した後、追加
// Microsoft.Practices.Prism.StoreApps ライブラリ参照設定
using Microsoft.Practices.Prism.StoreApps;
sealed partial class App : MvvmAppBase
{
public App()
{
this.InitializeComponent();
}
}
// App.xaml を下記のように囲む
<Infrastructure:MvvmAppBasexmlns:Infrastructure=
"using:Microsoft.Practices.Prism.StoreApps">
...
</Infrastructure:MvvmAppBase>
protected override void OnLaunchApplication
(LaunchActivatedEventArgs args)
{
NavigationService.Navigate("Start", null);
}
MVVM (Model-View-ViewModel）の基本的な実装- patterns & practices guidance for building Windows Store business apps -
// StartPageViewModel クラスに FirstName プロパティと背後のフィールドを追加
private string _firstName;
public string FirstName
{
get { return _firstName; }
set { _firstName = value; }
}
// Microsoft.Practices.Prism.StoreApps ライブラリのタイプを
StartPageViewModel クラスにインポート
// ViewModel Base クラスから StartPageViewModel クラスを作成
することにより、ViewModel Base クラスの
INotifyPropertyChanged の実装を利用することが可能
using Microsoft.Practices.Prism.StoreApps;
// Microsoft.Practices.Prism.StoreApps ライブラリを利用し、
FirstName プロパティを SetProperty メソッドを使うように変更
public string FirstName
{
get { return _firstName; }
set { SetProperty(ref _firstName, value); }
}
// ViewModelLocator.AutoWireViewModel attached property を
StartPage のための Page コントロールに追加する
<Page xmlns:Infrastructure=
"using:Microsoft.Practices.Prism.StoreApps"
Infrastructure:ViewModelLocator.AutoWireViewModel
="True"
... >
...
</Page>
// StartPageViewModel クラスを更新し、FirstName プロパティに
[RestorableState] アトリビュートを適用
[RestorableState]
public string FirstName
{
get { return _firstName; }
set { SetProperty(ref _firstName, value); }
}
Flyout Services クラスを使ったFlyout の作成・表示- patterns & practices guidance for building Windows Store business apps -
// SignInFlyout ページを作成
// その中の Grid 内に TextBlock 追加
<Grid Background="White">
<TextBlock Text="Sign In!"
Foreground="Black" />
</Grid>
// Microsoft.Practices.Prism.StoreApps ライブラリ
内で StandardFlyoutSize クラスを定義
// FlyoutView base クラスから SignInFlyout クラスを継承するよう
変更。また、コンストラクターの中で Width も決定
public sealed partial class SignInFlyout : FlyoutView
{
public SignInFlyout() : base(StandardFlyoutSize.Narrow)
{
this.InitializeComponent();
}
}
// SignInFlyout.xaml ファイルを更新し、SignInFlyout View が
Microsoft.Practices.Prism.StoreApps ライブラリにある
FlyoutView base class を拡張するように変更する
<Infrastructure:FlyoutView
xmlns:Infrastructure=
"using:Microsoft.Practices.Prism.StoreApps"
...
</Infrastructure:FlyoutView>
// StartPage が SignInFlyout を表示するように変更する
Microsoft.Practices.Prism.StoreApps 名前空間からの
インターフェースを StartPageViewModel クラスにインポートする
using Microsoft.Practices.Prism.StoreApps.Interfaces
// StartPageViewModel クラスにコンストラクタを追加し、
IFlyoutService タイプのパラメータを取るようにする
StartPageViewModel クラスにはデフォルトコンストラクタは存在しない
public StartPageViewModel(IFlyoutService flyoutService)
{
}
// ViewModelLocator をファクトリーに提供し StartPage のための
ViewModel インスタンスを作成
// App class 内にある OnInitialize メソッドをオーバーライドし
ViewModelLocator に StartPageViewModel インスタンス構成を教える
protected override void
OnInitialize(IActivatedEventArgs args)
{
ViewModelLocator.Register(typeof(StartPage).ToString(),
() => new StartPageViewModel(FlyoutService));
}
// StartPage 内の StackPanel に SignInFlyout を表示するボタンを追加
当該ボタンの Command property は StartPageViewModel クラス内の
SignInCommand にバインドされる
<StackPanel>
<TextBlock Text="Hello World!!!" />
<TextBox Text=
"{Binding FirstName, Mode=TwoWay}" />
<Button Content="ShowFlyout"
Command="{Binding SignInCommand}" />
</StackPanel>
// StartPageViewModel class に System.Windows.Input 名前空間をインポート
using System.Windows.Input;
// SignInCommand プロパティを StartPageViewModel クラスに追加
Public Icommand SignInCommand { get; private set; }
// 当該プロパティは private setter を持つ（内部的にのみセット可能故)
// SignInCommand プロパティを DelegateCommand インスタンスに設定しFlyoutServiceを呼び出す
public StartPageViewModel(IFlyoutService flyoutService)
{
SignInCommand = new DelegateCommand(() =>
flyoutService.ShowFlyout("SignIn"));
}
// 設定ペインに SignInFlyout を表示するアイテムを追加する
// アプリを停止し、App class の中の GetSettingsCharmActionItems メソッドをオーバーライド
// このメソッドは SettingsPane class の CommandsRequested イベント が発生したとき呼ばれる
// SignInFlyout を開くための設定ペインに SettingsCharmActionItem を追加する
Protected override Ilist<SettingsCharmActionItem> GetSettingsCharmActionItems()
{
return new List<SettingsCharmActionItem>{ new
SettingsCharmActionItem("Sign In",
() => FlyoutService.ShowFlyout("SignIn"))};
}
Dependency Injection コンテナの統合- patterns & practices guidance for building Windows Store business apps -
// Dependency Injection Container ライブラリへの参照を追加
※ Unity v3 container via NuGet(http://www.nuget.org/packages/Unity/).
// App class に当該コンテナを保持するプライベートメンバー変数追加
private UnityContainer _container =
new UnityContainer();
// App class 内の Resolve メソッドをオーバーライドして
当該コンテナが一つのタイプからオブジェクトインスタンスを
生成できるようにする
protected override object Resolve(Type type)
{
return _container.Resolve(type);
}
// MvvmAppBase により提供される3つのサービスを登録するコード
protected override void OnInitialize
(IActivatedEventArgs args)
{
_container.RegisterInstance(NavigationService);
_container.RegisterInstance(FlyoutService);
_container.RegisterInstance(SessionStateService);
}
ユーザー入力のバリデーション- patterns & practices guidance for building Windows Store business apps -
HighlightFormFieldOnErrors.PropertyErrors
private string _username;
private string _password;
public string Username
{
get { return _username; }
set { SetProperty(ref _username, value); }
}
public string Password
{
get { return _password; }
set { SetProperty(ref _password, value); }
}
// 各プロパティに “Required”・“StringLength” DataAnnotations
attributes を追加
[Required]
[StringLength(10)]
public string Username
{
get { return _username; }
set { SetProperty(ref _username, value); }
}
[Required]
[StringLength(20)]
public string Password ・・・
// Model クラスができたのでそれを SignInFlyoutViewModel 上で公開
// ViewModels フォルダに SignInFlyoutViewModel 追加
// SignInFlyoutViewModel に当該 Credential Model を公開する
プロパティを追加
public class SignInFlyoutViewModel
{
public SignInFlyoutViewModel()
{
UserCredential = new Credential();
}
public Credential UserCredential { get; set; }
}
// SignInFlyout ページ とこのページ (view) とを
SignInFlyoutViewModel にバインド
ViewModelLocator.AutoWireViewModel=”True”
// いくつか Controls を View に追加して、当該 ViewModel の
Credential Username プロパティと Password プロパティ値を格納
//何らかの Validation error messagesとバインドされた TextBlock群
<TextBox Text=
"{Binding UserCredential.Username, Mode=TwoWay}"
BorderBrush="Black" />
<TextBlock Text="{Binding UserCredential.Errors[Username],
Converter={StaticResource
FirstErrorConverter}}" Foreground="Red" />
<TextBox Text="{Binding UserCredential.Password,
Mode=TwoWay}" BorderBrush="Black" />
<TextBlock Text="{Binding UserCredential.Errors[Password],
Converter={StaticResource
FirstErrorConverter}}" Foreground="Red"/>
// FirstErrorConverter のソース
public sealed class FirstErrorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
ICollection<string> errors = value as ICollection<string>;
return errors != null && errors.Count > 0 ?
errors.ElementAt(0):null;
}
public object ConvertBack(object value, Type targetType,
object parameter, string language)
{
throw new NotImplementedException();
}
}
// この値コンバータを Static resource として使うには、
App.xaml の中で参照設定する
<ResourceDictionary>
...
<converters:FirstErrorConverter
x:Key="FirstErrorConverter" />
</ResourceDictionary>
// Model プロジェクトの全てのプロパティをバリデートする
UserCredential.ValidateProperties()
public SignInFlyoutViewModel()
{
UserCredential = new Credential();
ValidateAll =
new DelegateCommand(() => UserCredential.ValidateProperties());
}
public Credential UserCredential { get; set; }
public ICommand ValidateAll { get; set; }
15.Add a button to the view that binds to the ValidateAll
// View にボタンを追加して ValidateAll command にバインド
<Button Command="{Binding ValidateAll}"
Content="Validate All"
Foreground="Black"/>
public class MyViewModel : ViewModel, INavigationAware{
private string _name;
[RestorableState]public string Name{
get { return _name; }set { SetProperty(ref _name, value); }
}}
Model の追加（1）Entity Framework + Code First によるデータモデル構築
Entity Data Model概念モデル (CSDL)問題領域の概念的な
エンティティやリレーションの定義
マッピング (MSL)両モデル間の対応付け
ストレージモデル (SSDL)特定のデータソースに基づく論理スキーマのモデル
プログラム上のオブジェクト
Entity SQL
概念モデルのエンティティと
オブジェクトとの間でマッピング
プレゼンテーション層
ドメイン層
データ層
public partial class Entry
{public virtual int ID
{
get;
set;
}
RDB
Model の追加（2）ASP.NET MVC4 Web API によるサービスの公開と利用
•
クライアントアプリ
Web サーバー
ASP.NET
Web
API
Get/Post/Put/Delete
JSON/XML
データソース
ブラウザー
En
tity
Fram
ew
ork
サービス
• await
XAML / C# ASP.NET
Web APIJSON
Get/Post/
Put/Delete
var client = new HttpClient();
HttpResponseMessage response = await client.GetAsync(“サービスのURI");
var result = await
response.Content.ReadAsStringAsync();var pictures = JsonArray.Parse(result);// JSONの結果をオブジェクトにバインド …
Windows Azure 連携シナリオ• オンライン楽器ストアアプリ
各商品を表示 タイトルを編集 詳細情報編集、削除可能
スタートスクリーン 全商品表示（Hub） 一覧・登録（Sections）
個別商品表示・編集（Details）
アーキテクチャー概要
Windows ストアアプリ・店舗管理者用 -編集・登録
・一般ユーザー用 -閲覧・購入・プッシュ通知（Mobile Services）・メール（SendGrid)
69
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ストア
Demo Musical Instruments Storeutilizing Adventure Works RIworking with Windows Azureas Model
http://aka.ms/VS2012-Case
http://aka.ms/VS2012-Sol
http://aka.ms/VS2012-Prod
http://aka.ms/VS2012-Try
http://aka.ms/VS2012-Lic
top related