HTTP×Electronアプリのひな形の作り方から配布まで

2017.7.8
awake-electron-home
サンプルリポジトリ

https://github.com/syon/awake/tree/electron

※ awake とは、ひな形としての命名です。適宜読み替えてください。

なぜ HTTP × Electron なのか

Electronアプリは通常、以下のように記述してリソースの指定をします。

mainWindow.loadURL('file://' + __dirname + '/index.html');

しかしこれでは、従来のWebサイトのパス指定方法のひとつである ルートパス を基準とした書き方が通用しなくなってしまいます。

<link rel="stylesheet" href="/assets/app.css">

<a href="/">Back to Home</a>

『Webサイト向けに作成したものをElectronでも動作させたい』という局面では、 ここで紹介する方法が役立ちます。

前提

$ date
2017年 7月 8日 土曜日 18時43分43秒 JST

$ node -v
v8.1.3

$ npm -v
4.2.0

材料 (npm)

electron

Electron本体

electron-packager

配布用にパッケージングするためのもの

node-static

Webサーバ

for devDependencies
$ npm i -D electron
$ npm i -D electron-packager
for dependencies
$ npm i -S node-static

構成

重要なのは、Electron関連のコードはmain.jsのみだということです。
public配下は通常のWebサイトであることを示しています。

.
├── main.js
├── package.json
└── public
    ├── assets
    │   ├── app.css
    │   └── bg.jpg
    ├── index.html
    └── subdir
        └── index.html

package.json（抜粋）

{
  :,
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack:mac": "electron-packager . awake --platform=darwin --arch=x64",
    "pack:win": "electron-packager . awake --platform=win32 --arch=all"
  },
  "dependencies": {
    "node-static": "^0.7.9"
  },
  "devDependencies": {
    "electron": "^1.6.11",
    "electron-packager": "^8.7.2"
  }
}

main.js

'use strict';

const NodeStatic = require('node-static');
const HTTP = require('http');
const Electron = require("electron");

const PORT = 7170;

const file = new NodeStatic.Server(__dirname + '/public');
HTTP.createServer((request, response) => {
  request.addListener('end', () => {
    file.serve(request, response);
  }).resume();
}).listen(PORT);

let mainWindow;
Electron.app.on('ready', () => {
  mainWindow = new Electron.BrowserWindow({
    width: 1000,
    height: 700,
    resizable: true,
    alwaysOnTop: false,
    movable: true,
  });

  mainWindow.loadURL(`http://localhost:${PORT}/index.html`);

  mainWindow.on('closed', () => {
    Electron.session.defaultSession.clearCache(() => {});
    mainWindow = null;
  });
});

Electron.app.on('window-all-closed', () => Electron.app.quit());

開発と配布

$ npm start

Electronアプリを起動します。開発用。

$ npm run pack:mac

Mac向けに配布用パッケージを作成します。
Mac上で実行する必要があります。

$ npm run pack:win

Windows向けに配布用パッケージを作成します。
Windows上で実行する必要があります。もしくは、Mac に wine[1] を導入して実行します。

配布用パッケージの出力内容

awake-electron-mac
Figure 1. Mac — x64: 116MB
awake-electron-windows
Figure 2. Windows — x64: 128MB — ia32: 99MB

参考