1. / 60
Xamarin で良くやってい
たあれを MAUI でする話
1
【オンライン】MAUI に注目する C# TOKYO イベント
石崎 充良

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

3. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
3

4. / 60
.NET MAUI はオープン ソースであり、
Xamarin.Forms の進化であり、モバイルか
らデスクトップのシナリオまで拡張され、
UI コントロールはパフォーマンスと拡張性
のために一から再構築されます。
Xamarin.Forms を使用してクロスプラット
フォーム ユーザー インターフェイスを構築
したことがある場合は、.NET MAUI と多く
の類似点に気付くでしょう。
MAUI とは？
4
https://docs.microsoft.com/ja-jp/dotnet/maui/what-is-maui

5. / 60
オープン ソース
Xamarin.Forms の進化
モバイルからデスクトップのシナリオまで
UI コントロールはパフォーマンスと拡張性の
ために一から再構築
Xamarin.Forms を使用したことがある場合
は、.NET MAUI と多くの類似点に気付くでしょ
う。
MAUI とは？
5

6. / 60
オープン ソース
Xamarin.Forms の進化
モバイルからデスクトップのシナリオまで
UI コントロールはパフォーマンスと拡張性の
ために一から再構築
Xamarin.Forms を使用したことがある場合
は、.NET MAUI と多くの類似点に気付くでしょ
う。
MAUI とは？
6

7. / 60
わかりやすく例えると
セ○で例えると
Xamarin.Forms → メ○ドライブ
MAUI → セ○サターン
7

8. / 60
わかりやすく例えると
現行機で例えると
Xamarin.Forms → Xb○x One
MAUI → Xb○x Series X/S
8

9. / 60
わかりやすく例えると
セ○で例えると
Xamarin.Forms → メ○ドライブ
MAUI → セ○サターン
現行機で例えると
Xamarin.Forms → Xb○x One
MAUI → Xb○x Series X/S
2022 年に メ○ドライブ で遊んでいるわけがない
みんな Xb○x Series X/S で遊んでる
9

10. / 60
喜ばしいサポート終了
「Xamarin サポート ポリシー」より
10
https://dotnet.microsoft.com/ja-jp/platform/support/policy/xamarin

11. / 60
もし終了しないと
.NET Framework 4.8 のアプリを
ずっとそのまま使い続けるか？
.NET に移行するか？
11

12. / 60
意思決定者の説得の悩み
.NET Framework 4.8 から
.NET へ移行をすべきだと思うが、
意思決定者をどう説得しよう？
※ Windows や Web アプリの場合
12

13. / 60
悩みは無用
サポート終了という理由で解決
13

14. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
14

15. / 60
コンテンツの後方互換
以前のコンテンツが使えるかは
現行機をすぐに買うかの
一つの判断基準
15

16. / 60
Xamarin.Forms 時代のコンテンツ
入門者向けに何度もイベントを開催しました。
16
https://github.com/chomado/xamarin-dev-doc/tree/master/hands-on

17. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
17

18. / 60
Microsoft Learn
Microsoft Learn
(https://learn.microsoft.com/ja-
jp/training/ )
を使え
18

19. / 60
ラーニングパス
.NET MAUI を使用してモバイルおよびデスクトップ アプリを構築する
19
https://learn.microsoft.com/ja-jp/training/paths/build-apps-with-dotnet-maui/

20. / 60
注意点 – 私にも難しいらしい
.NET MAUI を使用してモバイルおよびデスクトップ アプリを構築する
20
https://learn.microsoft.com/ja-jp/training/paths/build-apps-with-dotnet-maui/

21. / 60
注意点 – 私にも難しいらしい
.NET MAUI を使用してモバイルおよびデスクトップ アプリを構築する
21
https://learn.microsoft.com/ja-jp/training/paths/build-apps-with-dotnet-maui/

22. / 60
注意点 – 私にも難しいらしい
.NET MAUI を使用してモバイルおよびデスクトップ アプリを構築する
22
https://learn.microsoft.com/ja-jp/training/paths/build-apps-with-dotnet-maui/

23. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
23

24. / 60
見覚えのあるコンテンツ
Microsoft Learn の中でこんな UI のアプリを作るものがあります。
24
https://learn.microsoft.com/ja-jp/training/paths/build-apps-with-dotnet-maui/

25. / 60
見覚えのあるコンテンツ
Microsoft Learn の中でこんな UI のアプリを作るものがあります。
25
https://learn.microsoft.com/ja-jp/training/paths/build-apps-with-dotnet-maui/
https://github.com/ytabuchi/XamarinHOL/blob/master/XamarinHandsOn_Phoneword.pdf

26. / 60
以前よりも以前に何度もやったあれ
以前より以前に何度もイベントを開催した入門コンテンツ
26
https://github.com/ytabuchi/XamarinHOL

27. / 60
意思決定者に伝えるときのおすすめ
以前のあれには触れない
Xamarin.Forms のコンテンツ(※)が後方互換で
Microsoft Learn にある
※ Phonework ハンズオン
27

28. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
28

29. / 60
先にまとめから
日本語訳版がメンテされていない
日本語テキストとソースがあっていないので詰む
サンプルデータが既に 404
半完成ソースコードに手を入れるスタイル
ゼロから始める MAUI プロジェクトでは半完成ソースコードがない
プロジェクト作成時の設定に合わせてnamespace などアドリブが必要
29

30. / 60
先にまとめから
日本語訳版がメンテされていない
日本語テキストとソースがあっていないので詰む
サンプルデータが既に 404
半完成ソースコードに手お入れるスタイル
ゼロから始める MAUI プロジェクトでは半完成ソースコードがない
プロジェクト作成時の設定に合わせてnamespace などアドリブが必要
30
Xamarin.Forms → MAUI での変更はほとんどない

31. / 60
先にまとめから
日本語訳版がメンテされていない
日本語テキストとソースがあっていないので詰む
サンプルデータが既に 404
半完成ソースコードに手お入れるスタイル
ゼロから始める MAUI プロジェクトでは半完成ソースコードがない
プロジェクト作成時の設定に合わせてnamespace などアドリブが必要
31
Xamarin.Forms → MAUI での変更はほとんどない
でも、コンテンツ
として互換非対応

32. / 60
さあ、やってみよう
32

33. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
33

34. / 60
maui-check
環境をチェックして整えてくれるツール (dotnet tool)
34
.NET のバージョンをチェックして
アップデートをしてくれている

35. / 60
dotnet tool をチェックする
インストールされている dotnet tool にアップデートがあるかを確認する dotnet tool
35
https://www.nuget.org/packages/Rksoftware.DotNetToolUpdateCheckerConsole/

36. / 60
Visual Studio は整えてくれない
36

37. / 60
Visual Studio アップデート
37

38. / 60
余談
38

39. / 60
Xamarin だと
39

40. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
40

41. / 60
日本版はメンテされていない
41
https://github.com/chomado/xamarin-dev-doc/tree/master/hands-on
https://github.com/xamarin/dev-days-labs/tree/master/HandsOnLab
日本版
本家
2019 年 12 月
2018 年 09 月

42. / 60
半完成品に穴埋めするスタイル
42
https://github.com/chomado/xamarin-dev-doc/tree/master/hands-on
MAUI 版の半完成品がないので
アドリブでコードをコピペして
くる必要がある

43. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
43

44. / 60
ディレクトリ構成
44
Xamarin
MAUI
プロジェクト
フォルダ

45. / 60
Speaker.cs は半完成品
45
Xamarin
MAUI
アドリブでコピペ
同じようなコピペが複数

46. / 60
作るファイルのフォルダの違い
Xamarin MAUI
Common/DevDaysSpeakers.Shared/Models/Speaker.cs ../Shared/Models/Speaker.cs
Mobile/DevDaysSpeakers/ViewModels/SpeakersViewModel.cs ViewModels/SpeakersViewModel.cs
Mobile/DevDaysSpeakers/Views/SpeakersPage.cs Views/SpeakersPage.cs
Mobile/DevDaysSpeakers/Views/SpeakersCell.cs Views/SpeakersCell.cs
Mobile/DevDaysSpeakers/Views/DetailsPage.cs Views/DetailsPage.cs
Mobile/DevDaysSpeakers/Services/AzureService.cs Services/AzureService.cs
46
正確に再現しないと namespace にアドリブが必要な場面がある
C# に熟知していれば大丈夫

47. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
47

48. / 60
using や namespace を書く手順がない
48
https://github.com/xamarin/dev-days-
labs/blob/master/HandsOnLab/Start/Src/DevDaysSpeakers/ViewModels/SpeakersViewModel.cs
半完成品に既に書かれている
手順はここを穴埋め

49. / 60
ライブラリのインストール
49
Json.NET は nuget から
インストールが必要

50. / 60
using の削除
50
Xamarin.Forms は削除
コントロール名は変わらない ので
using の調整 だけで良い
(namespace が違うだけ)

51. / 60
using 削除だけで良い
51
MAUI の namespace は using しなくてよい
global using されるから

52. / 60
例外！ Color 構造体
Xamarin.Forms.Color 構造体
Microsoft.Maui.Graphics.Color クラスと Microsoft.Maui.Graphics.Colors クラス
色の定数フィールドは Colors に変更
Color.Transparent Colors.Transparent
52

53. / 60
スタートアップページ
AppShell.xaml のスタートアップページの設定を変更
53

54. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
54

55. / 60
実行
55
本当はアイコンが表示されていたはず
(サンプルデータがなくなっている)
動いた！

56. / 60
私が代わりに頑張っておきました
Fork して MAUI 版のソースコードにしてみました。
（ついでにアバターも頑張って探しました）
56
https://github.com/m-ishizaki/dev-days-labs/tree/master/HandsOnLab

57. / 60
メニュー
 MAUI とは
 後方互換
 結論
 後方互換の話
 とはいえ我々は知っておくべき
 環境のアップデート
 日本版と本家
 MAUI と Xamarin の違い
 コードの変更
 実行
 まとめ
57

58. / 60
まとめ
コンテンツ固有の問題でうまくいかなかった
コントロールの名前や C# でのロジックはそのまま動く
互換はばっちりだ！
Microsoft[ Learn の Phonework ハンズオンが本命
58

59. / 60
以前よりも以前に何度もやったあれ
以前より以前に何度もイベントを開催した入門コンテンツ
59
https://github.com/ytabuchi/XamarinHOL

60. / 60
真の結論（せかいのしんじつ）
Microsoft Learn
(https://learn.microsoft.com/ja-
jp/training/ )
を使え
60

61. / 60
ありがとうございました。
61