ユニバーサル Windows アプリ開発

2,513 views

Published on

・ユニバーサル Windows アプリ
・Visual Studio による開発
・コード共通化における課題と解決方法
 様々な解像度への対応
 XAML の共有
 プラットフォーム固有の XAML 作成
 #ifdef
 Shared Project と partial class
 Portable Class Library と プラットフォーム抽象化
 プラットフォーム固有のCSS による HTML / JavaScript 開発
 プラットフォーム固有の WinJS への対応
 デバイス間の状態の共有、ローミング

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,513
On SlideShare
0
From Embeds
0
Number of Embeds
679
Actions
Shares
0
Downloads
20
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

ユニバーサル Windows アプリ開発

  1. 1. http://www.microsoft.com/en-us/news/bythenumbers/index.html
  2. 2.   
  3. 3. App Model Tools StoreAPIs
  4. 4. App Model Tools StoreAPIs
  5. 5. common, similar rendering Button Slider ToggleSwitch ProgressBar etc (many more) common, different content Hub ListView GridView etc. common, different rendering DatePicker TimePicker CommandBar AppBar etc. unique SearchBox Pivot ContentDialog AutoSuggestBox etc.
  6. 6. User Interface Tools Store
  7. 7. User Interface App Model StoreAPIs
  8. 8. User Interface App Model ToolsAPIs
  9. 9. アプリ パッケージ の作成 アプリ パッケージ の登録 ストア での公開 アプリの 開発
  10. 10. ユニバーサル Windows アプリ開発 最初の一歩
  11. 11. 22   
  12. 12. Classes Structs Interfaces Windows 8.1 SDK 566 119 59 Windows Phone 8.1 SDK 624 131 57 +58 +12 -2
  13. 13. #if WINDOWS_APP var result = VisualStateManager.GoToState(this, "Windows", false); #elif WINDOWS_PHONE_APP var result = VisualStateManager.GoToState(this, "WindowsPhone", false); #endif
  14. 14.    <Application x:Class=“PhotoSearch.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PhotoSearch"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="CustomDictionary.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
  15. 15. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PhotoSearch"> <Style x:Key="MonTextblock" TargetType="TextBlock"> <Setter Property="Foreground" Value="DeepPink"></Setter> </Style> <DataTemplate x:Name="APhotoTemplate"> <Grid> <Image Source="{Binding Path}" VerticalAlignment="Top" /> <TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="28" Margin="10"/> </Grid> </DataTemplate> </ResourceDictionary> <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PhotoSearch"> <Style x:Key="MonTextblock" TargetType="TextBlock"> <Setter Property="Foreground" Value="Red"></Setter> </Style> <DataTemplate x:Name="APhotoTemplate"> <Grid> <Image Source="{Binding Path}" VerticalAlignment="Top" /> </Grid> </DataTemplate> </ResourceDictionary> PhotoSearch.Windows/CustomDictionary.xaml PhotoSearch.WindowsPhone/CustomDictionary.xaml PhotoSearch.Shared/MainPage.xaml <TextBlock Text="{Binding Title}" Style="{StaticResource MonTextblock}"/> <FlipView ItemsSource="{Binding Items}" ItemTemplate="{StaticResource APhotoTemplate}">
  16. 16.   
  17. 17. Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty #if WINDOWS_PHONE_APP StatusBar.GetForCurrentView().HideAsync(); Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareBackPressed; #endif #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP StatusBar::GetForCurrentView()->HideAsync(); #endif
  18. 18. Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty #if WINDOWS_PHONE_APP StatusBar.GetForCurrentView().HideAsync(); #endif // I can provide my own implementation of the missing APIs !!! namespace Windows.UI.ViewManagement { public class StatusBar { static StatusBar dummy = new StatusBar(); public static StatusBar GetForCurrentView() { return dummy; } public async Task HideAsync() {} } }
  19. 19. Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty // Windows¥ViewModel.cs public partial class ViewModel { async Task HideStatusBarAsync() { } } // Phone¥ViewModel.cs public partial class ViewModel { async Task HideStatusBarAsync() { await StatusBar.GetForCurrentView() .HideAsync(); } } // Shared¥Class1.cs await viewModel.HideStatusBarAsync();
  20. 20. Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty // Shared public interface IPlatformAbstractionLayer { Task HideStatusBarAsync(); } await pal.HideStatusBarAsync(); // Windows¥WinImpl.cs public class WindowsPAL: IPlatformAbstractionLayer { async Task HideStatusBarAsync() { } } // Phone¥PhoneImpl.cs public class PhonePAL : IPlatformAbstractionLayer { async Task HideStatusBarAsync() { await StatusBar.GetForCurrentView() .HideAsync(); } }
  21. 21. Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared
  22. 22. 2560 x 1440 1920 x 1080 1366 x 768450 x 800 384 x 683
  23. 23. Solution 'App1' App1_Phone81 App1_Windows81 AdaptivePage.xaml References App1_Shared References App1_Shared App1_Shared Adaptive XAML cheap and easy Solution 'App1' App1_Phone81 App1_Windows81 References App1_Shared References App1_Shared App1_Shared NarrowPage.xaml WidePage.xaml Form-factor-specific tailored
  24. 24. Solution 'App1' App1_Phone81 App1_Windows81 AdaptivePage.xaml References App1_Shared References App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 TabletPage.xaml References App1_Shared References App1_Shared App1_Shared PhonePage.xaml Adaptive XAML cheap and easy Solution 'App1' App1_Phone81 App1_Windows81 References App1_Shared References App1_Shared App1_Shared NarrowPage.xaml WidePage.xaml Form-factor-specific tailored #if WINDOWS_PHONE_APP rootFrame.Navigate(typeof(PhonePage)); #else rootFrame.Navigate(typeof(TabletPage)); #endif
  25. 25. Solution 'App1' App1_Phone81 App1_Windows81 AdaptivePage.xaml References App1_Shared References App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 TabletPage.xaml References App1_Shared References App1_Shared App1_Shared PhonePage.xaml Adaptive XAML cheap and easy Solution 'App1' App1_Phone81 App1_Windows81 References App1_Shared References App1_Shared App1_Shared NarrowPage.xaml WidePage.xaml Form-factor-specific tailored static class PlatformAbstractionLayer { public static Type GetMainPageType() { return typeof(NarrowPage); } } var t = PlatformAbstractionLayer.GetMainPageType(); rootFrame.Navigate(t); static class PlatformAbstractionLayer { public static Type GetMainPageType() { return typeof(WidePage); } }
  26. 26. Solution 'App1' App1_Phone81 App1_Windows81 AdaptivePage.xaml References App1_Shared References App1_Shared App1_Shared Adaptive XAML cheap and easy Solution 'App1' App1_Phone81 App1_Windows81 References App1_Shared References App1_Shared App1_Shared NarrowPage.xaml WidePage.xaml Form-factor-specific tailored
  27. 27.  
  28. 28. // プラットフォームの判定と // 利用するクラスの決定 if (! { } else { } <!– Shared.UI.Hub, Shared.UI.HubSection で抽象化 -> <section "Shared.UI.Hub"> <div "Shared.UI.HubSection" "{header: 'Section1'}"> <div "Controls.Section1"></div> </div> <div "Shared.UI.HubSection" "{header: 'Section2'}"> <div "Controls.Section2"></div> </div> </section> // Shared.UI.Hub, Shared.UI.HubSection の定義 WinJS.Namespace.define('Shared.UI', { Hub: hub, HubSection: hubSection });
  29. 29. Phone アプリ – PFN 12345 roaming Local Temp Windows アプリ – PFN 12345 roamingLocalTemp Local Cache PFN 12345 ローミング OneDrive stores up to 100kb of roaming data per app (not included in user quota). If app exceeds the limit, sync stops. Sync engine transfers data periodically based on triggers (user idle, battery, network, etc.) Other clients are notified of updated data via Windows Notification Service. If app is running when sync occurs, an event is raised.
  30. 30. private void OnSuspending(object sender, SuspendingEventArgs e) { // TODO: Save application state and stop any background activity ApplicationData.Current.RoamingSettings.Values["Hoge"] = model.Hoge; ApplicationData.Current.RoamingSettings.Values["Foo"] = model.Foo; } // TODO: Load state from previously suspended application model.Hoge = (bool?)ApplicationData.Current.RoamingSettings.Values["Hoge"] ?? false; model.Foo = (double?)ApplicationData.Current.RoamingSettings.Values["Foo"] ?? 1.0;
  31. 31.            

×