MAUI クロスプラットフォームポッドキャストアプリケーション(Conf 2021)

紹介

.NET Conf 2021 において、マイクロソフトは .NET6 に基づくクロスプラットフォームアプリケーションを披露しました。ASP.NET Core、Blazor、.NET MAUI、マイクロサービスなどの機能を備えています。 ASP.NET Core と Blazor を搭載した .NET Podcasts アプリの動作バージョンをお試しください：https://dotnetpodcasts.azurewebsites.net/

プロジェクト体系

モバイルとデスクトップ：iOS、Android、macOS、Windows 向けのネイティブ .NET MAUI アプリケーション

• Web：Blazor WebAssembly アプリケーションと ASP.NET Core Blazor ウェブサイト
• API：ASP.NET Core Web API、インジェストワーカー、ポッドキャスト更新ワーカー
• Blazor ハイブリッドアプリケーション：.NET MAUI と Blazor のハイブリッドアプリケーションのサンプル

MAUI プロジェクト

単一のコードベースで複数プラットフォームに対応するプロジェクトソリューション。Android、iOS、macOS、Windows 向けのネイティブ .NET アプリケーションです。ソリューションは以下の通りです。

機能紹介

• Global Usings

グローバル参照：任意の using 文の前に Global キーワードを追加するだけで、その参照がグローバルになります。

global using Microsoft.Maui;

• 組み込みテーマ

UserAppTheme を使用して、プラットフォームに応じたテーマ設定（Light/Dark）を変更できます。

switch (Settings.Theme)
{
    default:
    case OSAppTheme.Light:
        App.Current.UserAppTheme = OSAppTheme.Light;
        break;
    case OSAppTheme.Dark:
        App.Current.UserAppTheme = OSAppTheme.Dark;
        break;
}

• メッセージセンター

mvvmlight の Messenger に似た機能で、Subscribe/Send/Unsubscribe を使って購読、発行、購読解除が行えます。

// 購読
MessagingCenter.Instance.Subscribe<string>("","",async (sender) =>
				{
		                    //...
				});

// 購読解除
MessagingCenter.Instance.Unsubscribe<string>("", "");

// 発行
MessagingCenter.Instance.Send<string>("", "");

• 組み込みコンテナ

MAUI で提供される統一的な登録およびコンテナサービス。MauiAppBuilder を使用してカスタムサービスを追加し、MauiWinUIApplication から対応するサービスを取得できます。

// サービスの登録
public static MauiAppBuilder ConfigureServices(this MauiAppBuilder builder)
{
    builder.Services.TryAddSingleton<PlayerService>();
}

// プラットフォームのコンテナサービスの呼び出し
public static class ServicesProvider
{
    public static TService GetService<TService>()
        => Current.GetService<TService>();

    public static IServiceProvider Current
        =>
#if WINDOWS10_0_17763_0_OR_GREATER
        MauiWinUIApplication.Current.Services;
#elif ANDROID
        MauiApplication.Current.Services;
#elif IOS || MACCATALYST
        MauiUIApplicationDelegate.Current.Services;
#else
        null;
#endif
}

統一リソース管理

MAUI では、フォント、アイコン、スタイル、ローカルリソースファイルなどのリソース管理とアクセスが統一されています。

フォントへのアクセス

<Setter Property="FontFamily" Value="SegoeUiSemibold" />

画像リソースへのアクセス

<image Source="xxx.png" />

ローカライズリソース

xmlns:res="clr-namespace:Microsoft.NetConf2021.Maui.Resources.Strings"

<label Text="{x:Static res:AppResource.Categories}" />

プラットフォーム化

XAML やコード内で、OnPlatform や OnIdiom を使用して、プラットフォームやデバイスタイプに応じて異なる UI やビジネスロジックを処理できます。

異なるプラットフォームでのフォント設定

<label FontSize="{OnPlatform UWP=24, macOS=24, Android=14,iOS=14}" />

異なるデバイスでの設定

<GridItemsLayout Span="{OnIdiom Phone=2, Tablet=3, Desktop=3}" />

Essentials

組み込みの Essentials は、ネイティブのネットワーク WIFI、Bluetooth などへのアクセスを提供します。

// ネットワーク接続の確認
var current = Connectivity.NetworkAccess;
if (current != NetworkAccess.Internet)
{
    //...
}

// WIFI 接続の有無を確認
var profiles = Connectivity.ConnectionProfiles;
var hasWifi = profiles.Contains(ConnectionProfile.WiFi);

if (hasWifi)
{
    //...
}

ハイブリッドモード

XAML 内で BlazorWebView を使用します。

xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"

<b:BlazorWebView
  x:Name="MyWebView"
  Margin="10,0"
  HostPage="wwwroot/index.html"
  BackgroundColor="{AppThemeBinding Light={StaticResource Grey1}, Dark={StaticResource Grey9}}"
>
  <b:BlazorWebView.RootComponents>
    <b:RootComponent
      Selector="app"
      ComponentType="{x:Type pages:ListenTogetherComponent}"
    />
  </b:BlazorWebView.RootComponents>
</b:BlazorWebView>

まとめ

プロジェクトは GitHub で公開されています。https://github.com/microsoft/dotnet-podcasts で、ソースコードからさらなる機能をご確認いただけます。