Electron

up::

ブラウザ上で動かすことであらゆるデバイス上でアプリを動くようにしたやつ。
ブラウザで使える技術は全部使える。Reactで組める。

最小限

クイック スタート | Electron
Electron Fiddle + p5js で半透明アプリをつくる Electron - Qiita

npm initでpackage.jsonを生成。
npm i electronで始められる。

package.jsonのscriptsにstartとしてelectron .を追加。これでnpm run startでelectronを起動できる。

.vscode/launch.jsonにデバッグ設定追加。

{
    "version": "0.2.0",
    "compounds": [
      {
        "name": "Main + renderer",
        "configurations": ["Main", "Renderer"],
        "stopAll": true
      }
    ],
    "configurations": [
      {
        "name": "Renderer",
        "port": 9222,
        "request": "attach",
        "type": "chrome",
        "webRoot": "${workspaceFolder}"
      },
      {
        "name": "Main",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
        "windows": {
          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
        },
        "args": [".", "--remote-debugging-port=9222"],
        "outputCapture": "std",
        "console": "integratedTerminal"
      }
    ]
  }

必要なファイルはmain.jsのみ。これはpackage.jsonで名前を変えられる。他はmainコード内で変更。
画面が欲しければindex.html
プリロードしたければpreload.js
htmlを後から変更するならrenderer.json（これはhtmlに設定する）

プリロードでは様々な特権が必要な操作を追加できる
というか公開できる、インターフェースみたいなの

プロセス間通信

デバッグに見えるように、メインとレンダラーのプロセスは別
なので二つを繋ぐ通信を作る

レンダラー側から読めるjsであるrenderer.jsから、preload.jsに公開されている通信を呼ぶ
通信はpreload.jsに設定されているmain.jsの関数を呼ぶ、という仕組み