Uno Platform 入門情報 UWP の基本技術が使えているか？

1. / 47
Uno Platform 入門
1
C# TOKYO オンライン
2020年04月03日
石崎 充良

2. / 47
自己紹介
石崎 充良 ( @mishi_cs )
Microsoft MVP for Developer Technologies
言語： C# XAML
活動：
・C# もくもく会 (connpass)
・城東.NET (connpass)
・C# Tokyo (connpass)
2

3. / 47
Uno Platform
3

4. / 47
Uno Platform
カナダ nventive 社が作っている UWP の
XAML でクロスプラットフォームできる
開発プラットフォーム。
C#/.NET。
UWP はそのまま UWP 。
Android / iOS は Xamarin の上に乗って
いる。
4https://platform.uno/how-it-works/

5. / 47
Xamarin とは
・Android / iOS の API を C# から使えるようにしたもの
・C# (.NET) のライブラリを使えるようにしたもの
5
ロジックのみ共通化
UIはネイティブで個別に作りこむ
Shared C# App Logic
iOS
C# UI
Android
C# UI
Windows
C# UI

6. / 47
API を C# から使えるようにした
薄いラッパーとも呼ばれる。
6
Android / Java Xamarin / C#

7. / 47
UWP
7

8. / 47
UWP
8
C# で Windows デバイスのアプリを作る技術の最先端
C# エンジニアの多くが学んでいる

9. / 47
Uno Platform
カナダ nventive 社が作っている UWP の
XAML でクロスプラットフォームできる
開発プラットフォーム。
C#/.NET。
UWP はそのまま UWP 。
Android / iOS は Xamarin の上に乗って
いる。
9https://platform.uno/how-it-works/

10. / 47
生まれるソリューション
10
Shared Project
Shared Project の中に
UWP の XAML

11. / 47
実行
11

12. / 47
作ってみる
12

13. / 47
プロジェクトテンプレートの追加
13

14. / 47
テンプレートから作成
14
タグがないので名前で検索
ライブラリと App があるので注意
（App を選択）

15. / 47
生まれるソリューション
15
Shared Project
Shared Project の中に
UWP の XAML

16. / 47
うまく実行できると
16

17. / 47
•コードを書いてみる
•プラットフォーム毎のコード
•ページ遷移
•リストの表示
•データバインディング
•WebAPI
17

18. / 47
•コードを書いてみる
•プラットフォーム毎のコード
•ページ遷移
•リストの表示
•データバインディング
•WebAPI
18

19. / 47
XAML
19
TextBox 3 つと
TextBlock 1 つ、
Button ひとつ
※完全に UWP の XAML

20. / 47
イベントハンドラも作られる
20
新しいイベント ハンドラー
※完全に UWP のコード
プロパティ ウィンドウからも可
※完全に UWP のコード

21. / 47
イベントハンドラ
21
Button クリックで、
TextBox 3 つの値を
結合して TextBlock に表示
※完全に UWP のコード

22. / 47
実行
22

23. / 47
UWP
23

24. / 47
WASM
24

25. / 47
Android
25

26. / 47
iOS
26

27. / 47
クロスプラットフォーム
27
UWP
WebAssembly
Android iOS

28. / 47
•コードを書いてみる
•プラットフォーム毎のコード
•ページ遷移
•リストの表示
•データバインディング
•WebAPI
28

29. / 4729

30. / 47
表示おかしくない？
30

31. / 47
これ
31

32. / 47
プリプロセッサ [ C# 機能 ]
32
iOS の場合だけマージンを変更

33. / 47
XAML [ XAML 機能 ]
33
プラットフォーム毎にマージンを変更

34. / 47
•コードを書いてみる
•プラットフォーム毎のコード
•ページ遷移
•リストの表示
•データバインディング
•WebAPI
34

35. / 47
遷移のコード [ UWP の API ]
35
１ページ目 ２ページ目

36. / 47
実行
36

37. / 47
•コードを書いてみる
•プラットフォーム毎のコード
•ページ遷移
•リストの表示
•データバインディング
•WebAPI
37

38. / 47
リスト表示のコード [ UWP の API ]
38
XAML
コード

39. / 47
実行
39

40. / 47
•コードを書いてみる
•プラットフォーム毎のコード
•ページ遷移
•リストの表示
•データバインディング
•WebAPI
40

41. / 47
データバインディング [ UWP の API ]
41
XAML
ViewModel

42. / 47
実行
42

43. / 47
•コードを書いてみる
•プラットフォーム毎のコード
•ページ遷移
•リストの表示
•データバインディング
•WebAPI
43

44. / 47
いつもの HttpClient [ C# のクラス ]
44

45. / 47
まとめ
45

46. / 47
まとめ
•C#、クラスライブラリの知識が活きる
•UWP の知識が活きる
•とりあえず十分触り始められる
46

47. / 47
まとめ
•とりあえず始めましょう！
47

48. / 47
ありがとうございました。
48