はじめに
Electron+p5jsで、デスクトップアプリを作っていくメモです。Electron Fiddleという、初めてElectronアプリを作るのに便利な開発ツールがあるのですが、これだと画像や動画を内包できなかったり、違うOSのアプリをコンパイルすることができなかったりします。今回はmacOSで開発して、WindowsやRaspberryPiで動くアプリを作ることを目指したいので、まずは、VSCodeで、Electron＋p5jsを使えるようにしたいと思います。macOSで作ってmacOSのアプリを作ります。
VSCodeでElectron
nodejsのインストール
Electronを開発するには、nodejsをインストールします。インストーラで入れた方が楽かなと思います。
「node」「npm」がインストールされますが、ターミナルでバージョン確認して、無事にインストールできていることを確認しておきます。
node -v
v16.10.0
npm -v
7.24.2
VSCodeの入手とインストール
こちらもインストーラがあるので、ダウンロードしてインストールしてください。
gitのインストール
gitがインストールされてない場合は、こちらから。
gitをインストールするためにhomebrewをインストール・・というのが大変でしたら、Binary installerでインストールすると良いと思います。
フォルダをつくってVSCodeで開く
VSCodeの最初って、どうするのがいいんですかね。
「electronプロジェクトを新規作成する」みたいなのがあればいいなと思うのですが、とりあえず先に、好きな場所にフォルダをつくっておいて、そこをVSCodeで開くことにします。
自分はデスクトップに「ElectronTest」フォルダを作って、VSCodeから「ファイル」 > 「フォルダーを開く」で、このフォルダを開きました。
electronのファイルを準備する
electronでアプリをつくるには、決まった複数の種類のファイルが必要で、いろいろ書かなくてはいけません。ひとつひとつ書くのは大変なので、Electron公式のクイックスタートで準備すると便利です。
VSCodeで自分のフォルダを開いたら、「ターミナル」 > 「新しいターミナル」を選び、シェルコマンドが打ち込めるようにします。VSCodeでフォルダを開くと既にそのフォルダに移動して、ターミナルが始まります。
ここでgitをつかって、electron-quick-startをクローンします。
git clone https://github.com/electron/electron-quick-start
electron-quick-startフォルダに移動して、
cd electron-quick-start
node_modules一式と、electronをインストールします。
npm install --save-dev electron
npm start
これで、Electronの「Hello World」が起動すれば、Electronアプリのコンパイルが成功です。
確認できたらアプリを終了させます。
macOSの場合、注意するのは、アプリのウィンドウを閉じただけでは終了していないことです。ウィンドウを閉じた段階では、まだDockの中に待機している状態なので、確実に終了させましょう。アプリのメニューから終了を選ぶか「コマンド＋Q」、または、VSCodeのターミナルで「コントロール＋C」などして終わらせるといいと思います。
p5jsを使えるようにする
Electronアプリのコンパイルができたところで、p5jsを使えるようにします。これは、いくつか方法がありますが（こちらも参考にどうぞ）、p5jsのサイトから「p5.js」または「p5.min.js」をダウンロードして、electron-quick-startフォルダにコピーする方法にします。
ここでは、「p5.min.js」をダウンロードして、electron-quick-startフォルダにコピーしました。
index.htmlで、renderer.jsを読む前に、p5.min.jsを読み込むようにします。具体的には以下のようになります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<!-- <h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>. -->
<!-- You can also require other files to run in this process -->
<script src="./p5.min.js"></script>
<script src="./renderer.js"></script>
</body>
</html>
renderer.jsに、p5jsをインスタンスモードで書く
p5jsはインスタンスモードで書きます。
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
const s = (p) => {
p.setup = () => {
p.createCanvas(p.windowWidth, p.windowHeight);
}
p.draw = () => {
p.background(50, 200, 100);
p.fill(255, 100);
p.noStroke();
p.ellipse(p.mouseX, p.mouseY, 100, 100);
}
}
const app = new p5(s)
renderer.jsを書いたら、VSCodeのターミナルで、「npm start」します。
npm start
すると、今書いたp5jsが画面に出てくると思います。
確認できたらアプリを終了させます。
styles.cssを整えてフチをなくす
最初は、styles.cssはコメント文だけで、何も設定されていません。以下のように追記します。
/* styles.css */
/* Add styles here to customize the appearance of your app */
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
cssを整えたら、VSCodeのターミナルで、再び「npm start」します。
npm start
フチがなくなりました！
あとは、p5jsのインスタンスモードでいろいろ楽しめますね〜！
画面を全画面にするには
ウィンドウサイズはmain.jsで設定します。p5jsでは、windowWidthと、windowHeightでウィンドウの大きさで指定します。
全画面にするには、main.jsの10行目あたりに、「'fullscreen': true,」を追記します。
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
'fullscreen': true, //← この行を追加
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
全画面！
全画面以外にも、いろいろあります。たとえばopacityは、macOSとWindowsだと半透明になって面白いです。RaspberryPiでは残念ながら半透明になりませんでした。。