Electronでデジタルサイネージを作る時の画面設定

はじめに

デジタルサイネージでコンテンツを作る際、モニタサイズに合わせて画面を表示する必要があります。
画面の設定にはElectronのBrowserWindow APIを使ってウィンドウを固定してしまえば、あとはhtml内で表示の処理をすれば、コンテンツの制作が進めやすくなります。

目次

1. BrowserWindowのオプション
2. 参考

環境

• Windows10 64bit
• electron 8.2.1
• 縦型のFullHDモニタ（1080px x 1920px）での使用を想定

1. BrowserWindowのオプション

Electronで制作したコンテンツをアプリケーションとして起動する際、
画面サイズやフルスクリーンなどの設定は、BrowserWindowにオプションを追加することで、指定することができます。
まずは、electronのサイトからmain.jsの一部を抜粋します。

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

このスクリプトのnew BrowserWindowにオプションを追加していきます。

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  let win = new BrowserWindow({
    x:0,
    y:0,
    width: 1080,
    height: 1920,
    backgroundColor:'#FFFFFF',
    webPreferences: {
      nodeIntegration: true  //※1
    },
    alwaysOnTop:true,
    kiosk:true,
    fullscreeen:true,
    frame:false,
    transparent:false
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

オプションの説明

オプション名	型	説明
x	Integer	ウィンドウの左からの座標
y	Integer	ウィンドウの上からの座標
width	Integer	ウィンドウの幅
height	Integer	ウィンドウの高さ
backgroundColor	String	背景色、transparentがtrueの時は、'#AARRGGBB'の順で透明度とRGBの指定ができる
alwaysOnTop	Boolean	常に手前に表示
kiosk	Boolean	キオスクモード
fullscreen	Boolean	フルスクリーンモード
frame	Boolean	ウィンドウの枠の表示
transparent	Boolean	ウィンドウの透明度

※1 nodeIntegrationをtrueに変更していますが、
これは、コンテンツ内でjQueryを使う際にundefinedとなってしまうのを防ぐためです。

上記以外にも様々なオプションがありますので、詳しくは、
Class:BrowserWindowを参照ください。

2. 参考

ElectronでjQueryがundefinedになる
JavaScript (Electron) を使ってアプリの見栄えを整える