皆さん、おはこんばんにちは！ SIer出身のエンジニア、みやもとです。

「RPAを使った業務の自動化に挑戦（前編）」に引き続きRPAを使った業務の自動化に挑戦したいと思います。前回は、自動化するためにどのようなパッケージを使うかを書きましたが今回はそのパッケージを組み込んでデスクトップアプリ作るためにElectronをインストールしたいと思います。

（前編をご覧になっていない人はこちらから！）

1.Electronとは

Electronをインストールする前にNode.jsをインストールします。

下記のコマンドを実行して、 Electronをインストールします。
インストールするとコマンドを実行したディレクトリ直下に下記のファイルが作成されます。


npm i -D electron


Electronをインストールすると出来上がるsrc直下にファイルを作成します。


{
"main": "main.js"
}



const { app, Menu, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let mainWindow;

function createWindow() {
mainWindow = new BrowserWindow({ width: 800, height: 600});

mainWindow.loadURL(url.format({
pathname: path.join(__dirname, ‘index.html’),
protocol: ‘file’,
slashes: true
}));

// 開発ツール有効化
// mainWidow.webContents.openDevTools();

const menu = Menu.buildFromTemplate(createMenuTemplate());
Menu.setApplicationMenu(menu);

mainWindow.on(‘closed’, () => {
mainWindow = null;
});
}

app.on(‘ready’, createWindow);

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

app.on(‘activate’, () => {
if (mainWindow === null) {
createWindow();
}
});

// メニューテンプレート作成
function createMenuTemplate(){
let template = [{
label: ‘ファイル’,
submenu: [{
label: ‘開く’,
accelerator: ‘CmdOrCtrl+o’,
click: function(item, focusedWindow) {
if (focusedWindow) {
focusedWindow.webContents.send(‘main_file_message’, ‘open’);
}
}
}]
}]
return template;
}

下記のコマンドをElectronをインストールしたディレクトリで実行します。

npx electron src

Electronは様々なデスクトップアプリで使われていますが、使ったことがなかったので今回試しにインストールして実行まで行いましたがものすごく簡単にデスクトップの枠組みができました。まだデザインや機能を組み込んでいないため真っ白な画面となっていますが、今後はPyAutoGuiを使って処理を組み込んで行き業務の自動化を進めていきたいと思います。

【参考】

最新版で学ぶElectron入門 ウェブ技術でPCアプリを開発しよう。