仙台IT文化祭(2017年) ユニバーサル windows プラットフォーム (uwp) アプリ開発概要

ユニバーサル Windows
プラットフォーム(UWP)
アプリ開発概要
木澤朋和
Microsoft MVP for Windows and Device for IT
windows-podcast.com
Copyright © 2017 Tomokazu Kizawa All rights Reserved. 1

仙台IT文化祭を支えてくださっている
スポンサー様／後援コミュニティのご紹介
仙台IT文化祭2017 http://2017.sendaiitfes.org/ #sendaiitfes 2

プラチナスポンサー
ゴールドスポンサー

Tシャツスポンサー
シルバースポンサー

スタンプラリースポンサー
ロゴスポンサー

グッズスポンサー
メディアスポンサー

個人/団体スポンサー
オフィシャルコミュニティ

セッション中の撮影および録音はOKです！
撮影可録音可
カメラのシャッター音にはご配慮お願いいたします

皆さまからの質問を募集しています！
以下のハッシュタグを使って、ツイートして
ください！
#sendaiitfes #s282033
セッション中、いただいた質問へお答えいたします

ユニバーサル Windows
プラットフォーム(UWP)
アプリ開発概要
木澤朋和
Microsoft MVP for Windows and Device for IT
windows-podcast.com

自己紹介
•木澤朋和(きざわともかず)
•某メーカー系グループ会社でエンジニアをしています。
•Microsoft MVP for Windows and Devices for IT
(2016/10~2018/6)
•横浜出身・在住
学生時代は福島県郡山市に四年間下宿生活していました
(柏屋の薄皮饅頭はこしあん派)
Copyright © 2017 Tomokazu Kizawa All rights Reserved.
11

活動内容
•ポッドキャスト番組の配信
マイクロソフトの製品や技術をお話する番組
WoodStreamのデジタル生活
毎週配信
(配信9年目配信回数 405回)
12

ポッドキャスト番組はこちらから
•iTunesのPodcast(テクノロジーカテゴリ)
•Web
windows-podcast.com
•YouTube
https://www.youtube.com/c/windows-podcast
13

ポッドキャスト番組はこちらから
•Google HomeとChromecastをお持ちの方
「OK! Google YouTubeで
WoodStreamのデジタル生活を聞かせて」
14

活動内容
•動画の配信(YouTube/Channel 9)
•ブログの執筆
•雑誌記事執筆月刊I/O
•コミュニティ活動 .NETラボ
15

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

お品書き
• UWPアプリとは?
• 開発環境 Visual Studio
• UWPプログラミングサンプルアプリ作成
• ストアで公開
17

UWPとは?
18

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

どのWindows 10デバイスでも
20
スマートフォンIoTデバイス PC
XBOX One HoloLens
Surface Hub
タブレット

UWPアプリ
•UWP上で動くアプリ
•ストアからダウンロード
•アプリはパッケージ化
して提供
•どのデバイスからでも
共通のストアから入手
できる
21

どのWindows 10デバイスでも
22
PC
スマートフォン

UWPアプリ(例外的な)
• ちょっと例外的
• 従来のWindowsデスクトップアプリをパッケージ化して
ストアからダウンロード (Desktop App Converterなど利用)
• → これもUWP
• (例)
• 秀丸エディタ
• Crystal DiskMark
• iTunesも登場予定
23

開発環境
24

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

インストール
• 必要な機能だけインストール
• UWP開発だけで
•容量 10.4GB
•インストール時間
18分(*)
26
(*) Surface Pro(2017)Core m3の場合

アプリを作ってみよう
お絵かきアプリ

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

サボった機能
•ペンの形変更
•消しゴム
•保存機能
•UNDO (振り向くなアムロ・・・)
•・・・これは追々

ソースは公開しています
•GitHub
• https://github.com/tkizawa/OEKAKI

画面
•
31
メニュー
描画キャンパス

画面構成
• XAML
(eXtensible Application Markup Language)
• 画面構成をXML形式で記述
• 画面設計とソースコードを分離
画面デザインだけ別にできる
32

画面設計
• Grid
• Grid(メニューと描画領域)
• Stack Panel
• コンボボックスなど
• インクキャンバス
33

画面設計
•XAMLコード
34

コードを書かずに画面を変化
• バインディング
• 他のコントロールの値を、自動的に自分
(コントロール)に反映
35

コードを書かずに画面を変化
•ペンのサンプルの大きさとスライダーコントロールを
連動
36

初期化
•ペンの初期化

ペンの太さ
•スライダーコントロールの値に合わせて
ペンの太さを変更

ペンの色
•コンボボックスの値で
ペンの色を決定

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

オンスクリーン
• モニタにメニュー表示
•Surface Studio
•Surface Pro(2017)
•Surface Book 2
41

オフスクリーン
• Bluetoothがあれば
利用可
42

プッシュしてメニュー表示
• Dialを長押し
• メニューを選ぶ
43

ダイヤルのメニュー
44
ペンのサイズ
ペンの色

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

46

ダイヤルを回したときの処理
•基本処理
•メニューごとの処理
•selected.DisplayTextで判定

プッシュしたときの処理
• ハンドラの追加
• プッシュしたときの処理
48

アプリを公開しよう

アプリの公開まで
• 名前の予約
• パッケージ化
• アカウント登録
• アプリの申請

タイルとアイコンアセットの準備
• 種類とサイズ
• 倍率
• 100, 200, 400%を用意することを強く推奨
• 125, 150%もあると尚可
51
タイルとアイコンアセットのガイドライン
https://docs.microsoft.com/ja-jp/windows/uwp/controls-and-patterns/tiles-and-notifications-app-assets
種類サイズ(pixel)
小さいタイル 71 × 71
普通サイズのタイル 150 × 150
ワイドタイル 310 × 150
大きいタイル 310 × 310
アプリの一覧のアイコン 44 × 44
スプラッシュ画面 620 × 300

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

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

アプリケーション設定
•アプリの名称
•説明
•回転
•ロック画面通知
54

ビジュアル資産
•アイコンの設定
55

機能
• 使用するリソース
• 本当に使う機能だけ
56

パッケージ化
•パッケージ表示名
•バージョン番号
•発行者名
57

パッケージの作成
•メニューのプロジェクト>ストア>
アプリパッケージの作成
58

アプリケーション名を追加
59

パッケージ作成
60

Windowsアプリ認定キット
61
これ重要

アプリの開発者登録
• アプリ登録サイト
62

ダッシュボード
63

アプリのアップロード
•プロジェクト>ストア>
アプリパッケージのアップロード
64

アプリで決めること
• 対象
• 販売価格(または無償)
• ストアでの検索可否
• 公開のタイミング
• カテゴリ
65

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

アプリのアップロード
•アプリのパッケージをアップロード
•AppPackagesフォルダの
•拡張子.appxuploadファイル
•デバイスファミリの利用可否
67

ストア登録情報
•アプリの説明文
•スクリーンショット
• デスクトップの場合は
1366x768以上
68

やっと申請
69

すみません、申請通っちゃいました
70
ストアで「お絵かき」で検索

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

まとめ

まとめ
• UWPはWindows 10で共通でアプリを動かすプラットフォーム
• Visual Studio 2017は無料で使用できるものもある
• Surface Dialは結構面白いかも
• アプリ公開にはいろいろと用意するものがある
便利なツールはある
• まずは手を付けてみましょう!!
『いつかできるから今日できる』

皆さまへのご案内

皆さまへのご案内
この後『Ask the Speaker / ITなんでも相談室』
212会場にしばらくいます
ご質問やご相談、キーワード
などでわからないことや、
もっと聞きたいことが
ありましたら、お気軽に
お越しください！
アンケート回答へのご協力を
よろしくお願いいたします！
■文科系総合講義棟(C19)1F ■文科系総合講義棟(C19)2F
Ask the Speaker / ITなんでも相談室

ご清聴ありがとうございました
windows-podcast.com
76

仙台IT文化祭(2017年) ユニバーサル windows プラットフォーム (uwp) アプリ開発概要

Recommended

Recommended

More Related Content

Similar to 仙台IT文化祭(2017年) ユニバーサル windows プラットフォーム (uwp) アプリ開発概要

Similar to 仙台IT文化祭(2017年) ユニバーサル windows プラットフォーム (uwp) アプリ開発概要 (20)

More from Tomokazu Kizawa

More from Tomokazu Kizawa (20)

Recently uploaded

Recently uploaded (9)