Windows でElectron の基本やデスクトップアプリの作り方

Windows でElectron の基本やデスクトップアプリの作り方

node.jsのElectronモジュールを使用してデスクトップアプリを作ってみます。

nodeのバージョンは6.10.3です。

npm initでプロジェクト作成します。エントリポイント(最初に実行されるjs)はmain.jsとします。

Electronをインストールします。

C:\Users\xxxxx\Documents\vscode\electron>npm install electron --save-dev

package.jsonは以下の通りになります。

{
  "name": "electron-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^1.7.11"
  }
}

Electronのバージョンは1.7.11とします。

ではまずmain.jsを記述します。

'use strict';
const {app, BrowserWindow} = require('electron')
let mainWin = null;
app.on('window-all-closed', () => {
  if (process.platform!='darwin') {
    app.quit();
  }
});

// Electron初期化完了後に実行
app.on('ready', () => {
  mainWin=newBrowserWindow({width:400, height:300});
  mainWin.loadURL('file://'+__dirname+'/index.html');
  mainWin.on('closed', () => {
    mainWin=null;
  });
});

※darwinとはmacのことです

次に空のindex.htmlを同じディレクトリ配下に作成します。

デスクトップアプリを実行する

Electronをグローバルインストールしていれば、

electron .

で実行できますが、ローカルインストールしている場合は以下のように実行します。

.\node_modules\.bin\electron .

これで以下のデスクトップアプリが起動します。

パッケージングする

VSCodeやAtomはElectronで作られています。ということはexe化することができます。

パッケージングするには、electron-packagerモジュールをインストールする必要があります。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^