Blazor サーバーでp5.jsを動かす方法を紹介します。
Blazor WebAsemblyでp5.jsを動かす記事も書いています。[2020/04/10執筆中]
p5.jsとは
p5.jsとは、Processingっぽい記法でコーディングできるJavaScriptのライブラリです。
グラフィカルな表現に特化しているため、アーティストさんやデザイナーさんにとって非常に重宝されているらしいです。
環境
.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に以下のような記述を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@page "/" @namespace HogeFuga.Pages @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <!--この辺にいろいろな記述--> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script> <script src="sketch.js"></script> </head> <body> <!--以下省略--> |
この記述を行うことによってp5を呼び出しながら、sketch.jsを呼び出すことが可能になります。
sketch.jsの作成
sketch.jsを以下のように作成します。
挙動としては
真っ黒の背景にマウスポインタを当てると円が表示される
というものになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
window.setp5 = () => { new p5(sketch, window.document.getElementById('container')); return true; }; let sketch = function (p) { p.setup = function () { p.createCanvas(1000, 1000); p.background(0); } p.draw = function () { p.ellipse(p.mouseX, p.mouseY, 80, 80); } }; |
p5の関数やメンバを呼び出すときにすべて p.draw のように p から始まるのがキモです。
最初にcreateCanvasを呼び出して大きさを指定しているのも重要です。
p5jsPage.razorの作成
p5jsPage.razorを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@page "/p5jsPage" @using Microsoft.JSInterop @inject IJSRuntime JSRuntime <h1>P5 Test Page</h1> <p>This is P5 test page!</p> <h2>P5 Testing</h2> <div id='container'></div> @code{ protected override void OnAfterRender(bool firstRender) { if (firstRender) { setP5(); } } async void setP5() { await JSRuntime.InvokeAsync<object>("setp5"); } } |
始めに@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が動作します！
参考文献
ASP.NET Core Blazor ライフサイクル | Microsoft Docs
(processing/p5.js)Need Support of P5 on Blazor Web-Assembly #4184 -Git Hub
