UWP アプリ開発について、開発環境の構築～ストアへの登録まで順を追って紹介します。 @ Sapporo ComCamp 2016 powered by MVPs http://clrh.connpass.com/event/24456/ (2016/2/20)

1. 1
はじめての UWP アプリ開発
宮崎 典行
Twitter: @openlibsys
http://crystalmark.info/
Sapporo ComCamp 2016 powered by MVPs
& CLR/H 98
＠札幌 ユビキタス協創広場 U-cala
#JCCMVP #clrh98
86 PAGES

2. 2自己紹介
名前：宮崎 典行/hiyohiyo/ひよひよ
年齢：37歳
家族：愛妻, 愛娘, 愛息子
趣味：ソフトウェア開発 (約17年)
住所：北海道札幌市
Microsoft MVP
・Visual C++ (Jan. 2014 – Sep. 2015)
・Visual Studio and Development Technologies (Oct. 2015 -)
ベンチマーク, Benchmark, NVMe, AHCI, SSD, HDD, CPU, CPUID, ビデオカード,
メガデモ, Final Reality, 3DMark, HDBENCH, WCPUID, Direct3D, OpenGL, MIDI,
GS, XG, Photoshop, HiDPI, 8K, 5K, 4K, Displayport 1.3, Thunderbolt 3, HDMI
2.0, BIOS, EFI, SMBIOS, Firmware, 逆アセンブル, 逆コンパイル, カーネルモード
ドライバ, コードサイニング証明書, デジタル署名, x64, x86, i386, Win32, Win64,
MFC, Visual C++, Visual C#, WinForms, WPF, DirectWrite, Windows 10, GDI,
GDI+, リソースリーク, ハンドルリーク, メモリーリーク, クラッシュ, ブルースク
リーン, S.M.A.R.T., PCI, PCIExpress, 10GbE, 10GBase-T, ダブルフォルト, 8月
～キーワード～

3. 3
一枚の画像で表現すると…

4. 4自作ソフトウェア紹介
CrystalDiskInfo CrystalDiskMark
CrystalMark 2004 CrystalCPUID

5. 5本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録
目標: UWP アプリ開発者 1 名以上増

6. 6本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

7. 7UWP (Universal Windows Platform) アプリとは
Windows 10 を実行する全てのデバイスで
利用可能な共通アプリプラットフォーム
出典: https://msdn.microsoft.com/ja-jp/library/windows/apps/dn894631.aspx

8. 8UWP アプリの制限
自由なファイルアクセス 管理者権限での動作
プロセス間通信 低レイヤー API 使用
ループバック通信 データベースアクセス
高度なシステム系ツールの開発は実質不可能
従来のデスクトップアプリと長期間併存 (私見)

9. 9本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

10. 10Windows 10
Windows as a Service
出典: https://www.microsoft.com/ja-jp/smb/business-news/w10waas
出典: https://www.microsoft.com/ja-jp/windows/features

11. 11Windows 10 無償アップデート
2016/7/28 まで Windows 7/(8)/8.1 から
無償アップデート可能!!

12. 12本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

13. 13多数の Windows 10 Mobile 端末が!!
*各社公式サイトより引用

14. 14真(涙)の VAIO Phone も間もなく!!
出典: https://vaio.com/products/phone_biz051/

15. 15本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

16. 16Visual Studio Community 2015
https://www.visualstudio.com/ja-jp/
個人は無料

17. 17Visual Studio のインストール
カスタム
を選択

18. 18開発者モードの有効化
設定 アプリ > 更新とセキュリティ > 開発者向け

19. 19本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

20. 20新規プロジェクト
ご自由に
どうぞ
本日の解説
は C# で
空白のアプリ
(ユニバーサル Windows)

21. 21空白のアプリ (ユニバーサル Windows)
自動コード生成

22. 22デバッグ実行
Debug x86
デバッグ実行
テンプレートは本当に空っぽ

23. 23UI の作成
ビューデザイナーで MainPage.xaml を編集
MainPage.xaml
をダブルクリック

24. 24UI の作成
テキストブロックをビューに配置
TextBlock を
ドラッグ＆ドロップ
配置した TextBlock を選択
⇒ プロパティを変更

25. 25UI の作成
ボタンを配置
Button を
ドラッグ＆ドロップ
配置した Button を選択
⇒ プロパティを変更

26. 26イベントハンドラを登録
ボタンを押したときの挙動を設定
ダブルクリック
⇒ イベントハンドラ登録

27. 27イベントハンドラの自動生成
ボタンを押したときの挙動を設定
自動作成された
イベントハンドラ

28. 28イベントハンドラの実装
ボタンを押したときの挙動を実装
textBlock コントロールの
Text プロパティ
漢のバルマーメソッド
button をクリックしたら・・・

29. 29本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

30. 30実機デバッグ
ボタンをクリック
Windows 10 (PC) で実行

31. 31本勉強会のために KATANA 02 を購入

32. 32開発者モードの有効化
実機デバッグ準備 (本当にこれだけ!!)

33. 33実機デバッグ
ARM + Device 設定で実行
Debug, ARM, ▶ Device
※実機がない場合は
エミュレーターを使用

34. 34Hello World が実機で動く ⇒ 感動
1行も変更することなくPCでもMobileでも完全動作!!

35. 35実機でステップ実行可能
当然ブレークポイントの設定が可能
ボタンを押した
直後にブレーク

36. 36本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

37. 37開発者登録の流れ
Microsoft アカウントの取得
アプリ名予約
アカウント情報の登録

38. 38Microsoft アカウントの取得
https://www.microsoft.com/ja-jp/msaccount/

39. 39アカウント情報の登録
https://dev.windows.com/ja-jp/programs/join

40. 40アカウント情報の登録
https://dev.windows.com/ja-jp/programs/join

41. 41アカウント情報の登録
https://dev.windows.com/ja-jp/programs/join
プロモーションコードがあれば「無料」
⇒ あとは「規約」に同意すれば開発者登録完了

42. 42アプリ名の予約
https://dev.windows.com/ja-jp/
ダッシュボードから

43. 43アプリ名の予約
アプリ名の予約
https://dev.windows.com/ja-jp/

44. 44アプリ名の予約
開発予定のアプリ名
アプリ名が使えない事態を回避
https://dev.windows.com/ja-jp/

45. 45本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

46. 46CLRH98 Benchmark
□コンセプト
とにかくシンプル
□基本機能
• 乱数生成速度 (Xorshift) 測定
https://ja.wikipedia.org/wiki/Xorshift
• シングルスレッド
• OS のバージョン情報
• ベンダー名＆モデル名
• 簡易 CPU 情報

47. 47CLRH98 Benchmark

48. 48CLRH98 Benchmark
シンプルなベンチマークソフト
デスクトップ版
レイアウト準備中

49. 49ベンチマーク コア
ボタンを押したらそのままベンチマーク

50. 50システム情報取得
それっぽいシステム情報を取得
CPU 情報
ベンダー＆モデル名
OSバージョン

51. 51アイコンの作成
UWP App logo maker
出典: 高橋 忍のブログ - UWP Logo Maker ver.1.0
http://blogs.msdn.com/b/shintak/archive/2015/08/23/10636906.aspx

52. 52マニフェスト設定 – アイコン
プロジェクト > ストア > アプリケーションマニフェストの設定
#RRGGBB 形式で直接指定

53. 53マニフェスト設定 – 機能
プロジェクト > ストア > アプリケーションマニフェストの設定
インターネット接続機能
は不要のため解除

54. 54本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

55. 55パッケージの作成
プロジェクト > ストア > アプリパッケージの作成

56. 56パッケージの作成
Microsoft アカウントでサインイン

57. 57パッケージの作成
アカウント名を再入力

58. 58パッケージの作成
メールに届いたコードを入力

59. 59パッケージの作成
予約したアプリケーション名から選択

60. 60パッケージの作成
バージョンおよびプラットフォーム設定
ストアへアップロードする
ファイルの保存先

61. 61パッケージの作成
ストア提出前に全てのテストを実施

62. 62パッケージの作成
AppPackages フォルダ内にパッケージ生成
⇒ ストア公開手続き時にアップロード

63. 63本日のプログラム
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録

64. 64ストア申請
https://dev.windows.com/ja-jp/overview?from=UHF
デベロッパーセンター > ダッシュボード > アプリ名

65. 65ストア申請
申請手続き開始

66. 66ストア申請
必須入力項目は 5 項目

67. 67ストア申請 – 価格と使用可能状況
価格や公開する地域(国)などを設定

68. 68ストア申請 – 価格と使用可能状況
公開方法や対象プラットフォームなどを設定

69. 69ストア申請 – アプリのプロパティ
カテゴリや必要なハードウェア情報を設定

70. 70ストア申請 – 年齢区分
簡単なアンケートに答えるだけ

71. 71ストア申請 – 年齢区分
全て「いいえ」の場合

72. 72ストア申請 – パッケージ
パッケージのアップロード
ここからパッケージ
をアップロード

73. 73ストア申請 – 説明
わかりやすい説明を設定
失敗事例…
• 説明は簡潔に
• URL はクリック不可
⇒ 無意味
ストアでの表示

74. 74ストア申請 – 説明
スクリーンショット＆プロモーション画像の設定

75. 75ストア申請 – 説明
機能やキーワードなどの設定
このキーワードが検索にヒット
プライバシーポリシーページ
へのリンク

76. 76ストア申請
必要事項入力後「ストアに提出」

77. 77ストア申請
あとは待つだけ…

78. 78ストア掲載!!
「CLRH98」で検索!!

79. 79早速ダウンロードしてみましょう
検索キーワード
「CLRH98」

80. 80ベンチマーク結果の比較
0
500
1000
1500
2000
FREETEL KATANA 02,
MSM8909 Quad core
@ 1.1GHz
VAIO Z VJZ13A, Core i7
5557U @ 3.1GHz
Shuttle SH170, Core i7
6700T @ 2.8GHz
162
1672 1698
CLRH98 Benchmark

81. 81まとめ
準備
開発
公開
UWP アプリとは
Windows 10 (PC) Windows 10 Mobile
Visual Studio Community 2015
Hello World
開発者登録
実機デバッグ
CLRH98 Benchmark
パッケージの作成
ストアへの登録
意外と簡単! しかも楽しい!

82. 82次のステップ
2015/11/20(金) 開催
1 日で Windows 10 に対応したアプリ開発手法が習得できる
ハンズオン～ Windows 10 UWP Developer Workshop
http://1drv.ms/1NXXWme
ハンズオンの主な内容
• Hello UWP World
• Page Navigation and handling Back
• アダプティブ UI
• タイル
• インタラクティブ トースト
• WebView
• Hosted Web Apps
• Azure App Service Mobile Apps
• Voice Commands and Cortana integration
• Inking 手書き入力
• アプリ内広告の実装

83. 83Windows 10 最大の課題
2016/2/19 15:00 の Windows ストア

84. 84
参考文献

85. 85
• Windowsフォーム開発者のためのWindows 10 UWPアプリ開発入門（前編）
http://www.atmarkit.co.jp/ait/articles/1509/29/news020.html
• Windowsフォーム開発者のためのWindows 10 UWPアプリ開発入門（後編）
http://www.atmarkit.co.jp/ait/articles/1510/06/news017.html
• 初めてのUWPアプリ開発 ～9.まとめ～
http://yagisou.hatenablog.com/entry/2015/12/17/031621
• 1 日で Windows 10 に対応したアプリ開発手法が習得できるハンズオン～
Windows 10 UWP Developer Workshop
http://1drv.ms/1NXXWme
参考文献

86. 86Q & A
ベンチマーク, Benchmark, NVMe, AHCI, SSD, HDD, CPU, CPUID, ビデオカード, メガデモ, Final
Reality, 3DMark, HDBENCH, WCPUID, Direct3D, OpenGL, MIDI, GS, XG, Photoshop, HiDPI, 8K, 5K,
4K, Displayport 1.3, Thunderbolt 3, HDMI 2.0, BIOS, EFI, SMBIOS, Firmware, 逆アセンブル, 逆コン
パイル, カーネルモードドライバ, コードサイニング証明書, デジタル署名, x64, x86, i386, Win32,
Win64, MFC, Visual C++, Visual C#, WinForms, WPF, DirectWrite, Windows 10, GDI, GDI+, リソー
スリーク, ハンドルリーク, メモリーリーク, クラッシュ, ブルースクリーン, S.M.A.R.T., PCI, PCIExpress,
10GbE, 10GBase-T, ダブルフォルト, 8月