前回のメモの続きです。
Blazor WebAssemblyアプリ上に展開されているFileSystemを触る - 窓を作っては壊していた人のブログ
前回のメモでBlazor WebAssembly上に展開されているFileSystemに対して、System.IO.File経由またwasm上からアクセス出来る旨をご紹介しました。 これを利用してFileを利用するC言語で書かれたアプリケーションをBlazor WebAssembly上で使ってみようと、また作ってみようと思います。
作ったもの
アプリケーション側
GitHub - yamachu/SharpOpenJTalkWasmSample
Open JTalk と言う日本語テキストのTTSアプリケーションをBlazor WebAssembly上で動かしたものになります。
Initialize時にOpen JTalkで使用する辞書ファイルと音声ファイルをFileSystem上に展開し、それを使って音声合成を行っています。
ライブラリ側
Open JTalkをWindows, macOS, LinuxでC# から使うためのライブラリ。 既にP/Invokeが行える様にバインディングなどのコードが含まれている。
今回はこの対象のOS/Archにwasmを追加した形になります。
作り方
ASP.NET Core updates in .NET 6 Release Candidate 2 - .NET Blog
こちらに書かれている内容に沿って、ネイティブ依存のあるライブラリを作っていきます。 Blazor WebAssemblyアプリケーション側のcsprojにNativeFileReferenceを載せてCファイルをビルドし参照する方法は書いてあることそのままなので割愛します。
ざっくり必要な作業としては
- Emscripten 2.0.23 で対象のCライブラリをビルドする
- P/Invokeを行うためのバインディングを含むコードを書く
- NativeFileReferenceとしてマークするためのpropsファイルを書く
- nugetパッケージとして固める
といった4ステップです。
実際に自分が行ったことのメモ程度ですが、手順だったり実際のコードを紹介します。
Emscripten 2.0.23 で対象のCライブラリをビルドする
ビルドのためのGitHub Actionsはこんな感じ。 例えばconfigureでビルドの設定が可能なプロジェクトの場合はemconfigureなどを利用しemscriptenでビルドが行える様に設定し、ビルドを行います。 今回は .wasm にしないで、.a ファイルとして出力をしています（ただのビルド済みファイルのアーカイブなので取り回しが良さそうという判断から）。
詳しい手法は以下のドキュメント参照。
Building Projects — Emscripten 2.0.33-git (dev) documentation
P/Invokeを行うためのバインディングを含むコードを書く
P/Invokeとはという方は公式ドキュメントを参照。
プラットフォーム呼び出し (P/Invoke) | Microsoft Docs
実際のバインディングのコードはこの辺り
昔作ったライブラリではどの様に作っていたかを書いていたようなので、詳しくはこちらをご覧ください。
最近では
を使ってバインディングのコードを作ることも行われているようです（まだ未検証）。
NativeFileReferenceとしてマークするためのpropsファイルを書く
Blazor WebAssemblyでビルドを行う際にNativeFileReferenceとしてNative依存のファイルを読ませたいので、nugetパッケージの build/net6.0 以下にpropsファイルを配置します。
今回はTFMがnet6.0なBlazor WebAssemblyなのでbuild/以下はnet6.0を指定しています。
なぜ build/ 以下なのかは公式ドキュメントを（略
nuget.exe CLI を使用して NuGet パッケージを作成する | Microsoft Docs
実際のnugetパッケージの中身はこんな感じの形になっています。
# ~/.nuget/packages/sharpopenjtalk/1.4.0 $ tree . ├── Content ├── build │ └── net6.0 │ └── SharpOpenJTalk.props ├── lib │ └── netstandard1.3 │ ├── SharpOpenJTalk.dll │ └── SharpOpenJTalk.pdb ├── runtimes │ ├── browser-wasm │ │ └── 2.0.23 │ │ └── openjtalk.a │ ├── linux │ │ └── native │ │ └── libopenjtalk.so │ ├── osx │ │ └── native │ │ └── libopenjtalk.dylib │ ├── win-x64 │ │ └── native │ │ └── openjtalk.dll │ └── win-x86 │ └── native │ └── openjtalk.dll ├── sharpopenjtalk.1.4.0.nupkg ├── sharpopenjtalk.1.4.0.nupkg.sha512 └── sharpopenjtalk.nuspec
この SharpOpenJTalk.props に
<?xml version="1.0" encoding="utf-8"?>
<Project>
<ItemGroup>
<NativeFileReference Include="$(MSBuildThisFileDirectory)..\..\runtimes\browser-wasm\2.0.23\openjtalk.a" />
</ItemGroup>
</Project>
こんな感じのXMLを記述し、2.0.23なEmscriptenでビルドしたArchiveファイルを参照させるようにしています。 こうすることでBlazor WebAssemblyでこのパッケージを追加した際に openjtaljk.a が NativeFileReference として認識され、dotnet.wasm に含まれるようになります。
nugetパッケージとして固める
上記のツリーのような構成になるようにnuspecを書いてパッケージングしましょう。
ざっくりですが、上記の手順でパッケージを作ることで、Blazor WebAssemblyアプリケーション上で動作するNative依存を含むライブラリが作成できます。
ハマりどころ
別のラッパーライブラリ では Archive ファイルを browser-wasm/native 以下に配置してしまったため、publishした際、publishディレクトリに Archive ファイルが含まれてしまいました。
公式ブログには
The files for the native dependencies should be built for WebAssembly and packaged in the browser-wasm architecture-specific folder.
と書かれていたのでてっきり native 以下なのかなと判断し配置しましたが、browser-wasm 以下であればどこでも良さそうです。
またNative依存が正しく呼び出せるかどうかなどの確認は対象OSをWindows, macOS, Linuxにして、Consoleアプリケーションなどで確認する方が良いです。 呼び出しに失敗している、引数が合わないなどはBlazor WebAssemblyアプリのデバッグでは非常に困難なためです。
