ASP.NET Core Blazor WebAssembly ネイティブ依存関係

Blazor WebAssembly アプリは、WebAssembly での実行用にビルドされた、ネイティブの依存関係を使用できます。 ネイティブ依存関係は、.NET WebAssembly ビルド ツールを使用して .NET WebAssembly ランタイムに静的にリンクできます。これには、アプリを WebAssembly に AOT コンパイルするのと同じツールを使用し、未使用の機能を削除するためにランタイムを再リンクします。

この記事は Blazor WebAssembly にのみ該当します。

.NET WebAssembly ビルドツール

.NET WebAssembly ビルド ツールは、Web プラットフォームのコンパイラ ツールチェーンである Emscripten に基づいています。 インストールを含むビルド ツールの詳細については、「ASP.NET Core Blazor WebAssembly ビルド ツールと事前 (AOT) コンパイルを参照してください。

アプリのプロジェクト ファイルに Blazor WebAssembly 項目を追加することで、ネイティブの依存関係を NativeFileReference アプリに追加します。 プロジェクトがビルドされると、各NativeFileReferenceは、.NET WebAssembly ビルド ツールによって Emscripten に渡され、コンパイルされてランタイムにリンクされます。 次に、アプリの.NET コードからネイティブ コードにp/invokeします。

一般に、Blazor WebAssembly と共に任意の移植可能なネイティブ コードをネイティブの依存関係として使用できます。 ネイティブの依存関係は、C/C++ コードにも、Emscripten を使用して以前にコンパイルしたコードにも追加できます。

• オブジェクト ファイル (.o)
• アーカイブ ファイル (.a)
• ビットコード (.bc)
• スタンドアロンの WebAssembly モジュール (.wasm)

事前構築済みの依存関係は、通常、.NET WebAssembly ランタイムのビルドに使用されるのと同じバージョンの Emscripten を使用してビルドする必要があります。

ネイティブ コードの使用

このセクションでは、単純なネイティブ C 関数を Blazor WebAssembly アプリに追加する方法について説明します。

新しい Blazor WebAssembly プロジェクトを作成します。

階乗を計算するための C 関数を使用して、 Test.c ファイルをプロジェクトに追加します。

Test.c:

int fact(int n)
{
    if (n == 0) return 1;
    return n * fact(n - 1);
}

アプリのプロジェクト ファイル (NativeFileReference) にTest.c用の.csproj MSBuild 項目を追加します。

<ItemGroup>
  <NativeFileReference Include="Test.c" />
</ItemGroup>

コンポーネントで、生成された ライブラリの 関数に対して 属性を追加し、コンポーネント内の .NET コードから メソッドを呼び出します。

Pages/NativeCTest.razor:

@page "/native-c-test"
@using System.Runtime.InteropServices

<PageTitle>Native C</PageTitle>

<h1>Native C Test</h1>

<p>
    @@fact(3) result: @fact(3)
</p>

@code {
    [DllImport("Test")]
    static extern int fact(int n);
}

.NET WebAssembly ビルド ツールがインストールされた状態でアプリをビルドすると、ネイティブ C コードがコンパイルされ、.NET WebAssembly ランタイム (dotnet.wasm) にリンクされます。 アプリがビルドされたら、アプリを実行し、表示された階乗の値を確認します。

C++ マネージド メソッドのコールバック

[UnmanagedCallersOnly]属性を使用して C++ に渡されるマネージド メソッドにラベルを付けます。 属性でマークされたメソッドは staticする必要があります。 Razor コンポーネントでインスタンス メソッドを呼び出すには、インスタンスの GCHandle を C++ に渡し、それをネイティブに戻します。 または、他のメソッドを使用してコンポーネントのインスタンスを識別します。

[DllImport]属性でマークされたメソッドは、コールバック引数のデリゲート型ではなく、関数ポインター (C# 9 以降) を使用する必要があります。

NuGet パッケージでのネイティブ依存関係のパッケージ化

NuGet パッケージに、WebAssembly で使用するネイティブの依存関係を含めることができます。 すると、これらのライブラリとそのネイティブ機能をいずれの Blazor WebAssembly アプリでも使用できるようになります。 ネイティブの依存関係のファイルは、WebAssembly 用にビルドし、browser-wasm　アーキテクチャ固有のフォルダーにパッケージ化する必要があります。 WebAssembly 固有の依存関係は自動的に参照されないため、NativeFileReference として手動で参照する必要があります。 パッケージの作成者は、ネイティブの依存関係と共に .props ファイルをパッケージに含めることで、ネイティブの依存関係を追加することを選択できます。

SkiaSharp ライブラリの使用例

SkiaSharp は、ネイティブ Skia グラフィックス ライブラリに基づく.NET用のクロスプラットフォーム 2D グラフィックス ライブラリであり、Blazor WebAssembly をサポートします。

このセクションでは、 Blazor WebAssembly アプリで SkiaSharp を実装する方法を示します。

Blazor WebAssembly プロジェクトにおいてSkiaSharp.Views.Blazorパッケージへの参照を追加します。 Visual Studioのプロセスを使用してアプリにパッケージを追加する (Manage NuGet PackagesInclude prerelease が選択されている場合) か、dotnet add package オプションを使用してコマンド シェルで --prerelease コマンドを実行します。

dotnet add package –-prerelease SkiaSharp.Views.Blazor

以下を使用して SKCanvasView コンポーネントをアプリに追加します。

• SkiaSharp および SkiaSharp.Views.Blazor 名前空間。
• SkiaSharp Canvas View コンポーネント (SKCanvasView) で描画するためのロジック。

Pages/NativeDependencyExample.razor:

@page "/native-dependency-example"
@using SkiaSharp
@using SkiaSharp.Views.Blazor

<PageTitle>Native dependency</PageTitle>

<h1>Native dependency example with SkiaSharp</h1>

<SKCanvasView OnPaintSurface="OnPaintSurface" />

@code {
    private void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        var canvas = e.Surface.Canvas;

        canvas.Clear(SKColors.White);

        using var paint = new SKPaint
        {
            Color = SKColors.Black,
            IsAntialias = true,
            TextSize = 24
        };

        canvas.DrawText("SkiaSharp", 0, 24, paint);
    }
}

アプリをビルドします。これには数分かかる場合があります。 アプリを実行して、NativeDependencyExample にある /native-dependency-example コンポーネントに移動します。

その他の資料

• .NET WebAssembly ビルド ツール
• Mono/WebAssembly MSBuild のプロパティとターゲット (WasmApp.targets, dotnet/runtime GitHub リポジトリ))