.NET MAUI – 1つのコードベース、複数のプラットフォーム

.NET MAUI – 1つのコードベース、複数のプラットフォーム

.NET 開発者は、Android、iOS、macOS、Windows 向けの優れたクロスプラットフォーム UI スタックを手に入れました

最終更新 2022/05/26 21:19
gui.h
読了目安 8 分
カテゴリ
MAUI
タグ
.NET C# MAUI

.NET マルチプラットフォーム アプリ UI へようこそ。このリリースは、.NET プラットフォームを統合する長年の旅路における新たなマイルストーンとなります。これにより、あなたと500万人以上の .NET 開発者は、Android、iOS、macOS、Windows 向けのファーストクラスのクロスプラットフォーム UI スタックを手に入れ、.NET ツールチェーン (SDK) とベースクラスライブラリ (BCL) を補完できます。.NET を使用してあらゆるものを構築できます。

Microsoft Build 2022 に参加して、.NET と Visual Studio を使用して任意のデバイス向けのネイティブアプリを構築するためのすべてのアップデートをご紹介します。» 詳細を見る

これは、.NET 開発者にとって満足のいくデスクトップおよびモバイルアプリケーション体験を創り出す旅の始まりに過ぎません。次のフェーズでは、.NET Framework および旧来のプロジェクトシステムのプラグイン、ライブラリ、サービスを .NET 6 と SDK スタイルのプロジェクトに取り込むことで、より広範な .NET エコシステムの基盤がすでに整えられています。現在利用可能な製品は次のとおりです。

以下はリンクのスクリーンショットです。リンクが多いため直接スクリーンショットを掲載しています。興味があれば原文をクリックしてご覧ください。

ライブラリを .NET 6 に移行する際のヘルプについては、Michael Rumpler (MR.Gestures)および Luis Matos(Plugin.ValidationRules)による最近のゲストブログ記事を参照してください。

18か月の現在のリリース計画のもと、.NET MAUI ワークロードは完全にサポートされ、.NET と同じ月次頻度でサービスが提供されます。.NET MAUI に対する私たちの継続的な注力点は依然として品質であり、皆様のフィードバックに基づき既知の問題に対処し、問題の優先順位を決定します。これには、Android、Android Wear、CarPlay、iOS、macOS、tvOS に特化したアプリケーションを構築するためのワークロード、.NET のネイティブツールキットを直接使用するためのワークロード、サポートライブラリ AndroidX、Facebook、Firebase、Google Play Services、SkiaSharp も含まれます。

.NET MAUI を使用すれば、妥協のないユーザー体験を実現しつつ、これまで以上に多くのコードを共有できます。.NET MAUI は、各プラットフォームが提供するトップクラスのアプリツールキット、モダンな開発者の生産性、そしてこれまでで最速のモバイルプラットフォームによるネイティブ UI を提供します。

ネイティブ UI、妥協なし

.NET MAUI の主な目標は、各プラットフォーム(Android、iOS、macOS、Windows)が特別に設計した最高のアプリ体験を提供できるようにすると同時に、豊富なスタイルとグラフィックスを通じて一貫したブランド体験を構築できるようにすることです。初期状態では、各プラットフォームは本来あるべき外観と動作を備えており、模倣のための追加のウィジェットやスタイルは必要ありません。たとえば、Windows 上の .NET MAUI は WinUI 3 によって支えられています。WinUI 3 は Windows アプリ SDK に付属する最高級のネイティブ UI コンポーネントです。

C# と XAML を使用して、40 以上のコントロール、レイアウト、ページを含む豊富なツールキットからアプリを生成します。モバイルコントロールにおける Xamarin の肩の上に、.NET MAUI はマルチウィンドウデスクトップアプリケーション、メニューバー、新しいアニメーション機能、ボーダー、角、シャドウ、グラフィックスなどのサポートを追加しています。さらに、以下で重点的に紹介する新機能があります: BlazorWebView。

.NET MAUI ドキュメントでコントロールの詳細を読む: ページ、レイアウト、ビュー

アクセシビリティを最優先

ネイティブ UI を使用する大きな利点の一つは、継承されるアクセシビリティサポートです。セマンティックサービスの上に構築することで、これまで以上に簡単に高度にアクセシブルなアプリケーションを作成できます。私たちは顧客と密接に協力し、アクセシビリティ開発のアプローチを再設計しました。これらの対話を通じて、.NET MAUI セマンティックサービスを設計し、以下を制御できるようにしました。

  • 説明、ヒント、見出しレベルなどのプロパティ
  • フォーカス
  • スクリーンリーダー
  • オートメーションプロパティ

.NET MAUI ドキュメントでアクセシビリティセマンティックサービスの詳細を読む。

ユーザーインターフェースを超えて

.NET MAUI は、加速度計、アプリアクション、ファイルシステム、通知など、各プラットフォームのサービスや機能にアクセスするためのシンプルな API を提供します。この例では、各プラットフォームのアプリアイコンにメニューオプションを追加するための app actions を構成しています。

AppActions.SetAsync(
    new AppAction("current_info", "Check Current Weather", icon: "current_info"),
    new AppAction("add_location", "Add a Location", icon: "add_location")
);

.NET MAUI ドキュメントでプラットフォームサービスと機能へのアクセスの詳細を読む。

容易なカスタマイズ

.NET MAUI コントロールの機能を拡張する場合でも、新しいプラットフォーム機能を構築する場合でも、.NET MAUI は拡張性を考慮して設計されているため、壁にぶつかることは決してありません。例として、Entry コントロールを取り上げます。Entry コントロールは、プラットフォームごとに異なる方法で表示されるコントロールの代表的な例です。Android ではテキストフィールドの下に下線が引かれますが、開発者は通常この下線を削除したいと考えます。.NET MAUI を使用すれば、プロジェクト全体において数行のコードで全てをカスタマイズできます。

#if ANDROID
Microsoft.Maui.Handlers.EntryHandler.Mapper.ModifyMapping("NoUnderline", (h, v) =>
{
    h.PlatformView.BackgroundTintList = ColorStateList.ValueOf(Colors.Transparent.ToPlatform());
});
#endif

以下は最近 Cayas Software による新しい Map プラットフォームコントロール作成の良いです。このブログ記事では、コントロールのハンドラーを作成し、各プラットフォームに実装し、.NET MAUI にコントロールを登録して利用可能にする方法を示しています。

.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler(typeof(MapHandlerDemo.Maps.Map),typeof(MapHandler));
})

.NET MAUI ドキュメントでハンドラーを使用したコントロールのカスタマイズの詳細を読む。

モダンな開発生産性

あらゆるものを構築できる技術として、.NET は共通の言語機能、パターン、プラクティス、ツールを使用して生産性を向上させることも目指しています。

.NET MAUI は .NET 6 で導入された新しい C# 10 の機能(グローバル using ディレクティブやファイルスコープの名前空間など)を活用しており、ファイル内の混乱や乱雑さを減らすのに最適です。.NET MAUI はマルチターゲットを新たなレベルに引き上げ、開発者は「単一プロジェクト」に集中するだけで済みます。

新しい .NET MAUI プロジェクトでは、プラットフォームはサブフォルダに配置され、開発者の大半の労力を費やすアプリケーション自体に焦点を当てます。プロジェクトの「Resources」フォルダでは、一箇所でアプリのフォント画像アプリアイコンスプラッシュスクリーン、生のリソース、スタイルを管理できます。.NET MAUI は各プラットフォームの独自の要件に合わせて最適化されます。

マルチプロジェクト vs 単一プロジェクト: 各プラットフォームに個別のプロジェクトを使用してソリューションを構築することも引き続きサポートされています。そのため、単一プロジェクトアプローチがいつアプリケーションに適しているかを選択できます。

.NET MAUI は ASP.NET および Blazor アプリケーションで使用される Microsoft.Extensions ライブラリの人気のある ビルダーパターン を、アプリの初期化と構成のための統一された方法として採用しています。ここでは、フォントの提供、プラットフォーム固有のライフサイクルイベントの活用、依存関係の構成、特定の機能の有効化、ベンダーコントロールツールキットの有効化などを行うことができます。

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureServices()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("Segoe-Ui-Bold.ttf", "SegoeUiBold");
                fonts.AddFont("Segoe-Ui-Regular.ttf", "SegoeUiRegular");
                fonts.AddFont("Segoe-Ui-Semibold.ttf", "SegoeUiSemibold");
                fonts.AddFont("Segoe-Ui-Semilight.ttf", "SegoeUiSemilight");
            });

        return builder.Build();
    }
}
public static class ServicesExtensions
{
    public static MauiAppBuilder ConfigureServices(this MauiAppBuilder builder)
    {
        builder.Services.AddMauiBlazorWebView();
        builder.Services.AddSingleton<SubscriptionsService>();
        builder.Services.AddSingleton<ShowsService>();
        builder.Services.AddSingleton<ListenLaterService>();
#if WINDOWS
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.Windows.NativeAudioService>();
#elif ANDROID
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.Android.NativeAudioService>();
#elif MACCATALYST
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.MacCatalyst.NativeAudioService>();
        builder.Services.TryAddSingleton< Platforms.MacCatalyst.ConnectivityService>();
#elif IOS
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.iOS.NativeAudioService>();
#endif

        builder.Services.TryAddTransient<WifiOptionsService>();
        builder.Services.TryAddSingleton<PlayerService>();

        builder.Services.AddScoped<ThemeInterop>();
        builder.Services.AddScoped<ClipboardInterop>();
        builder.Services.AddScoped<ListenTogetherHubClient>(_ =>
            new ListenTogetherHubClient(Config.ListenTogetherUrl));


        return builder;
    }
}

.NET MAUI の詳細については、MauiProgram によるアプリ起動および単一プロジェクトのドキュメントを参照してください。

Blazor をデスクトップとモバイルに

.NET MAUI は、ネイティブクライアントアプリケーションに参加したい Web 開発者にも最適です。.NET MAUI は Blazor と統合されているため、既存の Blazor Web UI コンポーネントをネイティブモバイルおよびデスクトップアプリケーションで直接再利用できます。.NET MAUI と Blazor を活用すれば、Web 開発スキルを再利用してクロスプラットフォームのネイティブクライアントアプリケーションを構築し、モバイル、デスクトップ、Web 間で UI が一貫したアプリケーションを構築できます。

.NET MAUI はデバイス上で Blazor コンポーネントをネイティブに実行し(WebAssembly 不要)、埋め込み Web ビューコントロールにレンダリングします。Blazor コンポーネントは .NET プロセス内でコンパイル・実行されるため、Web プラットフォームに限定されず、通知、Bluetooth、地理位置情報、センサー、ファイルシステムなどのあらゆるネイティブプラットフォーム機能を活用できます。さらに、Blazor Web UI の隣にネイティブ UI コントロールを追加することもできます。これはまったく新しいハイブリッドアプリケーションです: Blazor Hybrid!

.NET MAUI と Blazor を使い始めるのは非常に簡単です。付属の .NET MAUI Blazor App プロジェクトテンプレートを使用するだけです。

このテンプレートはすべて設定済みなので、HTML、CSS、C# を使用して .NET MAUI Blazor アプリの構築を開始できます。.NET MAUI 向け Blazor Hybrid チュートリアルでは、最初の .NET MAUI Blazor アプリを構築して実行する手順を説明します。

または、既存の .NET MAUI アプリに BlazorWebView コントロールを追加して、Blazor コンポーネントを使い始めたい場所を指定します。

<BlazorWebView HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type my:Counter}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

Blazor Hybrid サポートは現在 WPF および Windows フォームでも利用可能であり、既存のデスクトップアプリケーションを Web 上で動作するように、または .NET MAUI を使用してクロスプラットフォームで動作するように近代化できます。WPF および WinForms 用の BlazorWebView コントロールは NuGet で入手できます。WPF および WinForms 向けの Blazor Hybrid チュートリアルを参照して、使用開始方法を学んでください。

.NET MAUI、WPF、Windows フォームにおける Blazor Hybrid サポートの詳細については、Blazor Hybrid ドキュメントを参照してください。

速度に最適化

.NET MAUI はパフォーマンス向上のために設計されています。特に Android において、できるだけ迅速にアプリケーションを起動することがいかに重要か、ご指摘いただいています。.NET MAUI の UI コントロールは、ネイティブプラットフォームコントロール上で薄く疎結合なハンドラーマッパーパターンを実装しています。これにより、UI レンダリングのレイヤーが削減され、コントロールのカスタマイズが簡素化されます。

.NET MAUI のレイアウトは、一貫したマネージャーパターンを使用するように設計されており、測定と配置のループを最適化して、UI のレンダリングと更新を高速化します。StackLayout に加えて、HorizontalStackLayoutVerticalStackLayout など、特定のシナリオ向けに事前最適化されたレイアウトも用意されています。

この旅の当初から、.NET 6 への移行時に起動パフォーマンスを向上させ、アプリサイズを維持または削減するという目標を設定していました。一般提供(GA)時点で、.NET MAUI は起動パフォーマンスが 34.9% 向上し、Android 版 .NET は 39.4% 向上しました。これらの利益は複雑なアプリケーションにも及びます。.NET Podcast サンプルアプリケーションは、開始時点で 1299 ミリ秒の起動時間でしたが、GA では 814.2 ミリ秒で動作し、プレビュー13 以降 37.3% 向上しました。

デフォルトでは、これらの設定は有効になっており、リリースビルドでこれらの最適化が提供されます。

これらの結果を達成するために行った作業に関する詳細なブログ記事にご期待ください。

今すぐ始める

Windows で .NET MAUI を使用開始するには、Visual Studio 2022 Preview をインストールするか、バージョン 17.3 Preview 1.1 に更新してください。インストーラーで、ワークロード「.NET マルチプラットフォーム アプリ UI 開発」を選択します。

Mac で .NET MAUI を使用するには、新しい Visual Studio 2022 Preview for Mac (17.3 Preview 1)をインストールしてください。

Visual Studio 2022 は今年後半に .NET MAUI ツールサポートをリリースする予定です。本日の Windows では、XAML および .NET ホットリロード、XAML、C#、Razor、CSS 向けの強力なエディターを使用して開発サイクルを加速できます。XAML ライブプレビューとライブビジュアルツリーを使用することで、デバッグ中に UI のプレビュー、配置、検査、編集が可能です。.NET MAUI の新しい単一プロジェクト体験には、マルチプラットフォームターゲティングを使用してアプリを構成するための視覚的な編集体験を提供するプロジェクトプロパティページが含まれています。

Mac では、単一プロジェクトおよびマルチプロジェクトの .NET MAUI ソリューションをロードして、美しい真新しいネイティブの Visual Studio 2022 for Mac 体験でデバッグできるようになりました。.NET MAUI アプリケーション開発の生産性を高めるための追加機能は、今後のプレビュー版で提供される予定です。

ライブラリを .NET MAUI に更新し、新しい .NET MAUI プロジェクトを作成することを今すぐお勧めします。Xamarin プロジェクトを .NET MAUI に変換する前に、依存関係、Visual Studio の .NET MAUI サポート状態、公開されている既知の問題を確認し、適切な変換時期を判断してください。Xamarin は引き続きモダンライフサイクルポリシーのサポートを受け、最新メジャーバージョンから 2 年間サポートされることに留意してください。

リソース

フィードバックをお待ちしています

ぜひご意見をお聞かせください!問題が発生した場合は、GitHub の dotnet/maui でレポートを提出してください。

まとめ

.NET MAUI を使用すれば、単一のコードベースから Android、iOS、macOS、Windows 向けのネイティブアプリケーションを構築でき、.NET で実践しているのと同じ生産性パターンを使用できます。.NET MAUI の薄く疎結合な UI とレイアウトアーキテクチャ、および単一プロジェクト機能により、複数のプラットフォームの独自の要件に同時に対処するのではなく、一つのアプリケーションに集中できます。.NET 6 により、Android だけでなく、すべてのプラットフォームターゲットに対してパフォーマンスの改善を提供しています。

より少ないプラットフォームコード、より多くの共有コード、一貫した標準とパターン、軽量かつ高性能なアーキテクチャ、モバイルとデスクトップのネイティブ体験 – これは始まりに過ぎません。今後数ヶ月で、ライブラリとより広範なエコシステムが .NET MAUI とともに、.NET 開発者にとってクロスプラットフォームアプリケーション開発の新時代を定義し、あなたとあなたの組織がより多くのことを達成できるようになることを楽しみにしています。

今すぐ試す

ブログ園より転載

原文著者: https://www.cnblogs.com/springhgui/p/16304492.html

原文リンク: gui.h

翻訳元アドレス: https://devblogs.microsoft.com/dotnet/introducing-dotnet-maui-one-codebase-many-platforms/

さらに探索

関連読書

その他の記事
同じカテゴリ / 同じタグ 2023/01/12

Maui Blazor でカメラ機能を実装する方法

Maui Blazor ではインターフェースが WebView でレンダリングされるため、Android のカメラを使用する際に画面コンポーネントにバインドする必要があるため、カメラを取得できません。

続きを読む