仙台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) アプリ開発概要

More Related Content

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

More from Tomokazu Kizawa