尋常でないもふもふ

a software engineer blog

Electron(Node.js)でデスクトップアプリ

javascript

Qiita を見ながらやったらコードが古くて動かなかったので書いとく。

下準備

$ mkdir electron-sample && cd electron-sample
$ npm init

インストール

npm からインストールするけど、パッケージ名が electron だと古いバージョンになっちゃうので、electron-prebuilt をコマンドラインのどこからでも使えるようにグローバルインストール

$ npm install -g electron-prebuilt
$ electron -v
v1.2.1

単にプロジェクト内で使えればいいという場合はグローバルインストールしなくてもいい。
下記のように devDependencies に追記してインストールすると node_modules/.bin に実行ファイルが追加されるので

$ npm install -D electron-prebuilt

package.json 内の scripts に下記のように書いとけば、プロジェクトのディレクトリから npm start で実行できる。

"scripts": {
  "start": "./node_modules/.bin/electron ."
}

ソース

最小構成の Hello, World 的なデスクトップアプリ。

main.js

'use strict';

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('ready', () => {
  let mainWindow = new BrowserWindow({width: 300, height: 300});
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
});

以前のバージョンだと app や BrowserWindow は electron のプロパティとしてではなく、require してた模様。

index.html

<!DOCTYPE html>
<head>
  <title>Electron Read Us</title>
</head>
<body>
  <h1>Hello, electron!</h1>
</body>
</html>

package.json

{
  "name": "electron-sample",
  "version": "0.0.1",
  "description": "sample project",
  "main": "main.js",
  "scripts": {
    "start": "./node_modules/.bin/electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "electron"
  ],
  "author": "jnst",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "electron-prebuilt": "^1.2.1"
  },
  "engines": {
    "node": ">=6.2.0"
  }
}

今回は node v6.2.0 で動かしてます。
ここから発展させてダウンロードツールのデスクトップアプリを作るつもり。