Windowsストアアプリをuniversal Windows Apps化してWindows Phone 8.1アプリも作成してみました。 その中で得られてノウハウを公開します。

1. ストアアプリ
→universal Windows Apps
=WP8.1アプリ
Windows Phone Arch in Tokyo#3
2014.05.10
初音玲

2. 自己紹介
▷お仕事の略歴
• システム企画
• インフラ構築
• 業務アプリ構築
• DB設計、構築、各種支援
▷お仕事外の略歴
• Microsoft MVP for Developer Tools (2008/04-15/03)
• Oracle ACE (2008/04-:日本で２人目)
2

3. はじめてシリーズ
▷はじめての
VC#2012
3

4. Kinect本 監修
▷本文
• 日本語訳
▷サンプル
• ローカライズ済
4

5. 連載中
▷
• 新型Kinect for Windows v2 Developer Preview
プログラミング入門http://www.buildinsider.net/small/kinect2dp/
• Xbox One速報
http://www.buildinsider.net/consumer/xboxonekinect/
▷Codezine
• http://codezine.jp/author/998
5

6. Windows Phone 8.1 Developer Preview
6

7. History of Windows Phone Phone History
WP 7.0
Silverlight
WP 7.5
Silverlight
WP 8.0
Silverlight
WP 8.1
Silverlight
WP 8.1
XAML
7

8. Windows Phone Runtime
Windows Phone RuntimeからWindows Runtimeへ
Windows Runtime
(約11,000メンバ)
サブセット
(約2,800)
追加
(約600)
8
Windows Phone 8.0はWindows [Phone] Runtimeだった

9. 9
PCとPhoneでますます共通化へ
Common
WinRT APIs
Phone-specific
WinRT APIs
Windows-specific
WinRT APIs
The Windows Runtime (WinRT) is the
shared runtime and API space used by
store apps across the Windows
platform (phone and client)
Dramatic convergence in 8.1
• Goal is 100% convergence for dev scenarios
• In 8.0, we had ~30% API convergence
• With 8.1, we move well past 90%+ convergence

10. Windows developer platform
| |
Windows Phone Only
Windows OnlyWindows +
Windows Phone
BUILD 2014 : 2-509

11. Windows Phone 8.1のネイティブアプリは３タイプ
11

12. Which XAML Framework should you use?
AppType Framework
New App XAML or Silverlight
ExistingWindows StoreApp XAML
Lock Screen Image (social, weather, sports, ..) Silverlight 8.x
Camera BasedApp (lenses integration) orVOIP Silverlight 8.x
Music App Silverlight 8.0 or XAML
Existing Silverlight Phone Apps Silverlight 8.x or XAML
BUILD 2014 : 2-517

13. Windows 8.1ストアアプリ+
Windows Phone 8.1 ストアアプリ
＝universal Windows Apps ?
13

14. universal Windows Apps
▷ Windows Phone アプリ
Windows 8.1
ストアアプリ
Windows
Phone 8.1
ストアアプリ
(Windows Runtime)
Windows Phone
Silverlight 8.xアプリ
Windows Phone 7.x
アプリ
(Silverlight)
Windows 8
ストアアプリ
▷Windowsストアアプリ
14

15. universal Windows Apps
▷WindowsストアとWindows Phoneストアで同じID
15

16. App backup & roaming
Tile metadata and layout is backed up to OneDrive daily
App decides what data gets backed up to OneDrive
Roaming Local Temp
Roaming Local Temp
Roaming
100kb
100kb
Device A
Device B
BUILD 2014 : 2-509

17. VBはuniversal Windows Apps作れないんでしょ？
▷AppIDが同じであれば良いという事は？
▷VBで作成したWindows 8.1ストアアプリとWindows Phone 8.1アプリ
▷同じアプリ名でそれぞれのストアに登録すれば
universal Windows Apps !
17

18. じゃあ、VS2013 Update 2 RCにあるこれは？
18

19. ユニバーサルアプリ
19

20. ユニバーサルアプリテンプレート
20

21. universal Windows Apps
▷ Windows Phone アプリ
Windows 8.1
ストアアプリ
Windows
Phone 8.1アプリ
(Windows Runtime)
Windows Phone
Silverlight 8.xアプリ
Windows Phone 7.x
アプリ
(Silverlight)
Windows 8
ストアアプリ
▷Windowsストアアプリ
21

22. ソリューション構成
22

23. 既存Windowsストアアプリに追加
▷新しいメニュー項目がある
23

24. 新規プロジェクト追加のときとは異なる結果になる
▷２つの追加プロジェクト
• hogehoge.WIndowsPhone
• hogehoge.Shared
24

25. 参考：既存WP8.1プロジェクトだと
▷[Windows 8.1の追加]がある
25

26. 条件付きコンパイルシンボルを整えよう
▷新規ユニーバサルアプリ
▷既存Widowsストアアプリに追加
26

27. Windows Phone Storeとの関連付け
▷既存アプリ名一覧
• Windowsストアアプリ
27

28. Modelsと文字リソースをShared
28

29. Assetsフォルダの「コンテンツ」をShared
29
BitmapImage(new Uri("ms-appx:///Assets/sakura_pin.png"))

30. ViewModelsをShared
30

31. Phone側でNuGetパッケージ追加
31

32. Phone側でNuGetパッケージ追加
32

33. Phone側でNuGetパッケージ追加
33

34. PC側でNuGetパッケージの入れ替え（削除）
34

35. PC側でNuGetパッケージの入れ替え（追加）
35

36. 基本ページをWindowsPhone側に追加
36

37. WindowsPhone側に追加されるコード
▷Windowsストアアプリと同一コード
• NavigationHeloper
• ObservableDictionay
• RelayCommand
• SuspensionManager
37

38. CommonをShared
38

39. 参照設定の違いを確認
▷Windowsストアアプリ
39
▷Windows Phoneストアアプリ
BingMapはWindows Phoneに組み込まれているのを使う

40. コントロールの共通度はどれくらいあるか？
40

41. コントロールの共通性は？
80% exact same XAML 20% custom
Common SignatureOptimized
DatePicker
TimePicker
CommandBar
Button
CheckBox
RadioButton ProgressBar
Slider
ToggleSwitch
Hub
Pivot
ListView
GridView
SysTray
41

42. 8.1で古くなったといわれたところ
▷PickSingleFileAsync
▷PickSIngleFileAndContinue
42
古いわけじゃなかった…

43. カメラ周りは10%の方だった
43

44. 画面周りの移植に挑戦
44

45. Windowsストアアプリ側からMainPageをコピー
▷非互換はわかってるんだからねッ！
• BingMap (WindowsPhoneは組込み）
▷でもBingMap以外にも…
45

46. 同名のStyleをつくると
▷エラーになる
46

47. 別名を付けて解決
▷StandardStyle.xaml
47
▷StandardStylePhone.xaml

48. 実行時エラー
▷ TopAppBarが原因
<Page.TopAppBar>
<CommandBar>
<CommandBar.SecondaryCommands>
<AppBarButton Icon="View" Label="最寄り検索" Click="Near_Click" />
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.TopAppBar>
48

49. 動くには動いたけれど…
←やっぱりバランス悪い
49

50. XAMLを全面的に見直して…
▷変更点
• Hubコントロールをいれて
• BingMapをMapControlに変更して
• GridViewのスタイルやプロパティ変更して
▷変更しなかった点
• コードビハインド側（除くMap関連）
• NavigetionHelper周りとかそのまま動いた
50

51. FIN
51