<戻る(Back

[環境構築]

[環境構築のためのバッチファイル群(.zipダウンロード)]

↓

[コンパイル-実行]

1. Electronプロジェクト準備

プロジェクトフォルダを任意の場所に作成する。

(※パーミッションの関係でElectronの機能が動かない場合もあると思うので、なるべくfreeな場所で。)

Electronコマンドを実行する前に環境変数にElectron>binへのパスが通っているか確認する事。

通っていなければElectron>binへのパスを追加。

カレントディレクトリをプロジェクトフォルダに移して下記のコマンドを実行する。

行No

1

2

3

コマンド

>npm init

>npm install --save-dev electron

>npm i -D electron-builder

プロジェクトフォルダ内にhtmlファイル、cssファイル、jsファイルを作成する。

initでpackage.jsonファイルが作成されるので下記の内容にする。

package.json 

{
  "name": "実行ファイル名に変更してね",
  "version": "1.0.0",
  "main": "作成したjavascriptファイル名に変更してね.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "build": {
    "appId": "com.ec.test",
    "mac": {
      "target": "dmg",
      "icon": "icon/icon.png"
    },
    "win": {
      "target": "nsis",
      "icon": "icon/icon.png"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "electron": "^35.1.0",
    "electron-builder": "^25.1.8"
  }
}

28行目: electron-builderを追加すると、自動的に追記されるのでpackage.jsonをエディタで開かない方がいい

アイコンを付けたければ、iconファイル(png/jpeg?)を作る必要があります。

2. プログラム製作

jsファイルを作成して、下記を実装する。


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

let mainWindow = null;
app.on( 'ready', () => {
    mainWindow = new BrowserWindow( {
        width: 400,
        height: 400,
        fullscreen: true,
        frame: false,
        kiosk: true,
        alwaysOnTop: false,
        autoHideMenuBar: true,
    } );
    let path = 'file://' + __dirname + '/index.html';
    mainWindow.loadURL( path );
    mainWindow.on( 'closed', function() {
        mainWindow = null;
    } );
} );

3. プログラムを実行

カレントディレクトリをプロジェクトフォルダに移して下記のコマンドを実行する。

行No

1

コマンド

>electron main.js

上記コマンドで実行ファイルができるが、配布ファイルにはならないので注意。

[パッケージ化]

Windows用に配布するのであれば、プロジェクトフォルダに以下のファイルを作成する。

build-win 

const builder = require('electron-builder');

builder.build({
  config: {
    'appId': '実行ファイル名に変更してね',
     'win':{
          'target': {
              'target': 'zip',
              'arch': [
                  'x64',
                  'ia32',
              ]
          }
      }
  }
});

カレントディレクトリをプロジェクトフォルダに移して下記のコマンドを実行する。

行No

1

コマンド

>node build-win

プロジェクトフォルダにdistフォルダができるので、その中のwin-unpackedフォルダにexeがある。