Uwpアプリケーション開発入門

UWPアプリケーション開発のススメ
.NETラボ勉強会 2015年8月
古代魚庵
西村誠

本セッションの目的
• UWPに興味を持ってもらう
• ストアアプリとUWPの違いについて紹介する
• DEMOで移植してみる

お品書き
• 自己紹介
• UWPとは？
• 実践編
• まとめ
https://doc.co/nzBEox

自己紹介
• 西村誠
• フリーランスのプログラマー兼ライター
• Microsoft MVP - Windows Platform Development（for ギリギリ）
• EC-CUBE公式エヴァンジェリスト

自己紹介
• Twitter：coelacanth
• Facebook:西村誠
• ブログ「眠るシーラカンスと水底のプログラマー」

自己紹介
• [広告] 8月26日に「基礎から学ぶC#」発売します
• 価格2000円
• ページ数160ページぐらい

自己紹介
• [広告] CodeZine 「Windows 10で始めるIoT入門」

UWPとは？

UWPとは？
• Universal Windows Platformの略
• Windows 10 OSが搭載された様々な環境で動くアプリ（UWPアプリ）
を作成できるプラットフォーム

様々なファミリー
• Desktop
• IoT
• Mobile
• Xbox
• HoloLends
• Surface Hub

Windows 10 Desktop
• 全画面じゃなくなったストアアプリ
• Cortana
• XAMLパフォーマンス向上
• ストアから利用できる現状唯一のプラットフォーム

Windows 10 IoT
• ラズパイなどで動かせるIoT用のWindows 10
• 正式版でましたね
• [宣伝] CodeZine・・・

Windows 10 Mobile
• Windows Phone用のWindows 10
• Insider Preview
• ただいまVisual Studioと相性悪し・・・（なおった？）
追記：実機Windows 10 MobileをUSB接続しているとVisual Studio 2015
がフリーズするという現象が私の環境で発生していましたが、8月22日
現在では解消されているようでした

Windows 10 その他
• Xbox
• Hololends
• Surface Hub(Extensionはあるんだよね)

UWPに至るまで

• Visual Studioで作成するプロジェクトは一つ
• バイナリはCPUアーキテクト毎に
Oneプロジェクト Oneバイナリ
UWPプロジェクト
x64
x86
ARM

• ストアにアップロードするパッケージは最大3つ
• X86のみなどでもOK
Oneプロジェクト Oneバイナリ

・Windows 8.1、Windows Phone 8.1でもUniversal Windowsアプリって
言っていましたよね。
・8.1の頃は2プロジェクト（+共有プロジェクト）2バイナリ
8.1の頃は？

・発展形という認識でよいと思う
・コードも大部分が共有可能
・追加、変更点も多いが、WinRTの資産は活かせる
ストアアプリのWinRTとの違い

Windows 10 Desktop

Windows 10 Desktop
Bridging?

Bridge
• iOSアプリをUWPに Bridge for iOS
• AndroidアプリをUWPに Bridge for Android
• WebサイトをUWPに Bridge for Web
• WPFをUWPに Bridge for Classic Windows apps

Bridge for iOS
• iOSプロジェクトをVisual Studioで読み込めるように変換する
• 変換すると.slnが作成される
• PreviewなのでStoryboard未対応（早く！！）
• GitHubでも公開されているので誰でも利用可能
https://github.com/Microsoft/WinObjC

Bridge for Android
• AndroidアプリをUWPとして動かす
• 現在、申請すると利用可能に（申請するにはapkが必要）

Bridge for Web
• DEMO（需要があれば）
• プロジェクトの作成
• JS、CSS、HTMLなど削除
• ApplicationContentUriRules
詳しくは
http://microsoftedge.github.io/WebAppsDocs/en-US/win10/CreateHWA.htm

Bridge for Classic Windows apps
• WPFをUWPとして動かす
• 現在、申請すると利用可能に

でUWPにする？
• 適材適所で
• Windows 10普及してね

UWPのいいところ
• ストアがあるので不特定多数への配布が楽
• Windows 10が動く端末ならマルチに展開できる
• タッチ向きの画面が作りやすい
• ライバルが少ない
• ストアアプリに比べてできることが増えた

UWPが苦手なことろ
• 複雑なフォーム
• 古いOSだと動かない
• サンドボックスがある
• 社内配布など限定公開が面倒

実践編

開発ツール
• OSはWindows 10
• IDEはVisual Studio 2015
• 言語はXAML/C# or VB、HTML/JS、C++
• 画面をXAML（or HTML）で定義してロジックをC#（VB or JS or C++）で
記述する（ゲームはDirectX/C++）

開発者モードに
• 設定の更新とセキュリティから

プロジェクトの作成
• 空白のアプリ(ユニバーサル Windows)のみ
• ちなみに8.1は
• 個人的にはユニバーサル Windows 10とかにしてほしかった

初期プロジェクト
• 空白のアプリ(ユニバーサル Windows)のみ
• ストアアプリのプロジェクト構成とすごく似ている
• Project.jsonが違うぐらいか？

DEMO:Hello World
• 需要があれば
• ストアアプリと同じ

開発の流れ
• Windowsストアアプリの情報が利用可能なケースが多い
• ストアアプリとどのくらい共通なのかは後で例示します。
• 本セッションではマルチプラットフォーム対応について主に紹介
• ストアアプリの情報で動かない場合はGitHubのUWPアプリのサンプ
ルを探す
https://github.com/Microsoft/Windows-universal-samples

デバイス固有の機能を使う
• デバイス固有の機能を使いたい場合（電話のWindowsボタンなど）
は拡張（Extention）を利用
• 拡張は「参照の追加」から
bool isHWButton
=Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Wind
ows.Phone.UI.Input.HardwareButtons");

デバイス固有の機能を使う
• C:Program Files (x86)Windows Kits10Extension SDKs
のSDKManifest.xmlをのぞくと理解に役立つかな
・C:Program Files (x86)Windows Kits10References
あたりに.winmdファイルがある

Sharedで固有のコードを書く
#if WINDOWS_UWP
// UWPの場合
// さらにPCか電話かを判定する場合
DeviceManager.isMobile =
Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Mobile";
#endif
#if WINDOWS_PHONE_APP
// Windows Phone 8.1の場合
#endif
#if WINDOWS_APP
// Windows 8.1の場合
#endif

Ifディレクティブの外に書くと・・・

プロジェクトに合わせて気ifディレクティブを切り替えることも

ファミリー毎にXAMLファイルを変える
• MainPage.DeviceFamily-デバイスファミリー名.xaml
• フォルダで分けてもよい
• コードビハインド（xaml.cs）は共通

Desktop版しかストアに出さない
Package.appxmanifestを編集
<Dependencies>
<TargetDeviceFamily Name="Windows.Desktop"
MinVersion="10.0.10049.0" MaxVersionTested="10.0.10049.0" />
</Dependencies>
で良いと思うが、まだストアからダウンロードできるのはデスクトッ
プ版だけなので確認できず・・・

画面幅でレイアウトを変える
VisualStateManagerで定義
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MySplitView.DisplayMode" Value="Inline" />
</VisualState.Setters>

移植例：見える継続カレンダー
• 「見える継続カレンダー」というWindows 8.1向けアプリを移植してみ
た

• 「見える継続カレンダー」というWindows 8.1向けアプリを移植してみ
た
• 基本はSharedで共有する形でXAMLもcsもAssetsも共有していく
• おおむね既存コードでよかったが一部変更点も

• ListViewのドラッグ&ドロップ機能を使ってスタンプをカレンダーに配
置するのだが、ここが8.1→UWPで変更になっていた
ListView CanDragItems="True“

UWP（Desktop）ではDragOver時に以下のコードが必要に
void tmpText_DragOver(object sender, DragEventArgs e)
{
e.AcceptedOperation =
Windows.ApplicationModel.DataTransfer.DataPackageOperation.Move;
e.Handled = true;

そもそもMobileはListViewのドラッグ＆ドロップは使えない
（これは過去のバージョンも同じ）
Mobileは画面が小さいからドラッグ&ドロップ操作は非推奨ということ
かな？
タップする操作に変更するために別XAMLに変更。
タップ対応は実装中・・・

アイコンなどの画像サイズが微妙に違っていた・・・
Windows 8.1
UWP
追記:Windows Phone 8.1が71×71アイコンがあるので揃えたのかな

で、何が違うの？
Windows 8.1（コントラクトが「三」から呼び出せる）
UWP

移植DEMO
• UWPプロジェクトの作成
• Sharedの追加
• Viewを移植
• 初期ページがMainFrame.xaml
（これはアプリの仕様）
追記：デモではほとんどエラーもなく移植できてしまいましたが、機能によっ
ては大幅な修正が必要な場合も？ FilePickerはかなり挙動が変わったとの
ことでした。

ストア
• WindowsストアアプリとWindows Phoneのストアが統一

ストア
• Windows 10のストアアプリからアプリをインストール

まとめ
• UWPの登場でさらにマルチプラットフォーム対応が進む
• ストアアプリのコードは場合によってはそのまま動く
• Windows Phoneアプリを公開している人はXamarinがもらえるので、
Windows 10 + iOS + Androidでさらにマルチに！！

御静聴ありがとうございました

UWPアプリケーション開発入門
めとべや東京勉強会 #9
古代魚庵
西村誠

本セッションの目的
• UWPについて基礎的なことを知ってもらう
• UWPに興味を持ってもらう
• 難しいことは以降の人にお任せ

Uwpアプリケーション開発入門

More Related Content

What's hot

Viewers also liked

Similar to Uwpアプリケーション開発入門

More from Makoto Nishimura

Uwpアプリケーション開発入門