はじめての UWP アプリ開発

1

はじめての UWP アプリ開発

宮崎典行Twitter: @openlibsyshttp://crystalmark.info/

Sapporo ComCamp 2016 powered by MVPs& CLR/H 98

＠札幌ユビキタス協創広場 U-cala

#JCCMVP #clrh98

86 PAGES

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

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

4自作ソフトウェア紹介

CrystalDiskInfo CrystalDiskMark

CrystalMark 2004 CrystalCPUID

5本日のプログラム

準備

開発

公開

UWP アプリとは

Windows 10 (PC) Windows 10 Mobile

Visual Studio Community 2015

Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark

パッケージの作成

ストアへの登録

目標: UWP アプリ開発者 1 名以上増


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



7UWP (Universal Windows Platform) アプリとは

Windows 10 を実行する全てのデバイスで利用可能な共通アプリプラットフォーム

出典: https://msdn.microsoft.com/ja-jp/library/windows/apps/dn894631.aspx

8UWP アプリの制限

自由なファイルアクセス管理者権限での動作

プロセス間通信低レイヤー API 使用

ループバック通信データベースアクセス

高度なシステム系ツールの開発は実質不可能従来のデスクトップアプリと長期間併存 (私見)


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



10Windows 10

Windows as a Service

出典: https://www.microsoft.com/ja-jp/smb/business-news/w10waas

出典: https://www.microsoft.com/ja-jp/windows/features

11Windows 10 無償アップデート

2016/7/28 まで Windows 7/(8)/8.1 から

無償アップデート可能!!


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



13多数の Windows 10 Mobile 端末が!!

*各社公式サイトより引用

14真(涙)の VAIO Phone も間もなく!!

出典: https://vaio.com/products/phone_biz051/


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



16Visual Studio Community 2015

https://www.visualstudio.com/ja-jp/

個人は無料

https://www.visualstudio.com/ja-jp/

17Visual Studio のインストール

カスタムを選択

18開発者モードの有効化

設定アプリ > 更新とセキュリティ > 開発者向け


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



20新規プロジェクト

ご自由にどうぞ

本日の解説は C# で

空白のアプリ(ユニバーサルWindows)

21空白のアプリ (ユニバーサル Windows)

自動コード生成

22デバッグ実行

Debug x86デバッグ実行

テンプレートは本当に空っぽ

23UI の作成

ビューデザイナーで MainPage.xaml を編集

MainPage.xamlをダブルクリック

24UI の作成

テキストブロックをビューに配置

TextBlock をドラッグ＆ドロップ

配置した TextBlock を選択⇒プロパティを変更

25UI の作成

ボタンを配置

Button をドラッグ＆ドロップ

配置した Button を選択⇒プロパティを変更

26イベントハンドラを登録

ボタンを押したときの挙動を設定

ダブルクリック⇒イベントハンドラ登録

27イベントハンドラの自動生成

ボタンを押したときの挙動を設定

自動作成されたイベントハンドラ

28イベントハンドラの実装

ボタンを押したときの挙動を実装

textBlock コントロールのText プロパティ

漢のバルマーメソッド

button をクリックしたら・・・


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



30実機デバッグ

ボタンをクリック

Windows 10 (PC) で実行

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

32開発者モードの有効化

実機デバッグ準備 (本当にこれだけ!!)

33実機デバッグ

ARM + Device 設定で実行

Debug, ARM, ▶ Device

※実機がない場合はエミュレーターを使用

34Hello World が実機で動く ⇒ 感動

1行も変更することなくPCでもMobileでも完全動作!!

35実機でステップ実行可能

当然ブレークポイントの設定が可能

ボタンを押した直後にブレーク


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



37開発者登録の流れ

Microsoft アカウントの取得

アプリ名予約

アカウント情報の登録

38Microsoft アカウントの取得

https://www.microsoft.com/ja-jp/msaccount/

39アカウント情報の登録

https://dev.windows.com/ja-jp/programs/join





プロモーションコードがあれば「無料」

⇒ あとは「規約」に同意すれば開発者登録完了

42アプリ名の予約

https://dev.windows.com/ja-jp/

ダッシュボードから


アプリ名の予約



開発予定のアプリ名

アプリ名が使えない事態を回避



準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



46CLRH98 Benchmark

□コンセプト

とにかくシンプル

□基本機能

• 乱数生成速度 (Xorshift) 測定https://ja.wikipedia.org/wiki/Xorshift

• シングルスレッド

• OS のバージョン情報

• ベンダー名＆モデル名

• 簡易 CPU 情報

47CLRH98 Benchmark

48CLRH98 Benchmark

シンプルなベンチマークソフト

デスクトップ版レイアウト準備中

49ベンチマークコア

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

50システム情報取得

それっぽいシステム情報を取得

CPU 情報

ベンダー＆モデル名OSバージョン

51アイコンの作成

UWP App logo maker

出典: 高橋忍のブログ - UWP Logo Maker ver.1.0http://blogs.msdn.com/b/shintak/archive/2015/08/23/10636906.aspx

52マニフェスト設定 – アイコンプロジェクト > ストア > アプリケーションマニフェストの設定

#RRGGBB 形式で直接指定

53マニフェスト設定 – 機能プロジェクト > ストア > アプリケーションマニフェストの設定

インターネット接続機能は不要のため解除


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



55パッケージの作成

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


Microsoft アカウントでサインイン


アカウント名を再入力


メールに届いたコードを入力


予約したアプリケーション名から選択


バージョンおよびプラットフォーム設定

ストアへアップロードするファイルの保存先


ストア提出前に全てのテストを実施


AppPackages フォルダ内にパッケージ生成

⇒ ストア公開手続き時にアップロード


準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



64ストア申請

https://dev.windows.com/ja-jp/overview?from=UHF

デベロッパーセンター > ダッシュボード > アプリ名

65ストア申請

申請手続き開始

66ストア申請

必須入力項目は 5 項目

67ストア申請 – 価格と使用可能状況

価格や公開する地域(国)などを設定

68ストア申請 – 価格と使用可能状況

公開方法や対象プラットフォームなどを設定

69ストア申請 – アプリのプロパティ

カテゴリや必要なハードウェア情報を設定

70ストア申請 – 年齢区分

簡単なアンケートに答えるだけ

71ストア申請 – 年齢区分

全て「いいえ」の場合

72ストア申請 – パッケージ

パッケージのアップロード

ここからパッケージをアップロード

73ストア申請 – 説明

わかりやすい説明を設定

失敗事例…

• 説明は簡潔に• URL はクリック不可⇒無意味

ストアでの表示


スクリーンショット＆プロモーション画像の設定


機能やキーワードなどの設定

このキーワードが検索にヒット

プライバシーポリシーページ

へのリンク

76ストア申請

必要事項入力後「ストアに提出」

77ストア申請

あとは待つだけ…

78ストア掲載!!

「CLRH98」で検索!!

79早速ダウンロードしてみましょう

検索キーワード

「CLRH98」

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まとめ

準備

開発

公開

UWP アプリとは



Hello World

開発者登録

実機デバッグ

CLRH98 Benchmark



意外と簡単! しかも楽しい!

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 手書き入力• アプリ内広告の実装

83Windows 10 最大の課題

2016/2/19 15:00 の Windows ストア

84

参考文献

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 Workshophttp://1drv.ms/1NXXWme

参考文献

http://www.atmarkit.co.jp/ait/articles/1509/29/news020.html

http://www.atmarkit.co.jp/ait/articles/1510/06/news017.html

http://yagisou.hatenablog.com/entry/2015/12/17/031621

http://1drv.ms/1NXXWme

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月

Software

はじめての UWP アプリ開発