More than 5 years have passed since last update.

Electron プロジェクト始めかた

Electron

Posted at 2017-10-02

##プロジェクト作成

作りたい場所にターミナルで移動して

npm init -y

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ElectronApp</title>
</head>
<body>
<p>Hello World</p>

</body>
</html>

index.ts

const electron = require('electron');
const BrowserWindow:typeof Electron.BrowserWindow = electron.BrowserWindow;
const app:Electron.App = electron.app;

class MyApplication {
    mainWindow:Electron.BrowserWindow = null;

    constructor(public app:Electron.App) {
        this.app.on('window-all-closed', this.onWindowAllClosed);
        this.app.on('ready', this.onReady);
    }

    onWindowAllClosed() {
        if (process.platform != 'darwin') {
            this.app.quit();
        }
    }

    onReady() {
        this.mainWindow = new BrowserWindow({
            width: 400,
            height: 400,
            minWidth: 500,
            minHeight: 200,
            acceptFirstMouse: true
        });

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

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

const myapp = new MyApplication(app);

アプリの起動は

electron .

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up