NET MAUI for .NET 7 for iOS, Android app development
9.9K Views
November 26, 22
スライド概要
.NET MAUI for .NET 7 で iOS,Android アプリを開発してみよう
https://dotnetlab.connpass.com/event/264192/
FPT ジャパン エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で13年間、テクニカルエバンジェリストとして .NET、C#、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動 (DevRel) 。Dell、Accenture、Elastic、VMware 等での DevRel 後、2024年11月1日より現職で DevRel 活動を開始。NVIDIA との戦略的協業 AI GPU クラウド、Azure/AWS/GC 上の AI ＆データ関連サービスのマーケティング、プリセールス、教育、関連新規サービス開発。元内閣官房 IT 総合戦略室 政府 CIO 補佐官（兼務）、元デジタル庁 ソリューションアーキテクト（兼務）。
関連スライド
各ページのテキスト
.NET MAUI for .NET 7 で iOS/Android アプリを開発してみよう 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務サービスグループ ソリューションアーキテクト
Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist デジタル庁 省庁業務サービスグループ ソリューションアーキテクト 元 Microsoft Technical Evangelist
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 まとめ
What's new in .NET MAUI
クライアント アプリの開発 が重要 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 ;
.NET マルチプラットフォームアプリ UI あらゆる消費者向けデバイスで優れた パフォーマンスを発揮するネイティブアプリを、 単⼀のコードベースで開発する最も⽣産的 な⽅法 - 分離型ストレージ、センサー、ジオロケーション、カメラ等、 60以上のデバイスプラットフォーム機能にアクセスするため の API を C# から直接利⽤できる - 画像、アイコン、スプラッシュスクリーン等を含む、クロス プラットフォームリソースをサポート - すべてのデバイスターゲットに1つのプログラミング⾔語、 1つのコードベース、1つのプロジェクトシステムを使⽤ - .NET MAUI on Windows は WinUI をサポート、 Windows 10 および 11 のサポートされたバージョンで すべての最新のネイティブ機能を使⽤できる
.NET 7 における .NET MAUI Unified .NET 1つの基底クラスライブラリ 型の統⼀ CLI サポート SDK スタイルプロジェクト モダンサポートライフサイクル .NET 7 .NET MAUI モバイル、 デスクトップ、 ハイブリッド Android iOS WinUI Mac Catalyst Blazor WebView ⽣産性の⾼い 開発 単⼀プロジェクト Microsoft.Extensions (マイクロソフト エクステンション) .NET ホットリロード XAML ホットリロード ビジュアル診断 WinUI Mac Catalyst macOS iOS iOS Android
.NET の採⽤ .NET MAUI 使⽤率 バージョン別アクティブユーザー数 1.7x (リリースからの⽉数) >5M total 累積成⻑率 126% 140 120 100 80 60 40 20 0 Nov Dec Jan Feb .NET 5 Mar April .NET 6 May June Feb-22 Mar-22 Apr-22 May-22 Jun-22
.NET MAUI のパフォーマンス向上 起動時間(ミリ秒) 68% 900 800 700 600 44% 500 400 300 200 100 0 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
- https://github.com/xamarin/AndroidX
- https://github.com/jsuarezruiz/AlohaKit
- https://docs.microsoft.com/windows/communitytoolkit/mvvm/introduction
- https://docs.microsoft.com/dotnet/communitytoolkit/maui/
- https://www.nuget.org/packages/Xamarin.CommunityToolkit.MauiCompat/
- https://www.nuget.org/packages/Xamarin.CommunityToolkit.Markup.MauiCompat/
- https://www.devexpress.com/maui/
- https://github.com/xamarin/FacebookComponents
- https://www.nuget.org/packages/FreshMvvm.Maui
- https://github.com/xamarin/GoogleAPIsForiOSComponents
- https://github.com/xamarin/GooglePlayServicesComponents
- https://grialkit.com/grial4-special-ms-build-release
- https://github.com/jsuarezruiz/MauiAnimation
- https://docs.microsoft.com/dotnet/maui/user-interface/graphics/
- https://www.mrgestures.com/
- https://github.com/AzureAD/microsoft-authentication-library-for-dotnet
- https://www.nuget.org/packages/Prism.Maui/
- https://www.nuget.org/packages/Plugin.Fingerprint/
- https://www.nuget.org/packages/Plugin.InAppBilling/
- https://www.nuget.org/packages/Plugin.StoreReview/
- https://www.nuget.org/packages/Plugin.ValidationRules
- https://www.telerik.com/maui-ui?utm_medium=referral&utm_source=microsoftblogs&utm_campaign=maui-awareness-ms-ga-announcement
- https://www.nuget.org/packages/ReactiveUI.Maui/
- https://github.com/realm/realm-dotnet
- https://sentry.io/for/dot-net/?platform=sentry.dotnet.maui
- https://shinylib.net/
- https://github.com/mono/SkiaSharp
- https://www.syncfusion.com/maui-controls
- https://github.com/jsuarezruiz/TemplateUI
- https://github.com/aritchie/userdialogs
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/jajp/visualstudio/mac/installation?view=vsm ac-2022
Visual Studio 2022 for Mac ⾼速かつスムーズな IDE モダン .NET 7 開発 統合されたツール 完全ネイティブな macOS UI Apple M1 のネイティブサポート .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 • UIKit • AndroidX libraries • ARKit, AVKit, CarPlay, • Java/Kotlin APIs and dozens more • Obj-C/Swift APIs • Mac Catalyst • Windows App SDK • UIKit + AppKit • WinUI 3 • 数⼗種類のフレームワーク • C++ APIs Obj-C/Swift APIs
特⻑、新機能、Xamarin からの変更点 特⻑ 新機能 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 Color/Colors Zeroʼd defaults Namespace More XAMLC App Startup Lifecycle Events .NET workloads
Demo .NET MAUI の⽣産性
50以上のコントロール、 レイアウト、ビュー
マルチウインドウ
UI を越えて • API へのシンプルなアクセス • 各プラットフォームのサービスや 機能へのアクセス • • • • • • • App actions Clipboard Device sensors File system Network Notifications その他…
Hybrid Web アプリケーションにネイティブクライアント機能を搭載
Blazor – .NETによるフルスタック Web アプリケーション
Blazor ハイブリッドアプリ Blazor • ネイティブと Web で UI コンポーネントを再利⽤ • ネイティブアプリコンテナと埋め込みコントロール Blazor WebView • .NET 上に構築されたマルチプラットフォームアプリケーション UI .NET MAUI WinUI Mac Catalyst macOS iOS iOS Android
スタックを選択する BLAZOR C#, HTML, CSS BLAZOR + .NET MAUI .NET MAUI C#, XAML Reach Power Site PWA Web Electron, CEF Native App with WebView Hybrid Native App Native
Demo .NET MAUI による Blazor ハイブリッド marinasundstrom/item-catalog https://github.com/marinasundstrom/item-catalog
Community .NET MAUI コミュニティツールキット他
.NET MAUI コミュニティツールキット https://learn.microsoft.com/ja-jp/dotnet/communitytoolkit/maui/
.NET MAUI コミュニティ ツールキットの特徴 https://github.com/CommunityToolkit/Maui • Free + Open Source Library • Behaviors • Converters • Layouts • Views (例︓Popup、DrawingView) • .NET MAUI 開発者のために、.NET MAUI 開発者が作成
C# UI 開発者向け .NET MAUI コミュニティ ツールキット https://github.com/CommunityToolkit/Maui.Markup • • XAML が嫌いな⼈は、Maui.Markup Toolkit を使⽤すると、C# で UI コードを変更できる 流暢な C# 拡張メソッドを提供して、読み取り、書き込み、および保守をより簡単にする
.NET MAUI コミュニティ ツールキットの新機能 https://github.com/CommunityToolkit/Maui/releases/tag/1.4.0 • v1.4.0から紹介
.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
.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
.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
.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
.NET MAUI コミュニティツールキット v1.4.0 StateContainer を追加 UI をステート マシンに変えることができる • 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
.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
.NET MAUI コミュニティツールキット 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 の C# 拡張メソッドを追加 • カスタム コントロールを作成した場合でも、ソース ジェネレーターを使⽤して、すべての 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
.NET MAUI コミュニティツールキット 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 新しい .NET MAUI アプリケーションの作成をより簡単かつ迅速に開始できるようにする Visual Studio 拡張機能 https://marketplace.visualstudio.com/items?itemName=MattLaceyLtd.MauiAppAccelerator http://dlvr.it/SchDXl • • • • • • 新しいアプリを作成時に、プロジェクト およびソリューションの名前と場所を 指定 必要なページや、機能を含められる 5 ステップのウィザード 新しいアプリを作成するときの時間を ⼤幅に節約 役⽴つ構造をコードベースに提供す るのに役⽴つ さまざまな機能、機能、およびコード の記述⽅法も確認できる Docs https://github.com/mrlacey/ MauiAppAccelerator/issues
Template Studio for .NET MAUI by Matt Lacey @mrlacey - 1 新しい .NET MAUI アプリケーションの作成をより簡単かつ迅速に開始できるようにする Visual Studio 拡張機能 https://marketplace.visualstudio.com/items?itemName=MattLaceyLtd.MauiAppAccelerator
Template Studio for .NET MAUI by Matt Lacey @mrlacey - 2 新しい .NET MAUI アプリケーションの作成をより簡単かつ迅速に開始できるようにする Visual Studio 拡張機能 https://marketplace.visualstudio.com/items?itemName=MattLaceyLtd.MauiAppAccelerator
Template Studio for .NET MAUI by Matt Lacey @mrlacey - 3 新しい .NET MAUI アプリケーションの作成をより簡単かつ迅速に開始できるようにする Visual Studio 拡張機能 https://marketplace.visualstudio.com/items?itemName=MattLaceyLtd.MauiAppAccelerator
まとめ
まとめ .NET Conf の振り返り Productivity Native Hybrid Community リソース他
.NET 7 ロードマップ .NET MAUIはデスクトップアプリケーションに最適 コンテキストメニュー 右クリックのジェスチャー カーソル タイトルバー ホバージェスチャー ツールチップ プラットフォームの相互運⽤性 チャンネル⼀覧 モバイル マップ …等々
リリーススケジュール、サポート、パッチ 18ヶ⽉間（.NET 8出荷後6ヶ⽉間）のパッチ提供 .NET MAUI .NET 7 Nov 2022 .NET 8 Nov 2023 .NET 9 Nov 2024 14 Xcode 32, 33 Android Xamarin EOS May 2024 • .NET MAUI のメジャーバージョンは、今後 .NET と共に出荷される予定です（.NET 7、.NET 8 など）。 • .NET MAUI は外部依存のあるオプションのワークロードです（Xcode と Android SDK ツールなど）。 • .NET MAUI のメジャーバージョンは、後継バージョン（メジャーバージョン）の出荷後6ヶ⽉間パッチを受け取ります。 • Xamarin SDK は、2024年5⽉までサポートを受けることができます。
リソース（本⽂中以外） 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://devblogs.microsoft.com/dotnet/dotnet-maui-dotnet-7/
- https://learn.microsoft.com/ja-jp/training/paths/build-apps-with-dotnet-maui/
- https://learn.microsoft.com/ja-jp/samples/browse/?expanded=dotnet&products=dotnet-maui
- https://github.com/dotnet-presentations/dotNETConf/tree/main/2022/FocusOnMAUI/Technical
- https://github.com/dotnet-presentations/dotNETConf/tree/main/2022
- https://github.com/PureWeen/dotnetConfDemo2022
ElasticON Tokyo @ Westin Hotels & Resorts Tokyo (2022/11/30) https://ela.st/icon-tokyo-2022
Thank you for your attention!
Demo .NET MAUI Deep Dive
Desktop Windows アプリケーション
.NET MAUI for .NET 7の⼀般提供開始について • Foldable (*. AndroidX.Window) • Window Positioning • Tool Tips • PointerGestureRecognizer • Context Menus • PointerOver VSM • Accessibility Improvements • TapGestureRecognizer improvements • Position Data • Secondary
Context Menus • 1つの要素に取り付けられ、セカンダリ コマンドが表⽰ • セカンダリクリック（または指での⻑押し など、同等の操作）によって呼び出し • FlyoutBase.ContextFlyout プロパティによって要素に関連付け
Tool Tips • 他のコントロールやオブジェクトに関する 追加情報を含むポップアップ • ユーザーが関連するコントロールにフォー カスを移すか、押し続けるか、ポインター を上に置くと、⾃動的に表⽰ • ユーザーが関連するコントロールから フォーカスを移す、押すのをやめる、また はポインターを置くのをやめると消える （ポインターがツールチップに向かって 移動している場合を除く）
Pointer Gesture Recognizer • ポインタ⼊⼒ • ポインタ退出 • ポインタ移動 • ポインタ位置データ • ウィンドウの相対位置 • ビューの相対位置
PointerOver VisualState
タップジェスチャーの認識性能向上 • Buttons Mask • TappedEventArgs
折りたたみ対応（※ AndroidX.Window）
Window Position/Location APIs
Accessibility Updates • 前期に約35件のアクセシビリティに関するバグを解消。 • Windows デスクトップ体験に重点を置く • アクセシビリティ検証 “Calendar. 2 of 2 level 1. Selected.”
Honorable Desktop とマルチウインドウ機能 • MenuBar • MenuFlyoutSeparator (new) • Scoped Services
MenuBar
MS.EXT.DI によるスコープ付きサービス • AddSingleton • アプリレベルにスコープ • AddScoped • ウィンドウにスコープ • AddTransient • Single Use Types
Demo
Additional Notes • Visual Studio for Mac 17.4 が GA • 17.5 安定版を今すぐダウンロード • Announcing .NET MAUI for .NET 7 General Availability - .NET Blog (microsoft.com)