UWPによる
マルチデバイス
開発最新事情
2016/05/14
Microsoft MVP / Oracle ACE
初音玲
Speaker : Akira Hatsune(初音 玲)
Microsoft MVP / Windows Development
Oracle ACE / RDBMS
TMCNテクニカルエヴァンジェリスト
AEDオープンデータプラットフォーム
2
f
Microsoft MVP
Windows Development
Blog
最近の著作
オープンセミナー2016@岡山
3
子供向け電車のおもちゃの電脳化
Plarace - https://makershub.jp/make/1012
ところで…
今日来ている方はどういう方たちなんだろう
オープンセミナー2016@岡山
6
UWPアプリ作ったことある人?
全体の約__%
オープンセミナー2016@岡山
7
UWPのサンプル実行したことある人?
全体の約__%
オープンセミナー2016@岡山
8
Microsoftどちらかというと嫌いな人?
全体の約__%
オープンセミナー2016@岡山
9
//Build/ 2016
行ってきました
オープンセミナー2016@岡山
10
//build/ 2016ってなに?
マイクロソフトの年次開発者会議
チケット(約3,000$)は募集7分で売切
オープンセミナー2016@岡山
11
オープンセミナー2016@岡山
12
オープンセミナー2016@岡山
13
オープンセミナー2016@岡山
14
オープンセミナー2016@岡山
15
オープンセミナー2016@岡山
16
//build/ 2016でみた大きな流れ
Windowsでbashが(Ubuntuが)
Conversation as a Platform
Cognitive Services提供
XamarinによるAndroid / iOSアプリ開発
HoloLensによるMR提供
オープンセミナー2016@岡山
17
Cognitive Services
Conversation as a Platformの中核
Android / iOSからも使える
音声解析 / 画像解析など22のAPI
オープンセミナー2016@岡山
18
最近のマイクロソフトは
クラウド
Azureで動作するOSはLinuxでもOK
モバイル
AndroidやiOS向けにもSDK提供
オープンセミナー2016@岡山
19
自分たちの顧客である開発者の声を聴いて
必要なものを提供する
そんなMSの
スマホ開発事情は?
オープンセミナー2016@岡山
20
UWPどうですか?
Win10スマホってどうですか?
オープンセミナー2016@岡山
21
UWPどうですか?
オープンセミナー2016@岡山
22
UWPどうですか?
UWP
Universal Windows Platform
OSのコアが1つ
アプリのプラットフォームが1つ
ストアが1つ
オープンセミナー2016@岡山
23
UWPどうですか?
UWP
Universal Windows Platform
OSのコアが1つ
アプリのプラットフォームが1つ
ストアが1つ
オープンセミナー2016@岡山
24
開発者視点であれば、UWPに言及しておけば
Windows 10 Mobileに個別に言及する必要なし
UWPどうですか?
UWP
Universal Windows Platform
OSのコアが1つ
アプリのプラットフォームが1つ
ストアが1つ
オープンセミナー2016@岡山
25
開発者視点であれば、UWPに言及しておけば
Windows 10 Mobileに個別に言及する必要なし
UWPアプリの稼働プラットフォーム
Windows 10
Phone Small Tablet
2-in-1s
(Tablet or Laptop)
Desktops
& All-in-OnesPhablet Large Tablet
Classic
Laptop
Xbox IoTSurface
Hub
Holographi
c
UWPアプリであればどこでも動く
画面サイズが限定されない
5インチ~60インチ以上まで
スマホ、タブレット、PC、電子黒板
デバイスが限定されない
スマホやPCなど
Raspberry Pi 2/3のようなボード
HoloLensのようなウェラブル
オープンセミナー2016@岡山
27
画面サイズが違うのにデザインは?
オープンセミナー2016@岡山
28
レスポンシブデザイン
論理解像度:epx
論理画面サイズで別デザイン
オープンセミナー2016@岡山
29
UWPアプリを作ろう
世界最強(と思っている)の開発環境を
学生なら無料で
個人開発者なら無料で
OSS開発者なら無料で
大企業ならそれらを支えるため有償で
使って楽しく作れます
オープンセミナー2016@岡山
30
Visual Studioの入手方法
Windows 10 (できればPro以上)
最新はVisual Studio 2015 Update 2
もうすぐ、Visual Studio 2016(仮)
[Visual Studio]で検索!
オープンセミナー2016@岡山
31
VisualStudioで新規作成
オープンセミナー2016@岡山
32
VisualStudioで新規作成
オープンセミナー2016@岡山
33
好きな言語が選べる
VisualStudioで新規作成
オープンセミナー2016@岡山
34
Application Insightで
操作ログがクラウド収集できる
VisualStudioで新規作成
オープンセミナー2016@岡山
35
さりげなく
マルチデバイスアピール
プロジェクトが1つ=実行ファイル
オープンセミナー2016@岡山
36
画面定義はXAML
<Page x:Class="OpenSeminarUWP.Views.MainPage">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="12">
<Button Content="Clear" Command="{Binding ClearCommand}" />
<TextBlock Margin="20,0,0,0" FontSize="36" Text="{Binding Status}" />
</StackPanel>
<Grid Grid.Row="1" Background="White" >
<InkCanvas x:Name="InkCanvas" />
</Grid>
</Grid>
</Page>
オープンセミナー2016@岡山
37
画面定義はXAML
<Page x:Class="OpenSeminarUWP.Views.MainPage">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="12">
<Button Content="Clear" Command="{Binding ClearCommand}" />
<TextBlock Margin="20,0,0,0" FontSize="36" Text="{Binding Status}" />
</StackPanel>
<Grid Grid.Row="1" Background="White" >
<InkCanvas x:Name="InkCanvas" />
</Grid>
</Grid>
</Page>
オープンセミナー2016@岡山
38
画面定義はXAML
<Page x:Class="OpenSeminarUWP.Views.MainPage">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="12">
<Button Content="Clear" Command="{Binding ClearCommand}" />
<TextBlock Margin="20,0,0,0" FontSize="36" Text="{Binding Status}" />
</StackPanel>
<Grid Grid.Row="1" Background="White" >
<InkCanvas x:Name="InkCanvas" />
</Grid>
</Grid>
</Page>
オープンセミナー2016@岡山
39
強力な画面部品
<Page x:Class="OpenSeminarUWP.Views.MainPage">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal" Margin="12">
<Button Content="Clear" Command="{Binding ClearCommand}" />
<TextBlock Margin="20,0,0,0" FontSize="36" Text="{Binding Status}" />
</StackPanel>
<Grid Grid.Row="1" Background="White" >
<InkCanvas x:Name="InkCanvas" />
</Grid>
</Grid>
</Page>
オープンセミナー2016@岡山
40
デモ
オープンセミナー2016@岡山
41
お絵かき機能
オープンセミナー2016@岡山
42
PCじゃなくてスマホでしょ?
実行先を変更
オープンセミナー2016@岡山
43
スマホデモ
オープンセミナー2016@岡山
44
画面を気にせずコードが書ける
Model
(画面配置/表示を気にせずコードを記述)
ViewModel
(画面表示項目をプロパティとして定義)
View (画面定義)
オープンセミナー2016@岡山
45
強力なNUI関連ライブラリの例
文字認識:RecognizeAsync
var recognitionResults = await
RecognizerContainer.RecognizeAsync(
strokeContainer,
InkRecognitionTarget.All);
if (recognitionResults.Count > 0)
{
string str = "";
foreach (var r in recognitionResults)
{
str += " " + r.GetTextCandidates()[0];
}
this.Status = str;
}
オープンセミナー2016@岡山
46
デモ
オープンセミナー2016@岡山
47
使いやすいライブラリ管理
Nuget
オープンセミナー2016@岡山
48
強力なRESTful/JSON関連
var client = new HttpClient();
var respon = await client.PostAsync(requestUri,
new StringContent(json,
System.Text.Encoding.UTF8,
"application/json"));
var responJsonText =
await respon.Content.ReadAsStringAsync();
var ans = JsonConvert.DeserializeObject<TAnswer>
(responJsonText);
this.AnswerText = ans.utt;
オープンセミナー2016@岡山
49
デモ
オープンセミナー2016@岡山
50
UWPアプリの稼働プラットフォーム
どれで動かしてみたいですか?
Phone Small Tablet
2-in-1s
(Tablet or Laptop)
Desktops
& All-in-OnesPhablet Large Tablet
Classic
Laptop
Xbox IoTSurface
Hub
Holographi
c
UWPアプリならHoloLensでも動くよ
オープンセミナー2016@岡山
52
UWPで
スマホアプリ
作ってみない?
53
オープンセミナー2016@岡山

UWPによるマルチデバイス開発最新事情