p5.js + Electronでデスクトップアプリを作ってみる

E.C.H（えいいち）

2024年2月9日 21:42

こんにちは。E.C.H（えいいち）です。
普段p5.jsで作品づくりをしていますが、展示会などで自分のSketchを走らせる場合、シェルのhttpサーバーを用意、Google Chromeなどを使って表示するのは少し煩雑なので、Electronというフレームワークを使ってデスクトップアプリを作ってみることにしました。覚書きとしてnoteに方法をまとめます。
※Windowsで検証しました。

1. 必要な環境の準備

Electronの動作には次のパッケージが必要です。事前にインストールしておきましょう。

・git（プロジェクト作成時に必要）
・Node.js（開発で必要）

Windowsだとインストーラーを使うのが一般的だと思います。（MacだとNode.jsはhomebrew、nodebrewがラクです）

2. Electronのインストール

npmコマンドを使って、Electronのインストールを行います。

$ npm install electron --save-dev

バージョン確認

$ npx electron -v
v28.2.2

3. 新規プロジェクトの作成

$ npx create-electron-app p5js-electron-test

ディレクトリに移動し、アプリを実行します。

$ cd p5js-electron-test
$ npm start

下のような画面が表示されます。

なお、デフォルトでDeveloper Toolが開かれる仕様なので、index.jsの中の以下の行をコメントアウトしましょう。

mainWindow.webContents.openDevTools();

4. カスタマイズ&p5.jsの読み込み

以降はプロジェクトファイル内のsrcフォルダにあるファイルを編集していく形になります。

まず、index.htmlをエディタで開き、<head>タグ内に以下を追記します。
（p5.min.jsはp5.js公式サイトからダウンロード）

    <script src="./p5.min.js"></script>
    <script src="./sketch.js"></script>

このとき、<h1>や<p>などのいらない部分は消してしまいましょう。<title>も適宜変更してください。

次に、sketch.jsをsrcフォルダ内に作成、自分のSketchを貼り付けます。
そして、Electron用に手直しをします。サンプルは以下の通りです。（ベースとなるSketchはp5.js公式サイトからの引用です）

const s = (p) => {
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
    p.background(255);
  };

  p.draw = () => {
    if (p.mouseIsPressed) {
        p.fill(0);
      } else {
        p.fill(255);
      }
      p.ellipse(p.mouseX, p.mouseY, 80, 80);
  };
}
const myp5 = new p5(s);

ここで重要なのが、p5.js独自の関数やシステム変数に全てp.を付けることです。setupとdrawの関数の書き方も特殊なので注意。

また、index.cssも適宜カスタマイズするとよいと思います。
僕はcanvasのpositionをabsoluteにしたり、marginをautoにしたりしました。

5. 起動確認

保存できたらnpm startでもう一度アプリを実行してみましょう。

このように、サンプルのSketchが実行できると思います。
あとはメニューバーを非表示にしたり、ウィンドウをフルスクリーンにしたりすると良いかなと思います。

→ 補足のセクションで設定方法を記載します。

6. パッケージング

最後にパッケージングをします。electron-packager をインストールします。

$ npm i -D electron-packager

package.jsonを編集して、パッケージングするスクリプトを追加しましょう。（"build": "electron-packager ."が追加するスクリプトです）

-- 省略 --
"scripts": {
    ----
    "build": "electron-packager ."
 },
-- 省略 --

追加できたら保存して、ビルドします。

$ npm run build

ビルドが成功すると、アプリが格納されたフォルダができ、.exeファイルが作成されるので起動できるか確認しましょう。
なお、ビルド時はコンピュータ・アーキテクチャの指定をしていません。おそらく実行環境に合ったものを自動で設定しているのだと思いますが、そのあたりは必要に応じて指定するとよいかと思います。

以上の手順でp5.jsとElectronを使ったデスクトップアプリが作成できました。

補足メニューバーの非表示とkiosk化

いずれもindex.jsを編集します。
メニュバーの非表示は以下のコードを追記することで可能です。

mainWindow.setMenuBarVisibility(false);

kiosk化（フルスクリーン）はmainwindowを記述している部分にオプションを付けることで可能です。

[変更前]

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

[変更後]

mainWindow = new BrowserWindow({
　width: 800, 
　height: 600, 
　kiosk: true, 
　'fullscreen': true, 
　'frame': false
});

なお、アプリを終了したい場合は、Alt + F4を押すことでできます。（Macの場合はcmd + q）
Sketch.jsでsetup関数内にp.noCursor()を記述しておくと尚良しという感じです。

参考にしたサイトは以下です。