.NET MAUI+blazorでプラットフォーム固有コードを呼び出す。

概要

MAUIや以前のxamarinであれば、解説記事が出てくるのですが、blazorを組み合わせたものは無いなと思ったので書こうかと思いました。

参考mauiでプラットフォーム固有のコード

blazorで書いてみる

インターフェース

Serviceディレクトリを作成する。

［プロジェクトディレクトリ］/Service/IDeviceNameService.cs

namespace TestApp.Service
{
    public interface IDeviceNameService
    {
        string GetDeviceName();
    }
}

MauiProgram.csでそれぞれのコードを登録する

//省略
#if ANDROID
using TestApp.Platforms.Android;
#elif WINDOWS
using TestApp.Platforms.Windows;
#endif



namespace TestApp;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		//省略

		#if ANDROID
				builder.Services.AddSingleton<IDeviceNameService, AndroidDeviceNameService>();
		#elif WINDOWS
				builder.Services.AddSingleton<IDeviceNameService, WindowsDeviceNameService>();
		#endif


		return builder.Build();
	}
}

プラットフォーム固有のコード windows

［プロジェクトディレクトリ］/Platforms/Windows/WindowsDeviceNameService.cs

using TestApp.Service;

namespace TestApp.Platforms.Windows
{
    public class WindowsDeviceNameService: IDeviceNameService
    {
        public string GetDeviceName()
        {
            return "Windows Device";
        }
    }
}

プラットフォーム固有のコード Android

［プロジェクトディレクトリ］/Platforms/Android/AndroidDeviceNameService.cs

using TestApp.Service;

namespace TestApp.Platforms.Android
{
    public class AndroidDeviceNameService: IDeviceNameService
    {
        public string GetDeviceName()
        {
            return "Android Device";
        }
    }
}

名前空間を定義する

直接viewで、名前空間を定義してもいいですが、直下にある_Imports.razorに名前空間を入れてあげると、viewで定義する必要はなくなるので、_Imports.razorに書きます。

_Imports.razor

//省略
@using TestApp.Service

viewで表示

Index.razor

@page "/";
@inject IDeviceNameService DeviceNameService;
<p>デバイス名: @DeviceNameService.GetDeviceName()</p>

MAUIのメモ

Maui+blazorのメモを書きます。

Maui+blazorとは何なのか？

MAUIはC#であらゆるプラットフォームのアプリを作成できるクロスプラットフォーム フレームワークです。
ただ、従来はxmlをベースにしたxamlで記述しないと行けないのでweb屋には取っつきづらいところが有りました。
(自分もhtmlだったらcssちょっと変更するだけで見た目変更できるのになって部分があってxamlはモヤモヤしてしまいました。)

Maui+blazorは何のかというと表示部分はhtmlで書きながらロジックはMAUI(C#)でかけるので技術になります。

Maui+blazorとcordova比較してMaui+blazor魅了

htmlベースでかけるならcordova(monaca)で良いんじゃないのとなります。
自分も当初そう思いました。

WEBの延長線上のアプリであれば(ニュース系のアプリなど)、そうでしょうがプラットフォーム固有の機能を呼び出すアプリの場合はcordovaでは、kotlinやjava、iosであればswiftでそれぞれ書かなければ行けません。
（プラットフォーム固有の機能に関してはプラグインとして提供されていますし、monacaであれば、取っつきづらいコマンドを入力せずに、guiからプラグインをインストールして呼び出せます。
ただ、少し挙動を変更したい、トリッキーなことをしたい場合は先に述べたように、それぞれの言語でコードをかかければ行けません）

Maui+blazorの場合はC#でプラットフォーム固有のコードを書きつつ表示部分はhtmlでかけるというメリットがあります。