.NET MAUI for .NET 7 で iOS,Android アプリを開発してみよう https://dotnetlab.connpass.com/event/264192/

1. .NET MAUI for .NET 7 で
iOS/Android アプリを開発してみよう
鈴⽊ 章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁 省庁業務サービスグループ ソリューションアーキテクト

2. Elastic
Technical Product Marketing
Manager/Evangelist
デジタル庁
省庁業務サービスグループ
ソリューションアーキテクト
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki

3. Xamarin + Azure Mobile Services…
https://www.slideshare.net/shosuz/microsoft-azure-mobile-services-xamarin#
https://www.slideshare.net/shosuz/solution-semniar-vs2013multidevice1209new
https://miso-soup3.hateblo.jp/entry/2016/04/27/011631

4. アジェンダ
.NET Conf の振り返り
Productivity
Native
Hybrid
Community
まとめ

5. What's new in .NET MAUI

6. クライアント
アプリの開発
が重要
Windows 10 & 11 devices
worldwide
iPhone & Android devices
worldwide
Sources: blog.google/products/android/android-12-beta/ ;
www.imore.com/apple-earnings-call-transcripts-q1-2021 ;

7. あらゆる消費者向けデバイスで優れた
パフォーマンスを発揮するネイティブアプリを、
単⼀のコードベースで開発する最も⽣産的
な⽅法
- 分離型ストレージ、センサー、ジオロケーション、カメラ等、
60以上のデバイスプラットフォーム機能にアクセスするため
の API を C# から直接利⽤できる
- 画像、アイコン、スプラッシュスクリーン等を含む、クロス
プラットフォームリソースをサポート
- すべてのデバイスターゲットに1つのプログラミング⾔語、
1つのコードベース、1つのプロジェクトシステムを使⽤
- .NET MAUI on Windows は WinUI をサポート、
Windows 10 および 11 のサポートされたバージョンで
すべての最新のネイティブ機能を使⽤できる
.NET マルチプラットフォームアプリ UI

8. .NET 7 における .NET MAUI
Unified
.NET
モバイル、
デスクトップ、
ハイブリッド
⽣産性の⾼い
開発
1つの基底クラスライブラリ
型の統⼀
CLI サポート
SDK スタイルプロジェクト
モダンサポートライフサイクル
Android
iOS
WinUI
Mac Catalyst
Blazor WebView
単⼀プロジェクト
Microsoft.Extensions
(マイクロソフト エクステンション)
.NET ホットリロード
XAML ホットリロード
ビジュアル診断
.NET 7
.NET MAUI
WinUI
Mac
Catalyst
Android
iOS
macOS
iOS

9. .NET の採⽤
Nov Dec Jan Feb Mar April May June
バージョン別アクティブユーザー数
(リリースからの⽉数)
.NET 5 .NET 6
1.7x
0
20
40
60
80
100
120
140
Feb-22 Mar-22 Apr-22 May-22 Jun-22
.NET MAUI 使⽤率
累積成⻑率
126%
>5M total

10. .NET MAUI のパフォーマンス向上
44%
68%
0
100
200
300
400
500
600
700
800
900
Xamarin.Android
.NET 6 Android Xamarin.Forms .NET 6 MAUI
起動時間(ミリ秒)

11. AndroidX
AlohaKit
CommunityToolkit.MVVM
CommunityToolkit.Maui
CommunityToolkit MauiCompat
CommunityToolkit Markup.MauiCompat
DevExpress
Facebook
FreshMvvm.Maui
Google APIs for iOS
Google Play Services Client
Libraries
GrialKit
MauiAnimation
Microsoft.Maui.Graphics
MR.Gestures
MSAL
Prism.Maui
Plugin.Fingerprint
Plugin.InAppBilling
Plugin.StoreReview
Plugin.ValidationRules
Progress Telerik UI for .NET
MAUI
ReactiveUI.Maui
Realm by MongoDB
Sentry
Shiny
SkiaSharp & Skottie
Syncfusion .NET MAUI Controls
TemplateUI
User Dialogs
コントロール、コンポーネント、プラグイン、ライブラリなど...

12. Productivity
Visual Studio 2022 + .NET MAUI =
アプリをより速く構築する

13. Visual Studio 2022の⽣産性
インテリジェントなコード編集
AI による開発⽀援
ライブシェアによる遠隔コラボレーション
C#、XAML、Razor インテリセンス
迅速なイテレーション
XAML、C#、Razor、CSS などのホットリロード
デバッグ時のUIプレビューとインスペクション
どこでもなんでも開発できる
Android エミュレータ、デバイス、WSA の使⽤
Windows から直接 iOS を開発
Xcode 経由で iOS シミュレータを使⽤
Mac および Windows ⽤の Visual Studio

14. Visual Studio for Mac
をインストールする
https://learn.microsoft.com/ja-
jp/visualstudio/mac/installation?view=vsm
ac-2022

15. Visual Studio 2022 for Mac
⾼速かつスムーズな IDE
完全ネイティブな macOS UI
Apple M1 のネイティブサポート
.NET 7 で構築
モダン .NET 7 開発
iOS、macOS、Android のネイティブアプリ
レスポンシブ Web UI
Web、クラウド、コンテナ開発
統合されたツール
XAML のホットリロードと UI のライブアップデート
iOS シミュレータと Android エミュレータへの
⾼速デプロイメント
強⼒なデバッギング、リファクタリング、インテリセンス

16. .NET Multi-platform App UI documentation
https://learn.microsoft.com/en-us/dotnet/maui/?view=net-maui-7.0

17. 1つのコードベース、1つのプロジェクト、複数のターゲット

18. Native
プラットフォーム体験は最⾼の体験

19. Native
• android.widget
• AndroidX libraries
• Java/Kotlin APIs
• UIKit
• ARKit, AVKit, CarPlay,
and dozens more
• Obj-C/Swift APIs
• Mac Catalyst
• UIKit + AppKit
• 数⼗種類のフレームワーク
Obj-C/Swift APIs
• Windows App SDK
• WinUI 3
• C++ APIs

20. 特⻑、新機能、Xamarin からの変更点
特⻑
MVVM & XAML
Android, iOS, macOS,
Windows
7 Layouts
44 Views
Maui.Essentials
Maui.Graphics
Xamarin.Forms Compat
CommunityToolkit.
Maui
Maui.Markup
Mvvm
新機能
BlazorWebView
Border
Shadows
GraphicsView
MenuBar
Window/Multi-Window
Default theme
AppIcon
SplashScreen
Fonts
Images
Shell flyout templates
Xamarin からの変更点
Color/Colors
Zeroʼd defaults
Namespace
More XAMLC
App Startup
Lifecycle Events
.NET workloads

21. Demo
.NET MAUI の⽣産性

22. 50以上のコントロール、
レイアウト、ビュー

23. マルチウインドウ

24. UI を越えて
• API へのシンプルなアクセス
• 各プラットフォームのサービスや
機能へのアクセス
• App actions
• Clipboard
• Device sensors
• File system
• Network
• Notifications
• その他…

25. Hybrid
Web アプリケーションにネイティブクライアント機能を搭載

26. Blazor –
.NETによるフルスタック Web アプリケーション

27. Blazor ハイブリッドアプリ
.NET MAUI
WinUI
Mac
Catalyst
Android
iOS
macOS
iOS
Blazor
• ネイティブと Web で UI コンポーネントを再利⽤
• ネイティブアプリコンテナと埋め込みコントロール
• .NET 上に構築されたマルチプラットフォームアプリケーション
UI
Blazor WebView

28. スタックを選択する
Reach Power
Electron,
CEF
Native App
with WebView
Native
App
Hybrid Native
BLAZOR + .NET
MAUI
.NET MAUI
PWA
Site
Web
BLAZOR
C#, HTML,
CSS
C#, XAML

29. Demo
.NET MAUI による Blazor ハイブリッド
marinasundstrom/item-catalog
https://github.com/marinasundstrom/item-catalog

31. Community
.NET MAUI コミュニティツールキット他

32. .NET MAUI コミュニティツールキット
https://learn.microsoft.com/ja-jp/dotnet/communitytoolkit/maui/

33. .NET MAUI コミュニティ ツールキットの特徴
• Free + Open Source Library
• Behaviors
• Converters
• Layouts
• Views (例︓Popup、DrawingView)
• .NET MAUI 開発者のために、.NET
MAUI 開発者が作成
https://github.com/CommunityToolkit/Maui

34. C# UI 開発者向け .NET MAUI コミュニティ ツールキット
• XAML が嫌いな⼈は、Maui.Markup Toolkit を使⽤すると、C# で UI コードを変更できる
• 流暢な C# 拡張メソッドを提供して、読み取り、書き込み、および保守をより簡単にする
https://github.com/CommunityToolkit/Maui.Markup

35. .NET MAUI コミュニティ ツールキットの新機能
• v1.4.0から紹介
https://github.com/CommunityToolkit/Maui/releases/tag/1.4.0

36. .NET MAUI コミュニティ ツールキット
v1.4.0 で DockLayout を追加
• DockLayout を使⽤すると、任意のビューをページの上、下、左、右、および中央に簡単に固定できる
• ドキュメント : https://learn.microsoft.com/dotnet/communitytoolkit/maui/layouts/docklayout
• サンプルコード :
https://github.com/CommunityToolkit/Maui/blob/1.4.0/samples/CommunityToolkit.Maui.Sample/Pages/Layouts/DockLa
youtPage.xaml

37. .NET MAUI コミュニティ ツールキット
v1.4.0 で DockLayout を追加
• DockLayout を使⽤すると、任意のビュー
をページの上、下、左、右、および中央に
簡単に固定できる
• ドキュメント
https://learn.microsoft.com/dotn
et/communitytoolkit/maui/layout
s/docklayout
• サンプルコード
https://github.com/CommunityTo
olkit/Maui/blob/1.4.0/samples/C
ommunityToolkit.Maui.Sample/Pa
ges/Layouts/DockLayoutPage.xa
ml

38. .NET MAUI コミュニティ ツールキット
v1.4.0 で DockLayout を追加
• DockLayout を使⽤すると、任意のビューをページの上、下、左、右、および中央に簡単に固定できる
• ドキュメント https://learn.microsoft.com/dotnet/communitytoolkit/maui/layouts/docklayout
• サンプルコード
https://github.com/CommunityToolkit/Maui/blob/1.4.0/samples/CommunityToolkit.Maui.Sample/Pages/Layouts/DockLayoutPage.xaml

39. .NET MAUI コミュニティ ツールキット
v1.4.0 で Expander を追加
• Expander を使⽤すると、ユーザーはビュー
(Expander.Header) をタップして、より多くのコンテンツ
(Expander.Content) を表⽰できます。
• ドキュメント
https://learn.microsoft.com/dotnet/communityto
olkit/maui/views/expander
• サンプルコード
https://github.com/CommunityToolkit/Maui/blob/
1.4.0/samples/CommunityToolkit.Maui.Sample/Pa
ges/Views/Expander/ExpanderPage.xaml

40. .NET MAUI コミュニティツールキット
v1.4.0 StateContainer を追加
• ContentPage が “IsLoading”、“Completed”、“Failed”
の場合のカスタム ルックを設定する
• ドキュメント
https://learn.microsoft.com/dotnet/communityto
olkit/maui/layouts/statecontainer
• サンプルコード
https://github.com/CommunityToolkit/Maui/blob/
1.4.0/samples/CommunityToolkit.Maui.Sample/Pa
ges/Layouts/StateContainerPage.xaml
UI をステート マシンに変えることができる

41. .NET MAUI コミュニティツールキット
v2.0.0 で Tizen サポートを追加
.NET MAUI Community Toolkit を Samsung アプリで使⽤できる
• ドキュメント https://learn.microsoft.com/dotnet/communitytoolkit/maui/#supported-versions
• サンプルコード
https://github.com/CommunityToolkit/Maui/blob/e80192b4384409b563d949d28c48d71e0c78d761/samples/CommunityToolkit.Maui.Sample
/CommunityToolkit.Maui.Sample.csproj#L6

42. .NET MAUI コミュニティツールキット
v3.0.0 は .NET 7.0 のサポートを追加
今後、新機能は .NET 7 のみをサポート
https://github.com/CommunityToolkit/Maui/releases/tag/3.0.0

43. .NET MAUI Community Toolkit
Maui.Markup Toolkit の新機能
最初に v1.2.0 について説明
https://github.com/CommunityToolkit/Maui.Markup/releases/tag/1.2.0

44. .NET MAUI コミュニティツールキット Maui.Markup v1.2.1
• カスタム コントロールを作成した場合でも、ソース
ジェネレーターを使⽤して、すべての
ITextAlignment コントロールの拡張メソッドを
⾃動⽣成
• ドキュメント
https://learn.microsoft.com/dotnet/com
munitytoolkit/maui/markup/extensions/
text-alignment-extensions
• サンプルコード
https://github.com/CommunityToolkit/
Maui.Markup/blob/main/samples/Com
munityToolkit.Maui.Markup.Sample/Pag
es/SettingsPage.cs
ITextAlignment の C# 拡張メソッドを追加

45. .NET MAUI コミュニティツールキット
Maui Markup v2.0.0
新機能は .NET 7 のみをサポート
https://github.com/CommunityToolkit/Maui.Markup/releases/tag/2.0.0

46. Template Studio for .NET MAUI
by Matt Lacey @mrlacey
• 新しいアプリを作成時に、プロジェクト
およびソリューションの名前と場所を
指定
• 必要なページや、機能を含められる
5 ステップのウィザード
• 新しいアプリを作成するときの時間を
⼤幅に節約
• 役⽴つ構造をコードベースに提供す
るのに役⽴つ
• さまざまな機能、機能、およびコード
の記述⽅法も確認できる
• Docs
https://github.com/mrlacey/
MauiAppAccelerator/issues
https://marketplace.visualstudio.com/items?itemName=MattLaceyLtd.MauiAppAccelerator
http://dlvr.it/SchDXl
新しい .NET MAUI アプリケーションの作成をより簡単かつ迅速に開始できるようにする Visual Studio 拡張機能

47. Template Studio for .NET MAUI
by Matt Lacey @mrlacey - 1
新しい .NET MAUI アプリケーションの作成をより簡単かつ迅速に開始できるようにする Visual Studio 拡張機能
https://marketplace.visualstudio.com/items?itemName=MattLaceyLtd.MauiAppAccelerator

48. Template Studio for .NET MAUI
by Matt Lacey @mrlacey - 2
新しい .NET MAUI アプリケーションの作成をより簡単かつ迅速に開始できるようにする Visual Studio 拡張機能
https://marketplace.visualstudio.com/items?itemName=MattLaceyLtd.MauiAppAccelerator

49. Template Studio for .NET MAUI
by Matt Lacey @mrlacey - 3
新しい .NET MAUI アプリケーションの作成をより簡単かつ迅速に開始できるようにする Visual Studio 拡張機能
https://marketplace.visualstudio.com/items?itemName=MattLaceyLtd.MauiAppAccelerator

50. まとめ

51. まとめ
.NET Conf の振り返り
Productivity
Native
Hybrid
Community
リソース他

52. .NET 7 ロードマップ
.NET MAUIはデスクトップアプリケーションに最適
プラットフォームの相互運⽤性
チャンネル⼀覧
モバイル
マップ
…等々
コンテキストメニュー
カーソル
ホバージェスチャー
右クリックのジェスチャー
タイトルバー
ツールチップ

53. リリーススケジュール、サポート、パッチ
• .NET MAUI のメジャーバージョンは、今後 .NET と共に出荷される予定です（.NET 7、.NET 8 など）。
• .NET MAUI は外部依存のあるオプションのワークロードです（Xcode と Android SDK ツールなど）。
• .NET MAUI のメジャーバージョンは、後継バージョン（メジャーバージョン）の出荷後6ヶ⽉間パッチを受け取ります。
• Xamarin SDK は、2024年5⽉までサポートを受けることができます。
.NET MAUI
.NET 7
Nov 2022
18ヶ⽉間（.NET 8出荷後6ヶ⽉間）のパッチ提供
.NET 8
Nov 2023
.NET 9
Nov 2024
Xamarin EOS May 2024
Xcode
14
Android
32, 33

54. リソース（本⽂中以外）
l Announcing .NET MAUI for .NET 7 General Availability
https://devblogs.microsoft.com/dotnet/dotnet-maui-dotnet-7/
l .NET MAUI を使⽤してモバイルおよびデスクトップ アプリを構築する
https://learn.microsoft.com/ja-jp/training/paths/build-apps-with-dotnet-maui/
l .NET MAUI for .NET 7 コードサンプル
https://learn.microsoft.com/ja-jp/samples/browse/?expanded=dotnet&products=dotnet-maui
l .NET Conf 2022 GitHub Repository
l ".NET Conf: Focus on MAUI" Code & Slides
https://github.com/dotnet-presentations/dotNETConf/tree/main/2022/FocusOnMAUI/Technical
l dotnet-presentations/dotNETConf
https://github.com/dotnet-presentations/dotNETConf/tree/main/2022
l PureWeen/dotnetConfDemo2022 (github.com)
https://github.com/PureWeen/dotnetConfDemo2022

55. https://ela.st/icon-tokyo-2022
ElasticON Tokyo
@ Westin Hotels & Resorts Tokyo (2022/11/30)

56. Thank you for your attention!

57. Demo
.NET MAUI Deep Dive

58. Desktop
Windows アプリケーション

59. .NET MAUI for .NET 7の⼀般提供開始について
• Foldable (*.
AndroidX.Window)
• Window Positioning
• Tool Tips
• Context Menus
• Accessibility
Improvements
• PointerGestureRecognizer
• PointerOver VSM
• TapGestureRecognizer
improvements
• Position Data
• Secondary

60. • 1つの要素に取り付けられ、セカンダリ
コマンドが表⽰
• セカンダリクリック（または指での⻑押し
など、同等の操作）によって呼び出し
• FlyoutBase.ContextFlyout
プロパティによって要素に関連付け
Context Menus

61. • 他のコントロールやオブジェクトに関する
追加情報を含むポップアップ
• ユーザーが関連するコントロールにフォー
カスを移すか、押し続けるか、ポインター
を上に置くと、⾃動的に表⽰
• ユーザーが関連するコントロールから
フォーカスを移す、押すのをやめる、また
はポインターを置くのをやめると消える
（ポインターがツールチップに向かって
移動している場合を除く）
Tool Tips

62. • ポインタ⼊⼒
• ポインタ退出
• ポインタ移動
• ポインタ位置データ
• ウィンドウの相対位置
• ビューの相対位置
Pointer Gesture
Recognizer

63. PointerOver VisualState

64. タップジェスチャーの認識性能向上
• Buttons Mask
• TappedEventArgs

65. 折りたたみ対応（※
AndroidX.Window）

66. Window Position/Location APIs

67. Accessibility Updates
• 前期に約35件のアクセシビリティに関するバグを解消。
• Windows デスクトップ体験に重点を置く
• アクセシビリティ検証
“Calendar.
2 of 2 level 1.
Selected.”

68. Honorable Desktop とマルチウインドウ機能
• MenuBar
• MenuFlyoutSeparator (new)
• Scoped Services

69. MenuBar

70. MS.EXT.DI によるスコープ付きサービス
• AddSingleton
• アプリレベルにスコープ
• AddScoped
• ウィンドウにスコープ
• AddTransient
• Single Use Types

71. Demo

72. Additional Notes
• Visual Studio for Mac 17.4 が GA
• 17.5 安定版を今すぐダウンロード
• Announcing .NET MAUI for .NET 7 General Availability - .NET Blog (microsoft.com)