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

8.7K Views

November 26, 22

スライド概要

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

profile-image

ヴイエムウェア株式会社 ソリューションアーキテクト本部 プリンシパルエンタープライズアーキテクト。 Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic で開発者向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中心に、技術者向けに最新技術の啓発活動を実施中。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニット ソリューションアーキテクトを兼務。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

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.

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

8.

.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

9.

.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

10.

.NET MAUI のパフォーマンス向上 起動時間(ミリ秒) 68% 900 800 700 600 44% 500 400 300 200 100 0 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/jajp/visualstudio/mac/installation?view=vsm ac-2022

15.

Visual Studio 2022 for Mac ⾼速かつスムーズな IDE モダン .NET 7 開発 統合されたツール 完全ネイティブな macOS UI Apple M1 のネイティブサポート .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 • 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

20.

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

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

28.

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

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

34.

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

35.

.NET MAUI コミュニティ ツールキットの新機能 https://github.com/CommunityToolkit/Maui/releases/tag/1.4.0 • v1.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 を追加 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

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 の 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

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

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.

リリーススケジュール、サポート、パッチ 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⽉までサポートを受けることができます。

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.

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

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 • PointerGestureRecognizer • Context Menus • PointerOver VSM • Accessibility Improvements • TapGestureRecognizer improvements • Position Data • Secondary

60.

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

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)