Electron+p5js+VSCodeでアプリをつくる（Electron v15）

# はじめに
Electron+p5jsで、デスクトップアプリを作っていくメモです。Electron Fiddleという、初めてElectronアプリを作るのに便利な開発ツールがあるのですが、これだと画像や動画を内包できなかったり、違うOSのアプリをコンパイルすることができなかったりします。今回はmacOSで開発して、WindowsやRaspberryPiで動くアプリを作ることを目指したいので、まずは、VSCodeで、Electron＋p5jsを使えるようにしたいと思います。macOSで作ってmacOSのアプリを作ります。

# VSCodeでElectron
## nodejsのインストール
Electronを開発するには、nodejsをインストールします。インストーラで入れた方が楽かなと思います。

https://nodejs.org/ja/

「node」「npm」がインストールされますが、ターミナルでバージョン確認して、無事にインストールできていることを確認しておきます。

~~~zsh
node -v
v16.10.0
~~~
~~~zsh
npm -v
7.24.2
~~~

## VSCodeの入手とインストール

こちらもインストーラがあるので、ダウンロードしてインストールしてください。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

## gitのインストール

gitがインストールされてない場合は、こちらから。
gitをインストールするためにhomebrewをインストール・・というのが大変でしたら、Binary installerでインストールすると良いと思います。

https://git-scm.com/download/mac

## フォルダをつくって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をインストールします。

~~~zsh
npm install --save-dev electron
~~~

~~~zsh
npm start
~~~

これで、Electronの「Hello World」が起動すれば、Electronアプリのコンパイルが成功です。
![スクリーンショット 2021-11-06 0.18.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668579/1b546802-9210-3521-107e-67abc4998d43.png)

確認できたらアプリを終了させます。
macOSの場合、注意するのは、アプリのウィンドウを閉じただけでは終了していないことです。ウィンドウを閉じた段階では、まだDockの中に待機している状態なので、確実に終了させましょう。アプリのメニューから終了を選ぶか「コマンド＋Q」、または、VSCodeのターミナルで「コントロール＋C」などして終わらせるといいと思います。

# p5jsを使えるようにする
Electronアプリのコンパイルができたところで、p5jsを使えるようにします。これは、いくつか方法がありますが（<a href="https://qiita.com/mathrax-s/items/af6e3e4cdb4fe9622783">こちらも参考にどうぞ</a>）、p5jsのサイトから「p5.js」または「p5.min.js」をダウンロードして、electron-quick-startフォルダにコピーする方法にします。

https://p5js.org/download/

ここでは、「p5.min.js」をダウンロードして、electron-quick-startフォルダにコピーしました。
![スクリーンショット 2021-11-06 0.27.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668579/f25022bd-3541-85c7-81ac-82da830db46b.png)

index.htmlで、renderer.jsを読む前に、p5.min.jsを読み込むようにします。具体的には以下のようになります。

~~~index.html
<!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はインスタンスモードで書きます。

~~~renderer.js
// 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が画面に出てくると思います。
![スクリーンショット 2021-11-06 0.37.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668579/63097909-6e1c-457b-5899-e6ca379933da.png)

確認できたらアプリを終了させます。


# styles.cssを整えてフチをなくす
最初は、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
~~~

フチがなくなりました！
![スクリーンショット 2021-11-06 0.40.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668579/8fd9592f-ecf1-be58-84a0-5649eb20feb3.png)

あとは、p5jsのインスタンスモードでいろいろ楽しめますね〜！

# 画面を全画面にするには

ウィンドウサイズはmain.jsで設定します。p5jsでは、windowWidthと、windowHeightでウィンドウの大きさで指定します。

全画面にするには、main.jsの10行目あたりに、「'fullscreen': true,」を追記します。

~~~main.js
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    'fullscreen': true, //← この行を追加
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
~~~

全画面！
![スクリーンショット 2021-11-06 1.08.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668579/bb114139-4fce-8b05-d2d9-8f30f76567cd.png)


全画面以外にも、いろいろあります。たとえばopacityは、macOSとWindowsだと半透明になって面白いです。RaspberryPiでは残念ながら半透明になりませんでした。。

https://www.electronjs.org/docs/latest/api/browser-window