ユニバーサル Windowsプラットフォーム(UWP)アプリの開発と配布

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

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

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

UWPとは?

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

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

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

どのWindows 10デバイスでも
PC
スマートフォン(微妙ですが)

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

開発環境

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

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

アプリを作ってみよう

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

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

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

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

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

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

画面設計
•XAMLコード

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

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

初期化
•ペンの初期化

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

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

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

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

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

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

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

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

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

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

アプリを公開しよう

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

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

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

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

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

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

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

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

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

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

パッケージ作成

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

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

ダッシュボード

アプリの登録
• アプリの新規登録

名前を決める

アプリの概要

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

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

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

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

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

やっと申請

申請!!
ストアで「お絵かき」で検索

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

まとめ

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

『いつかできるから今日できる』

ユニバーサル Windowsプラットフォーム(UWP)アプリの開発と配布

More Related Content

Similar to ユニバーサル Windowsプラットフォーム(UWP)アプリの開発と配布 (20)

More from Tomokazu Kizawa (20)

ユニバーサル Windowsプラットフォーム(UWP)アプリの開発と配布