Build 2022 について Uno Platform について

1. / 72
Build について
/ Uno Platform について
1
【オンライン】BUILD 2022 直後！ C# TOKYO イベント
石崎 充良

2. / 72
自己紹介
石崎 充良 ( @mishi_cs )
C# Tokyo コミュニティ管理メンバー
GitHub：
https://github.com/m-ishizaki
blog：
https://rksoftware.hatenablog.com/
2

3. / 72
今日お話しすること
3

4. / 72
今日お話しすること
Build とは …… 9 ページ
Build セッションを効率よくチェックする方法 …… 10 ページ
Uno Platform とは？ …… 11 ページ
Uno Platform のソリューションの作り方 (世界におはよう) …… 12 ページ
WinUI のサンプルを Uno Platform に移植 (失敗) …… 5 ページ
WinUI の XAML を Uno Platform に移植 (独自) …… 13 ページ
4

5. / 72
Build とは
5

6. / 72
今日お話しすること
Build とは …… 9 ページ
Build セッションを効率よくチェックする方法 …… 10 ページ
Uno Platform とは？ …… 11 ページ
Uno Platform のソリューションの作り方 (世界におはよう) …… 12 ページ
WinUI のサンプルを Uno Platform に移植 (失敗) …… 5 ページ
WinUI の XAML を Uno Platform に移植 (独自) …… 13 ページ
6

7. / 72
Microsoft 社の開発者向けイベント
・ カンファレンス
・ Microsoft 社の技術を扱う
・ 開発者向け
・ 年次
7

8. / 72
サイト
8
https://mybuild.microsoft.com/ja-JP/home

9. / 72
学習を継続する
9
https://mybuild.microsoft.com/ja-JP/home

10. / 72
セッション
10
https://mybuild.microsoft.com/ja-JP/home
リンク

11. / 72
セッション
11
https://mybuild.microsoft.com/ja-JP/home

12. / 72
.NET Conf
Build、なんだか影薄くない？
12
https://www.dotnetconf.net/

13. / 72
セッション
13
https://mybuild.microsoft.com/ja-JP/sessions
検索ボックス
セッション数

14. / 72
C# セッション
14
https://mybuild.microsoft.com/ja-JP/sessions
C# のセッション
はこれだけ
4 セッション
( 572 中 )

15. / 72
観るセッションを探そう
15

16. / 72
今日お話しすること
Build とは …… 9 ページ
Build セッションを効率よくチェックする方法 …… 10 ページ
Uno Platform とは？ …… 11 ページ
Uno Platform のソリューションの作り方 (世界におはよう) …… 12 ページ
WinUI のサンプルを Uno Platform に移植 (失敗) …… 5 ページ
WinUI の XAML を Uno Platform に移植 (独自) …… 13 ページ
16

17. / 72
.NET セッション / MAUI セッション
17
https://mybuild.microsoft.com/ja-JP/sessions
23 セッション
( 572 中 ) 4 セッション
( 572 中 )

18. / 72
いくつか検索してみた
検索ワード ヒット数 (572 セッション中)
C# 4
.NET 23
Mixed Reality 1
MAUI 4
Blazor 4
Visual Studio 17
Azure 204
Power Platform 40
Teams 145
Cloud 57
Web 118
Low-code 10
C# .NET MAUI Blazor “Visual Studio” 42
18
OR 検索

19. / 72
全てを観る必要はない
19
https://mybuild.microsoft.com/ja-JP/sessions
C# のセッション
はこれだけ
4 セッション
( 572 中 )

20. / 72
オススメのセッションの
観かた
（日本の開発者は忙しい）
20

21. / 72
4 倍の速度で生きる開発者へ
21
https://mybuild.microsoft.com/ja-JP/sessions/34024242-36f5-4e37-b2fe-5b040ec55a3e
再生速度

22. / 72
4 倍速じゃ聞き取れないよ！
22
https://mybuild.microsoft.com/ja-JP/sessions/34024242-36f5-4e37-b2fe-5b040ec55a3e
字幕

23. / 72
これでどうでしょう？
23
https://mybuild.microsoft.com/ja-JP/sessions/34024242-36f5-4e37-b2fe-5b040ec55a3e

24. / 72
忙しい日本の開発者の皆さんへ
・まずは観ておくセッションは多くない
・検索しよう
・4 倍速+字幕で気になるところを探そう
・気になったら一時停止でスライド画面を
・1 セッションは多くは 30 分 (4 倍速で 10 程度)
24

25. / 72
サイト
25
https://mybuild.microsoft.com/ja-JP/home

26. / 72
Uno Platform とは
26

27. / 72
今日お話しすること
Build とは …… 9 ページ
Build セッションを効率よくチェックする方法 …… 10 ページ
Uno Platform とは？ …… 11 ページ
Uno Platform のソリューションの作り方 (世界におはよう) …… 12 ページ
WinUI のサンプルを Uno Platform に移植 (失敗) …… 5 ページ
WinUI の XAML を Uno Platform に移植 (独自) …… 13 ページ
27

28. / 72
C# + XAML
・開発言語は C#
・UI の定義は XAML
・WebAssembly、Mobile、Desktop
28
https://platform.uno/docs/articles/get-started.html

29. / 72
Uno Platform
・カナダ nvertive 社が 2018 年に OSS 化
・2019 年～2020 年頃日本で話題に
29
https://nventive.com/en/about-us/
Chrome ブラウザで翻訳

30. / 72
MAUI / Blazor / Uno Platform
MAUI Blazor Blazor (Hybrid) Uno Platform
言語 C# C# C# C#
UI 定義 XAML (※1) HTML + CSS HTML + CSS XAML (※1)
Web × ○ ○ ×
WebAssembly × ○ ○ ○
Android ○ × ○ ○
iOS ○ × ○ ○
Windows
(UWP)
○ × ○ ○
Windows
(WPF or
WinForms)
× × ○ ○
macOS ○ × ○ ○
Linux × × × ○
30

31. / 72
vs MAUI
どれが生き残るか？
・Blazor が強い (力も人気も入っている……気がする)
・Blazor のモバイルアプリは MAUI でできている
全部生き残る
31

32. / 72
MAUI / Blazor / Uno Platform
MAUI Blazor Blazor (Hybrid) Uno Platform
言語 C# C# C# C#
UI 定義 XAML (※1) HTML + CSS HTML + CSS XAML (※1)
Web × ○ ○ ×
WebAssembly × ○ ○ ○
Android ○ × ○ ○
iOS ○ × ○ ○
Windows
(UWP)
○ × ○ ○
Windows
(WPF or
WinForms)
× × ○ ○
macOS ○ × ○ ○
Linux × × × ○
32

33. / 72
※1 XAML Standard 覚えていますか？
33
https://github.com/microsoft/xaml-standard
https://atmarkit.itmedia.co.jp/ait/articles/1708/25/news021.html

34. / 72
テキスト入力コントロール
34
https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/entry
https://platform.uno/docs/articles/implemented/windows-ui-xaml-controls-textbox.html

35. / 72
XAML
・XAML としては同じ
・コントロールやプロパティは違う
・モバイルの UI 構築に XAML という「書式」を選択した MAUI
・「UWP の XAML」で他プラットフォームアプリを目指した Uno Platform
※現在はバージョンアップでして WinUI
35

36. / 72
Uno Platform の状況
36
https://github.com/unoplatform/uno/graphs/commit-activity

37. / 72
Uno Platform の状況
37
https://github.com/jeromelaban

38. / 72
Uno Platform を始めよう
38

39. / 72
今日お話しすること
Build とは …… 9 ページ
Build セッションを効率よくチェックする方法 …… 10 ページ
Uno Platform とは？ …… 11 ページ
Uno Platform のソリューションの作り方 (世界におはよう) …… 12 ページ
WinUI のサンプルを Uno Platform に移植 (失敗) …… 5 ページ
WinUI の XAML を Uno Platform に移植 (独自) …… 13 ページ
39

40. / 72
Get Started
40
https://platform.uno/docs/articles/get-started-vs-2022.html

41. / 72
ワークロード
41

42. / 72
uno.check
42

43. / 72
uno.check
43

44. / 72
uno.check
44

45. / 72
Visual Studio ソリューションテンプレート
45

46. / 72
テンプレートから作成
46

47. / 72
Windows は普通の Windows アプリ
47
複数プラットフォーム
の
プロジェクト

48. / 72
右上のインストール
48

49. / 72
プロジェクト切り替え / XAML
49
プロジェクト切り替え
Microsoft の XAML / コントロール

50. / 72
実行
50
Windows Android WebAssembly
Gtk

51. / 72
サンプルを移植
51

52. / 72
今日お話しすること
Build とは …… 9 ページ
Build セッションを効率よくチェックする方法 …… 10 ページ
Uno Platform とは？ …… 11 ページ
Uno Platform のソリューションの作り方 (世界におはよう) …… 12 ページ
WinUI のサンプルを Uno Platform に移植 (失敗) …… 5 ページ
WinUI の XAML を Uno Platform に移植 (独自) …… 13 ページ
52

53. / 72
53
https://github.com/microsoft/WinUI-3-Demos

54. / 72
WinUI のサンプルアプリ
54

55. / 72
WinUI のサンプルアプリ
55

56. / 72
Uno に移植
56

57. / 72
サンプルを移植リベンジ
57

58. / 72
今日お話しすること
Build とは …… 9 ページ
Build セッションを効率よくチェックする方法 …… 10 ページ
Uno Platform とは？ …… 11 ページ
Uno Platform のソリューションの作り方 (世界におはよう) …… 12 ページ
WinUI のサンプルを Uno Platform に移植 (失敗) …… 5 ページ
WinUI の XAML を Uno Platform に移植 (独自) …… 13 ページ
58

59. / 72
Microsoft.UI.Xaml.Controls Namespace
59
https://docs.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls

60. / 72
WinUI プロジェクト
60

61. / 72
実行時エラー
61

62. / 72
エラーになるコントロールを消す
62

63. / 72
実行
63

64. / 72
Uno Platform に移植
64
存在しない

65. / 72
実行 - Windows
65

66. / 72
Uno Platform - WebAssembly
66
エラーになるので
RichEditBox を消す

67. / 72
実行 - WebAssembly
67
この状態からコントロール表示されるまで行かない
おそらくコントロールが多すぎて非常に重く時間がか
かるのかと(※要検証)

68. / 72
Uno Platform - Mobile
68
エラーになる
白い画面

69. / 72
実行 - Mobile
69
VariableSizedWrapGrid
を削除
分かりずらいですが
このコントロールで判断
してください

70. / 72
結論
WinUI の XAML で動く！
70

71. / 72
まとめ
71

72. / 72
忙しい日本の開発者の皆さんへ
・まずは観ておくセッションは多くない
・検索しよう
・4 倍速+字幕で気になるところを探そう
・気になったら一時停止でスライド画面を
・1 セッションは多くは 30 分 (4 倍速で 10 程度)
72

73. / 72
ありがとうございました。
73