Electron v7の入門からパック(Electron-Builder)まで【Ubuntu,Mac】

はじめに

ちょっとしたデスクトップアプリをつくるのに使うものといえばElectron!

毎回調べるのも面倒なのでまとめます.

環境

Prerequisits

最小構成

  • Project root
    • package.json
    • main.js
    • index.html

1. Electron で Hello World

package.json を作成

  • yarn init
    • ほとんどそのまま enter でいいが entry point は main.js にするのが Electron の流儀らしい

Electronをインストール

  • yarn add -D electron

main.js を編集

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;
app.on('ready', () => {
    // mainWindowを作成
    mainWindow = new BrowserWindow({width:800, height:600});
    // Electronに表示するhtml
    mainWindow.loadURL('file://' + __dirname + '/../../index.html');
    // ChromiumのDevツールを開く
    //mainWindow.webContents.openDevTools();

    mainWindow.on('closed', () => mainWindow = null);
});

index.html を編集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF Database</title>
</head>

<body>
Hello, World!
</body>

</html> 

Hello World 実行

electron . で起動

f:id:sorasyl:20200124002642p:plain
electronのHello World

2. Electron アプリをパックして配布可能なインストーラやバイナリを作成する

  • UbuntuWindowsアプリを作りたいなど別プラットフォーム向けにパッケージを作るときは依存ライブラリに注意
  • dockerを使えば面倒はない Dockerfile

    Electron-Builder インストール

    yarn add -D electron-builder

package.jsonを編集.

scriptsとbuildを追加する.例は以下の通りで,<*>を自分で置き換える. パッケージのバージョンは2020/01/24時点で最新のもの.

{
  "name": "<project-name>",
  "version": "1.0.0",
  "description": "<project's description>",
  "main": "main.js",
  "author": "<author>",
  "license": "MIT",
  "scripts": {
    "start": "electron .",
    "pack-all": "electron-builder -mwl",
    "pack-win": "electron-builder --win --x64 nsis",
    "pack-mac": "electron-builder --mac --x64 dmg",
    "pack-linux": "electron-builder --linux --x64 deb"
  },
  "devDependencies": {
    "electron": "^7.1.10",
    "electron-builder": "^22.2.0"
  },
  "build": {
    "appId": "<com.example.app>",
    "productName": "<productName>",
    "copyright": "Copyright @ 2020 ${author},
    "mac": {
      "category": "public.app-category.developer-tools",
    }
  }  
}

パック(Linuxの例)

  • yarn run pack-linux
    • dist/に出力される

参考

ElectronとNode.jsの本は持ってないけどいろいろあります.

Javascriptから勉強したい場合はこちらがおすすめ. Kindleで買えばいつでも参照できて便利です.