この記事はもう古いです

久々にElectronで自分の記事を見ながら進めてみると、もうできないことがわかりました。ずいぶん前からできなかったみたいで、申し訳ありません。
この記事を書いた、2020年10月末には、Electron V11だったのですが、V12から大幅な変更があったみたいで、主にセキュリティ面を厳しくして安全になったのですが、この記事と同様の方法ではできなくなりました。
このコメントを書いているのは、2021年11月1日ですが、現在最新のElectron V15でできた内容を、別にアップしましたので、そちらを参照ください。

はじめに

自分はいつもmacOSでProcessingを愛用しています。主に作品の制作途中に使うツールを作っていて、たとえば「画像をRGBの数値に変換してコンマ区切りのテキストにするツール（＝作品のLEDの色変化にする）」とか「デバイスと通信してその情報をOSCに変換するツール（＝タッチして音を奏でる）」とかです。

この記事は、Processingでアプリケーションに書き出すと重くなってしまうのでできるだけ軽くしたい、と考えてたどり着いたメモになります。

Processingの長所短所

Processingの好きなところは、macOSで開発してもWindowsやRaspberryPiで動作する点です。でも気になるところは、アプリケーションとして書き出すとサイズが大きくなってしまうことです。単純な機能のツールでも、数百メガ以上になることもあり、特にプログラミングのワークショップなどで使うツールを配布するときには、少しでも軽くしたいと思っていました。

p5js + electronの長所短所

今回はProcessingから派生したJavaScriptの「p5js」と、ウェブの技術でデスクトップアプリを作ることができる「Electron」で、シンプルなp5jsプログラムをアプリケーションに書き出してみました。すると、190メガくらいになりました（これでも重い？）。通常はp5jsはブラウザで動作させますが、ElectronはChromium（オープンソースのウェブブラウザ）ごと書き出すことができるので、macOSでもWindowsでも動作するアプリケーションができるんですね。すごい。

しかしElectronにも気になるところがありました。Electronを使うにはターミナルなどでのコマンドライン入力が一般的なようで、プログラミング初学者には敷居が高そうに感じました。アプリケーションに書き出すだけならこれでもいいのですが、ツールがブラックボックスになりがちなので、プログラミングをはじめた人ほど中身をのぞいて理解しやすいものがいいなと思います。せっかくp5jsでプログラミング楽しいなって思いはじめたところに、コマンドラインが必須な次のステップは、急だなぁと思います。そこで調べてみると、シンプルにElectronを使える「Electron Fiddle」という開発環境がちゃんと用意してありました。

p5js + Electron Fiddleがよさそう

Electron Fiddleを使えば、GUIの「RUN」ボタンで、自分のプログラムを実行したり、ソースの編集エリアもあるので、動作を確認しながらの開発がしやすいです。そしてアプリケーションとして書き出したり、Electronのバージョンを選んだりするのも、GUIベースでできます。

ここでもうひとつ気になることが。p5jsの書き方のままElectronを使う例が見つかりましたが、コマンドラインの操作でした。p5jsの書き方のままElectron Fiddleを使えないか試行錯誤したのですが、わかりませんでした（index.heml、main.js、package.json、renderer.jsの4つのファイルだけしか扱えないのかな？？）。でもp5jsの書き方を少し換えれば、Electron Fiddleを使うことができました。

ということで、p5jsを少し書き換える手間はかかりますが、デスクトップアプリケーションをつくってみます。

アプリケーションをつくる

Electron Fiddleのダウンロード

https://www.electronjs.org/fiddle
このサイトの下のほうに、最新バージョンへのGithubのリンクがあります。ダウンロードしてインストールします。

Helloworld

インストールできたら、Electron Fiddleを起動してみてください。最初に「Helloworld」のソースが開きます。そのままGUIの「RUN」ボタンを押すと、Helloworldアプリケーションが動きます。このソースを書き換えながら自分のアプリケーションにしていきます。

基本になるp5jsを用意する

Electron Fiddleで直接プログラムしてもいいのですが、p5jsで問題なく動くプログラムがあったほうがよいと思います。うまく動かなかった時に「p5js側はちゃんと動くので問題がない」と判断できます。p5js web editorや、OpenProcessingなどを使うとシンプルだと思います。

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(100);
}

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

p5jsを少し書き換え、rendrer.jsに書く

const p5 = require('p5');

const sketch = function (p) {
  // setup
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
    p.background(100);
  }

  // draw
  p.draw = () => {
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  }
}

const app = new p5(sketch);

p5jsのプログラムをElectron Fiddleでは「renderer.js」の中に書きます。p5jsのままではなく、JavaScriptの書き方に変わります。

なんとなく覚えておくには、「const sketch = function (p)」の中に注目して、p5jsで使える関数の前に「p.」とつける感じでしょうか。「setup」関数と「draw」関数の書き方にも注意しましょう。

RUNボタンで実行する

「RUN」ボタンでこのプログラムが実行されて、ウィンドウが開きます。基本的に、ソースを編集したら「RUN」で確認、という往復で作業をします。macOSの場合に注意したいのは、このウィンドウを閉じてアプリケーションを終了したと思っていても、裏で起動した状態になることです。これはmacOSの標準だそうで、ウィンドウを閉じたらアプリケーションが隠れる・Dockのアイコンをクリックするとこのアプリケーションのウィンドウが復活する、というのが自然なんだそうです。なので「STOP」ボタン（さっきまでRUNボタンだったところ）や「コマンド＋Q」のショートカットなどで終了させるとよいです。

index.htmlを編集する

このままだと「Helloworld」の文字が表示されたままになります。この表示は「index.html」にありますので、削除します。

p5jsのアプリケーションできあがり

これでp5jsのプログラムを少し書き換えるだけで、デスクトップアプリケーションができました。

アプリケーションに書き出して完成

Electronではpackageすることがアプリケーションに書き出すことになります。メニューから「Tasks」>「Package Fiddles...」を選び、しばらくするとアプリケーションが書き出されます。

参考にしたサイト

electronと、p5jsを少し書き換えてosc通信するプログラムの解説動画
https://www.youtube.com/watch?v=XDbUcfOO5eY

electronと、p5jsの書き方のまま、コマンドライン入力で開発するテンプレート
https://github.com/garciadelcastillo/p5js-electron-templates