Electronでメインモニタとサブモニタにウィンドウを出す #Node.js

とある案件にてElectronだと要件をクリアしそうなので、やってみる。ちなみに、Nodeはまったく詳しくない。

Electron初心者のためのHelloWorld（解説あり)
参考にして、NodeとElectronをインストール＆実行…OK.動いた。

次に、ElectronのAPIデモを試す。

なるほど（よくわからｎ）

やりたいこと

メインモニタ(プライマリ）：制御用インターフェース画面
サブモニタ（セカンダリ）：ビデオ表示

サブモニタじゃなくて、プロジェクタでもいいんだけど、要するに手元の画面では、制御系のパネルUIがあり、サブモニタ（プロジェクタ）に操作の結果の画面を出したいということ。素のHTML+JSでもウィンドウを開けるけど、表示先のモニターを選んだりはできないハズ。

必要最低限の形でなんとか出来たので、とりあえず。
video.htmlは、とりあえずYoutubeを埋め込み。メイン画面からの制御機能は未だない。サブモニタにウィンドウを開くだけ。

メイン→サブ内のコンテンツの制御についてはこれから調べる。

ソース

index.js


"use strct";

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

var mainWindow;

// 全てのウィンドウが閉じたら終了
app.on("window-all-closed", () => {
  if (process.platform != "darwin") {
    app.quit();
  }
});

// Electronの初期化完了後に実行
app.on("ready", () => {
  //ウィンドウサイズを1280*720（フレームサイズを含まない）に設定する
  mainWindow = new BrowserWindow({width: 800, height: 600, useContentSize: true});
  //使用するhtmlファイルを指定する
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on("closed", () => {
    mainWindow = null;
        app.quit();
  });
});

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>メインウィンドウ</title>

<style type="text/css">
div.container{
    text-align: center;

}
button{
    border:none;
    background-color:brown;
    color:white;
    padding:10px 20px;
    margin-top:200px;
}
</style>
</head>
<body>
<div class="container">
        <button id="new-window">サブモニターにウィンドウを開く</button>
    </div>
</body>

<script type="text/javascript">
    require('./create-window')
</script>
</html>

create-window.js

const {BrowserWindow} = require('electron').remote
const path = require('path')

const electron = require('electron');

const newWindowBtn = document.getElementById('new-window')

newWindowBtn.addEventListener('click', (event) => {

  const modalPath = path.join('file://', __dirname, 'video.html')

  var electronScreen = electron.screen;
  var displays = electronScreen.getAllDisplays();

  for (var i in displays) {
    if (displays[i].bounds.x != 0 || displays[i].bounds.y != 0) {
      externalDisplay = displays[i];
      break;
    }
  }

  if (externalDisplay) {

    let win = new BrowserWindow({
      x: externalDisplay.bounds.x,
      y: externalDisplay.bounds.y,
            height : externalDisplay.bounds.height,
            width: externalDisplay.bounds.width,
            frame: false,
            titleBarStyle: 'hidden'
    });

    win.on('close', () => { win = null })
    win.loadURL(modalPath)
    win.show()

    }
})

video.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サブモニターウィンドウ</title>
<style type="text/css">
body{
    margin:0;
    padding:0;
}
.video{
    position:relative;
    width:100%;
    padding-top:56.25%;
}
.video iframe{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
}
</style>
</head>
<body>

<div class="video">
<iframe src="https://www.youtube.com/embed/Q51bru32S7A?&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

</body>
</html>

注意＆検討事項

エントリポイントがmain.jsの人はmain.jsに置き換えてどうぞ。
サブモニタ－側へ表示されたウィンドウだけを閉じる機能はまだ無い。メインウィンドウを閉じると一緒に閉じる
メイン側からサブ側のコンテンツを制御する方法がイマイチわからない。IPCとか面倒すぎない？

Electron面白いけど、なんかモヤモヤするなぁ…

（追記）パッケージ化

Winのexeを作ってみる。

デバッグ用モジュール

$ npm -g install electron-prebuilt

パッケージ用モジュール

$ npm -g install electron-packager

現在のelectron のバージョンをチェック

$ electron -v
v1.4.13

パッケージ化実行

$ electron-packager . [アプリ名] --platform=win32 --arch=x64 --electron-version=1.4.13

exeできた。動いた。

が、実行後、メインウィンドウを閉じたら以下のエラーが。

なんとなく（原因）わかるけど、どう（対応）するかはよく分からない。調べる。