【Electron入門】ボタンを押したらnodeモジュールの処理を実行する

6087 ワード
Electron Node.js Node.js テキストリンク

Electron、流行りなのかたくさん記事が出てますが、純粋にUIとnodeの処理の連携に対して「こうしていいんだ！」と落ち着くまでに非常に時間がかかってしまったので備忘録として書き残します。

ボタンを押したらnodeモジュールの処理を実行する

index.html
<html>
...

<body>
    <button class="js-button">
        ボタン
    </button>
    <script type="text/javascript" src="index.js"></script>
</body>

</html>

今回はログ出せればいいと思うのでelectron-logモジュールを実行することにします。

index.js
const log = require('electron-log');

const button = document.querySelector('.js-button');

button.addEventListener('click', function (clickEvent) {
    log.info("ボタン押された");
})

これでターミナルとブラウザのDevToolでログが表示されます。

ここまでの勘違い

Chromiumを起動してhtmlをロードするクラス

app.js
'use strict';

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

var mainWindow = null;

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

app.on('ready', function () {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.webContents.openDevTools()
  mainWindow.on('closed', function () {
    mainWindow = null;
  });
});

てっきりこれがindex.htmlに対するcontrollerなのかと勘違いしてしまった。
bodyに宣言してるjsファイルでnodeモジュールの処理実行できない知識がぼんやりあったからすごく疑ってしまった。不思議な気分。

PHPにおける時間の選択と判断
Pythonモジュール-struct(バイトストリーム、パケット分割実装)