RPAを使った業務の自動化に挑戦(中編)

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

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

1.Electron

Electronとは

Electronは、GitHubが開発したオープンソースのソフトウェアフレームワークである。
ChromiumとNode.jsを使っており、HTML、CSS、JavaScriptのようなWeb技術で、macOS、Windows、Linuxに対応したデスクトップアプリケーションをつくることができる。

Electron (ソフトウェア) -Wikipediaより引用

Electronは、 SkypeやVisual Studio Code、Slackなどでも使われており簡単にデスクトップアプリを作成できるソフトウェアフレームワークです。

インストール

1. Node.jsのインストール

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

2. Electronのインストール

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

npm i -D electron

3. 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;
}
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MY ELECTRON</title>
</head>
</html>

4. Electronの実行

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

npx electron src

2.まとめ

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

参考

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

関連記事

プロジェクトストーリー

おすすめ記事

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP