Blazorサーバーでp5.jsを動かす

Blazor サーバーでp5.jsを動かす方法を紹介します。

Blazor WebAsemblyでp5.jsを動かす記事も書いています。[2020/04/10執筆中]

Blazorのホスティングモデルについてはこちらから。

p5.jsとは

p5.jsとは、Processingっぽい記法でコーディングできるJavaScriptのライブラリです。

グラフィカルな表現に特化しているため、アーティストさんやデザイナーさんにとって非常に重宝されているらしいです。

p5jsはProcessingと同じくオープンソース化されているライブラリです。

環境

.netcore 3.1を使用しています。

Blazor サーバー

Blazor サーバーはASP.NET Core 3.0 でサポートされました。
UI の更新、イベント処理、JavaScript の呼び出しなどをSignalR 接続経由で処理されるのが特徴です。

追加ファイル構造

  • wwwroot
    •  sketch.js
  • Pages
    • _Host.cshtml
    • p5jsPage.razor

_Host.cshtmlの編集

_Host.cshtmlに以下のような記述を追加します。

この記述を行うことによってp5を呼び出しながら、sketch.jsを呼び出すことが可能になります。

sketch.jsの作成

sketch.jsを以下のように作成します。

挙動としては
真っ黒の背景にマウスポインタを当てると円が表示される
というものになります。

p5の関数やメンバを呼び出すときにすべて p.draw のように p から始まるのがキモです。

最初にcreateCanvasを呼び出して大きさを指定しているのも重要です。

p5jsPage.razorの作成

p5jsPage.razorを作成します。

始めに@usingディレティブを用いて Microsoft.JSInterop を使用可能にします。

次に@injectディレティブを用いてIJSRuntime を使用可能にします。

最後に、setP5メソッドの中でInvokeAsync<T>を用いてさきほどsketch.jsで記述した”setp5″を呼び出します。

また、setP5メソッドを呼び出す際 OnAfterRender(bool firstRender) メソッドによって呼び出すことが重要です。
Blazorのライフサイクルから考えたときに、p5の表示部分はコンポーネントのレンダリング後に追加する必要があります。
(レンダリング前にsetP5を呼び出してもうまく動きません)
このため、コンポーネントのレンダリング後にコードを実行できるメソッドOnAfterRender(bool firstRender) を呼び出す必要があります。

BlazorのライフサイクルについてはMicrosoft公式がドキュメントを日本語で出してくれています。(日本語助かる)

おわりに

以上の項目を理解し実装すると、晴れてBlazor上でp5.jsが動作します!

yay!

参考文献

ASP.NET Core Blazor ライフサイクル | Microsoft Docs

(processing/p5.js)Need Support of P5 on Blazor Web-Assembly #4184 -Git Hub

P5.js and Blazor, such fun. – Andrew Does Coding

Atria
  • Atria
  • 大学生個人開発者| AtCoder(茶) / C# / VBA /その他趣味いっぱい