わんくま同盟横浜勉強会(2018年9月8日)

2. 自己紹介
• 木澤朋和(きざわともかず)
• 横浜市在住
• 某メーカー系グループ会社でエンジニアをしています。
勤務地はみなとみらいの真ん中のビル
• Microsoft MVP for Windows and Devices for IT (2018/7~2019/6)
• ポッドキャスト番組の配信(配信満9周年)
• 動画の配信
• ブログの執筆
• コミュニティ活動
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 2

3. 本セッションの目的
•UWPアプリの開発の流れを解説して、
概要をご理解いただく
•まず手を付けていただければ。
•「今日帰ったらやってみようかな?」
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 3

4. お品書き
•UWPアプリとは?
•開発環境 Visual Studio
•UWPプログラミング サンプルアプリ作成
•ストアで公開
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 4

5. UWPとは?
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 5

6. UWPとは?
• Universal Windows Platform
• Windows 10デバイスでアプリを「共通」して
動かす仕組み
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 6
https://docs.microsoft.com/ja-jp/windows/uwp/get-started/universal-application-platform-guide

7. どのWindows 10デバイスでも
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 7
スマートフォンIoTデバイス PC
XBOX HoloLens
Surface Hub
タブレット

8. UWPアプリ
•UWP上で動くアプリ
•ストアからダウンロード
•アプリはパッケージ化
して提供
•どのデバイスからでも
共通のストアから入手
できる
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 8

9. どのWindows 10デバイスでも
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 9
PC
スマートフォン(微妙ですが)

10. UWPアプリ(例外的な)
• ちょっと例外的
• 従来のWindowsデスクトップアプリをパッケージ化して
ストアからダウンロード (Desktop App Converterなど利用)
• → これもUWP
• (例)
• 秀丸エディタ
• Crystal DiskMark
• iTunes
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 10

11. 開発環境
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 11

12. Visual Studio 2017
• Visual Studio Community 2017 (無償版)
• Professionalとほぼ同等
• 研修環境
• 学術的研究
• OSI が認定するオープン ソース ソフトウェア
ライセンスに準拠したオープン ソースの開発者
プロジェクト
• PC 台数 250 台未満かつ年商 1 億円未満の企業や団体
5 名まで利用可能
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 12

13. インストール
•必要な機能だけインストール
•UWP開発だけで
• 容量 10.4GB
• インストール時間
18分(*)
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 13
(*) Surface Pro(2017)Core m3の場合

14. アプリを作ってみよう
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 14

15. こんなアプリを作ります
•『お絵かき』アプリです
•キャンバスに絵を描く
•描画は、マウスとペンとタッチ
•ペンは太さと色が変えられる
• 太さは10段階
• 色は、黒、赤、青の三色
• 太さはスライダーコントロールで変える
• 色はコンポボックスから選択
•Surface Dialでペンの太さと色を変更できる
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 15

16. サボった機能
•ペンの形変更
•消しゴム
•保存機能
•UNDO (振り向くなアムロ・・・)
•・・・これは追々
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 16

17. ソースは公開しています
•GitHub
•https://github.com/tkizawa/OEKAKI
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 17

18. 画面
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 18
•
メニュー
描画キャンパス

19. 画面構成
•XAML
(eXtensible Application Markup Language)
•画面構成をXML形式で記述
•画面設計とソースコードを分離
画面デザインだけ別にできる
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 19

20. 画面設計
• Grid
• Grid(メニューと描画領域)
• Stack Panel
• コンボボックスなど
• インクキャンバス
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 2020

21. 画面設計
•XAMLコード
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 21

22. コードを書かずに画面を変化
•バインディング
•他のコントロールの値を、自動的に自分
(コントロール)に反映
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 22

23. コードを書かずに画面を変化
•ペンのサンプルの大きさとスライダーコントロールを
連動
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 23

24. 初期化
•ペンの初期化
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 24

25. ペンの太さ
• スライダーコントロールの値に合わせて
ペンの太さを変更
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 25

26. ペンの色
•コンボボックスの値で
ペンの色を決定
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 26

27. Surface Dial
•円筒形のダイヤルデバイス
•Bluetooth接続
•Windows 10 Anniversary Update
以降で対応
•できること
• 左右の回転
• クリックというかプッシュ
• 振動によるフィードバック
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 27

28. オンスクリーン
•モニタにメニュー表示
• Surface Studio
• Surface Pro(2017)
• Surface Book 2
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 28

29. オフスクリーン
•Bluetoothがあれば
利用可
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 29

30. プッシュしてメニュー表示
•Dialを長押し
•メニューを選ぶ
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 30

31. ダイヤルのメニュー
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 31
ペンのサイズ
ペンの色

32. ダイヤルの設定
• RadialController
• アイコンの定義
• メニューの作成
• 標準メニュー(ボリューム、拡大縮小、
UNDOなど)
• 回転の単位
• ハンドラの追加
Dialを回したときの処理の結び付け
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 32

33. Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 33

34. ダイヤルを回したときの処理
•基本処理
•メニューごとの処理
•selected.DisplayTextで判定
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 34

35. プッシュしたときの処理
•ハンドラの追加
•プッシュしたときの処理
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 35

36. アプリを公開しよう
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 36

37. アプリの公開まで
• 名前の予約
• パッケージ化
• アカウント登録
• アプリの申請
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 37

38. タイルとアイコンアセットの準備
• 種類とサイズ
• 倍率
• 100, 200, 400%を用意することを強く推奨
• 125, 150%もあると尚可
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 38
種類 サイズ(pixel)
小さいタイル 71 × 71
普通サイズのタイル 150 × 150
ワイドタイル 310 × 150
大きいタイル 310 × 310
アプリの一覧のアイコン 44 × 44
スプラッシュ画面 620 × 300

39. UWP App Logo Maker
• 各種各サイズのロゴをまとめて作成
• 作ったアイコンはAssetsフォルダーにコピー
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 39
「高橋忍のブログ」UWP Logo Maker ver.1.0
https://blogs.msdn.microsoft.com/shintak/2015/08/22/uwp-logo-maker-ver-1-0/

40. マニュフェストの編集
• マニュフェストファイル(Package.appxmanifest)を編集
• アプリケーションアプリの名称
• ビジュアル資産
• 機能
• バージョン番号
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 40
Visual Studio で UWP アプリをパッケージ化する
https://docs.microsoft.com/ja-jp/windows/uwp/packaging/packaging-uwp-apps

41. アプリケーション設定
•アプリの名称
•説明
•回転
•ロック画面通知
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 41

42. ビジュアル資産
•アイコンの設定
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 42

43. 機能
•使用するリソース
•本当に使う機能だけ
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 43

44. パッケージ化
•パッケージ表示名
•バージョン番号
•発行者名
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 44

45. パッケージの作成
•メニューのプロジェクト>ストア>
アプリパッケージの作成
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 45

46. アプリケーション名を追加
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 46

47. パッケージ作成
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 47

48. Windowsアプリ認定キット
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 48
これ重要

49. アプリの開発者登録
• アプリ登録サイト
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 49

50. ダッシュボード
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 50

51. アプリの登録
• アプリの新規登録
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 51

52. 名前を決める
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 52

53. アプリの概要
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 53

54. アプリで決めること
• 価格と提供の状況
• 対象市場(国)
• 販売価格(または無償)
• プロパティ
• カテゴリ、サブカテゴリ
• サポート情報(プライバシーポリシー)
• 対象機器 PC / HoloLens
• アプリのサポート機能
• 必要なデバイスとリソース
• 年齢区分
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 54

55. アプリの申請
•必要または推奨のハードウェア
•年齢
•規制
• 暴力表現がないか?
• 恐怖を引き起こすコンテンツ
• 性的コンテンツ
• シミュレーションまたは現実のギャンブルや賞金攻撃的な言葉
• 規制物質
• 薬物、アルコール、たばこ
• 下品なユーモア
• 諸々の政治思想的なこと
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 55

56. アプリのアップロード
• パッケージ
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 56

57. アプリのアップロード
•アプリのパッケージをアップロード
•AppPackagesフォルダの
•拡張子.appxuploadファイル
•デバイスファミリの利用可否
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 57

58. ストア登録情報
•アプリの説明文
•スクリーンショット
• デスクトップの場合は
1366x768以上
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 58
画像ファイルのフォルダと
アプリの説明と画像の相対
パスを記述したCSV形式
ファイルをインポート

59. やっと申請
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 59

60. 申請!!
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 60
ストアで「お絵かき」で検索

61. 次はどうする?
• Twitterと連携させてみたい
• クラウドサービスにつなげてみたい
• 最新のデザインに対応したアプリにしたい
・・・UWPはサンプルソースコードもありますので、まずは
やりたいことを試してみてください。
https://github.com/Microsoft/Windows-universal-samples
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 61

62. まとめ
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 62

63. まとめ
• UWPはWindows 10で共通でアプリを動かすプラットフォーム
• Visual Studio 2017は無料で使用できるものもある
• Surface Dialは結構面白いかも
• アプリ公開にはいろいろと用意するものがある
便利なツールはある
• まずは手を付けてみましょう!!
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 63

64. 『いつかできるから今日できる』
Copyright (c) 2018 Tomokazu Kizawa All rights reserved. 64