NET MAUI for .NET 7 for iOS, Android app development

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

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

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

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

クライアント
アプリの開発
が重要
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 ;

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

.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

.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

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

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
コントロール、コンポーネント、プラグイン、ライブラリなど...

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

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

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

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

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

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

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

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

特⻑、新機能、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

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

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

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

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

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

スタックを選択する
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

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

NET MAUI for .NET 7 for iOS, Android app development

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

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

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

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

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

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

• 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

• 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

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

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 をステートマシンに変えることができる

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

v3.0.0 は .NET 7.0 のサポートを追加
今後、新機能は .NET 7 のみをサポート
https://github.com/CommunityToolkit/Maui/releases/tag/3.0.0

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

.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# 拡張メソッドを追加

Maui Markup v2.0.0
新機能は .NET 7 のみをサポート
https://github.com/CommunityToolkit/Maui.Markup/releases/tag/2.0.0

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 拡張機能

by Matt Lacey @mrlacey - 1

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

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

リリーススケジュール、サポート、パッチ
• .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

リソース（本⽂中以外）
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

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

Desktop
Windows アプリケーション

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

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

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

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

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

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

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

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

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

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

NET MAUI for .NET 7 for iOS, Android app development

Recommended

More Related Content

What's hot (20)

Similar to NET MAUI for .NET 7 for iOS, Android app development (20)

More from Shotaro Suzuki (20)

NET MAUI for .NET 7 for iOS, Android app development