ウインドウを作成したり、制御したりします。
プロセス: メイン
注意
BaseWindow
は、単一のウィンドウ内に複数のウェブビューを柔軟に構成する方法を提供します。 フルサイズのウェブビューが 1 つだけあるウィンドウの場合は、BrowserWindow
クラスの方が簡単な選択肢になることがあります。
app
モジュールの ready
イベントが発生するまでは、このモジュールは使用できません。
const { BaseWindow, WebContentsView } = require('electron')
const win = new BaseWindow({ width: 800, height: 600 })
const leftView = new WebContentsView()
leftView.webContents.loadURL('https://electronjs.org')
win.contentView.addChildView(leftView)
const rightView = new WebContentsView()
rightView.webContents.loadURL('https://github.com/electron/electron')
win.contentView.addChildView(rightView)
leftView.setBounds({ x: 0, y: 0, width: 400, height: 600 })
rightView.setBounds({ x: 400, y: 0, width: 400, height: 600 })
親ウィンドウと子ウィンドウ
parent
オプションを使用することで、子ウインドウを作成できます。
const { BaseWindow } = require('electron')
const parent = new BaseWindow()
const child = new BaseWindow({ parent })
child
ウインドウは、常に parent
ウインドウの前面に表示されます。
モーダルウィンドウ
モーダルウインドウは、親ウインドウを無効にする子ウインドウです。 モーダルウインドウを作成するには、parent
と modal
の両方のオプションを設定しなければなりません。
const { BaseWindow } = require('electron')
const parent = new BaseWindow()
const child = new BaseWindow({ parent, modal: true })
プラットフォームに関する注意事項
- macOSでは、モーダルウインドウは親ウインドウに付随したシートとして表示されます。
- 親ウインドウが移動したとき、macOSでは、子ウインドウは親ウインドウに対する相対的な位置を維持しますが、Windows と Linux では、子ウインドウは移動しません。
- Linux では、モーダルウインドウのタイプは
dialog
に変更されます。
- Linuxでは、多くのデスクトップ環境は、モーダルウインドウを非表示にすることをサポートしていません。
クラス: BaseWindow
ウインドウを作成したり、制御したりします。
プロセス: メイン
BaseWindow
は EventEmitter を継承しています。
options
によって設定されたネイティブのプロパティで新しい BrowserWindow
を生成します。
new BaseWindow([options])
options
BaseWindowConstructorOptions (任意)
width
Integer (任意) - ピクセル単位でのウインドウの幅。 省略値は 800
です。
height
Integer (任意) - ピクセル単位でのウインドウの高さ。 省略値は 600
です。
x
Integer (任意) - (y が使われている場合は 必須) ウインドウの画面左側のオフセット。
省略すると、ウインドウは中央に配置されます。
y
Integer (任意) - (x が使われている場合は 必須) ウインドウの画面上側のオフセット。
省略すると、ウインドウは中央に配置されます。
useContentSize
Boolean (任意) - width
と height
を、 ウェブページのサイズに使用します。このとき、実際のウインドウのサイズにはウインドウ枠のサイズが含まれるので、若干大きくなります。 省略値は false
です。
center
boolean (任意) - ウインドウを画面中央に表示します。 省略値は false
です。
minWidth
Integer (任意) - ウインドウの最小の幅。 省略値は 0
です。
minHeight
Integer (任意) - ウィンドウの最小の高さ。 省略値は 0
です。
minWidth
Integer (任意) - ウインドウの最小の幅。 省略すると無制限です。
maxHeight
Integer (任意) - ウインドウの最大の高さ。 省略すると無制限です。
resizable
boolean (任意) - ウインドウがリサイズ可能かどうか。 省略値は true
です。
movable
boolean (任意) macOS Windows - ウインドウが移動可能かどうか。 これは Linux では実装されていません。 省略値は true
です。
minimizable
boolean (任意) macOS Windows - ウインドウが最小化可能かどうか。 これは Linux では実装されていません。 省略値は true
です。
maximizable
boolean (任意) macOS Windows - ウインドウが最大化可能かどうか。 これは Linux では実装されていません。 省略値は true
です。
closable
boolean (任意) macOS Windows - ウインドウが閉じられるかどうか。 これは Linux では実装されていません。 省略値は true
です。
focusable
boolean (任意) - ウインドウにフォーカスを当てられるかどうか。 省略値は true
です。 Windows では、focusable: false
と設定することは、skipTaskbar: true
と設定することにもなります。 Linux で focusable: false
と設定することは、ウインドウがウインドウマネージャとのやり取りを停止することになるため、ウインドウがすべてのワークスペースで常に前面に表示されます。
alwaysOnTop
boolean (任意) - ウインドウを常に他のウインドウの前面に表示させるかどうか。 省略値は false
です。
fullscreen
boolean (任意) - ウインドウをフルスクリーンで表示させるかどうか。 明示的に false
を設定した場合、macOS ではフルスクリーンボタンが非表示または無効になります。 省略値は false
です。
fullscreenable
boolean (任意) - ウインドウをフルスクリーンモードにできるかどうか。 macOS では、最大化/ズームボタンでフルスクリーンモードを切り替えるか、それともウィンドウの最大化をするのかも意味します。 省略値は true
です。
simpleFullscreen
boolean (任意) macOS - macOS で Lion 以前のフルスクリーンを使用します。 省略値は false
です。
skipTaskbar
boolean (任意) macOS Windows - タスクバー内でウインドウを表示するかどうか。
省略値は false
です。
hiddenInMissionControl
boolean (任意) macOS - ユーザが Mission Control に切り替えたときに、ウインドウを隠すかどうか。
kiosk
boolean (任意) - ウインドウがキオスクモードかどうか。 省略値は false
です。
title
string (任意) - デフォルトのウインドウのタイトル。 省略値は "Electron"
です。 HTML タグの <title>
が loadURL()
でロードされた HTML ファイル内で定義されている場合、このプロパティは無視されます。
icon
(NativeImage | string) (任意) - ウインドウのアイコン。 Windows では、最高の視覚効果を得るために ICO
アイコンを使用することを推奨します。また、undefined のままにして、実行形式のアイコンを使用することもできます。
show
boolean (任意) - 生成時にウインドウを表示するかどうか。 省略値は true
です。
frame
boolean (任意) - false
を指定すると フレームレスウインドウ を作成します。 省略値は true
です。
parent
BaseWindow (任意) - 親ウインドウを指定します。 省略値は null
です。
modal
boolean (任意) - このウインドウをモーダルにするかどうか。 これは、このウインドウが子ウインドウの場合にのみ機能します。 省略値は false
です。
acceptFirstMouse
boolean (任意) macOS - 非アクティブなウインドウをクリックすると、ウェブコンテンツにもクリックスルーするかどうか。 macOS での既定値は false
です。 このオプションは他プラットフォームでは設定できません。
disableAutoHideCursor
boolean (任意) - タイプ中にカーソルを非表示にするかどうか。
省略値は false
です。
autoHideMenuBar
boolean (任意) - Alt
キーが押されない限り、メニューバーを自動で隠します。 省略値は false
です。
enableLargerThanScreen
boolean (任意) macOS - ウインドウを画面より大きいサイズへとリサイズできるようにします。 他の OS はデフォルトで画面よりも大きなウインドウを許可するため、これは macOS にのみ影響します。 省略値は false
です。
backgroundColor
string (任意) - 16 進数、RGB、RGBA、HSL、HSLA、または名前付き CSS 色形式で表したウインドウの背景色。 #AARRGGBB 形式のアルファ値は transparent
を true
に設定した場合にサポートされます。 省略値は #FFF
(白) です。 詳細は win.setBackgroundColor をご覧ください。
hasShadow
boolean (任意) - ウインドウに影を付けるかどうか。 省略値は true
です。
opacity
number (任意) macOS Windows - ウインドウの初期不透明度を 0.0 (完全透明) と 1.0 (完全不透明) の間で設定します。 これは Windows と macOS でのみ実装されています。
darkTheme
boolean (任意) - ウインドウに対してダークテーマの使用を強制します。いくつかの GTK+3 デスクトップ環境でしか動作しません。 省略値は false
です。
transparent
boolean (任意) - ウインドウを 透過 にします。
省略値は false
です。 Windows では、ウィンドウがフレームレスでない限り機能しません。
type
string (任意) - ウインドウのタイプで、省略すると通常のウインドウになります。 詳しくは後述します。
visualEffectState
string (任意) macOS - macOS でウインドウの動作状態をマテリアルの見た目にどう反映させるかを指定します。 これは vibrancy
プロパティと共に使用する必要があります。 以下は取りうる値です。
followWindow
- 背景を、ウィンドウがアクティブなときにはアクティブに、そうでないときには非アクティブになるよう自動的に表示します。 これが既定値です。
active
- 背景を常にアクティブに表示します。
inactive
- 背景を常に非アクティブに表示します。
titleBarStyle
string (任意) - ウインドウのタイトルバーのスタイル。
省略値は default
です。 以下は取りうる値です。
default
- macOS や Windows それぞれの標準的なタイトルバーになります。
hidden
- タイトルバーが隠れて、フルサイズのコンテンツのウインドウになります。 macOS では、ウインドウの左上に標準ウインドウコントロール ("信号機ボタン") が付きます。 Windows および Linux では、titleBarOverlay: true
と組み合わせるとウィンドウコントロールオーバーレイがアクティブになります (詳細は titleBarOverlay
を参照)。それ以外の場合、ウィンドウコントロールは非表示です。
hiddenInset
macOS - タイトルバーが非表示になり、信号機ボタンがウィンドウの端から少し内側に配置される別種の見た目になります。
customButtonsOnHover
macOS - タイトルバーが非表示になり、コンテンツウィンドウがフルサイズで表示されます。ウィンドウの左上にマウスを移動すると、信号機ボタンが表示されます。
注: 現在、このオプションは実験的なものです。
titleBarOverlay
Object | Boolean (任意) - macOS で win.setWindowButtonVisibility(true)
と組み合わせてフレームレスウインドウを使用する場合、または titleBarStyle
を使用して標準のウインドウコントロール (macOS では「信号機ボタン」) が表示されるようにする場合、このプロパティによってウインドウコントロールオーバーレイの JavaScript API と CSS 環境変数 が有効になります。 true
を指定すると、オーバーレイはデフォルトのシステムカラーになります。 省略値は false
です。
color
String (任意) Windows Linux - 有効になっている場合のウインドウコントロールオーバーレイの CSS カラー。 既定値はシステムカラーです。
symbolColor
String (任意) Windows - 有効化されたウインドウコントロールオーバーレイ内の記号の CSS カラー。 既定値はシステムカラーです。
height
Integer (任意) - ピクセル単位のタイトルバーとウインドウコントロールオーバーレイの高さ。 既定値はシステムの高さです。
trafficLightPosition
Point (任意) macOS - フレームレスウインドウの信号機ボタンのカスタム位置を設定します。
roundedCorners
boolean (任意) macOS - macOS でフレームレスウインドウの角を丸くするかどうか。 省略値は true
です。 このプロパティを false
に設定すると、ウインドウがフルスクリーンになるのを阻害します。
thickFrame
boolean (任意) - Windows で WS_THICKFRAME
スタイルのフレームレスウインドウを使用します。これにより、標準のウインドウ枠が追加されます。 false
に設定すると、ウインドウの影とウインドウのアニメーションがなくなります。 省略値は true
です。
vibrancy
string (任意) macOS - macOS でのみ、ウインドウにくもりガラスのエフェクトを追加します。 appearance-based
, titlebar
, selection
,
menu
, popover
, sidebar
, header
, sheet
, window
, hud
, fullscreen-ui
,
tooltip
, content
, under-window
, under-page
のいずれかにできま す。
backgroundMaterial
string (任意) Windows - 非クライアント領域の背後を含む、ウインドウのシステム描画の背景マテリアルを設定します。
auto
, none
, mica
, acrylic
, tabbed
のいずれかです。 詳細は win.setBackgroundMaterial をご覧ください。
zoomToPageWidth
boolean (任意) macOS - ツールバーの緑色の信号機ボタンを option キーを押しながらクリックしたとき、またはウインドウ > ズームのメニュー項目をクリックしたときの macOS の動作を制御します。 true
の場合、ズームしたときウインドウはウェブページの最適な幅に拡大されます。false
では画面の幅にズームされます。 これは、maximize()
を直接呼び出したときの動作にも影響を与えます。 省略値は false
です。
tabbingIdentifier
string (任意) macOS - タブグループ名。これはウインドウをネイティブのタブとして開けるようにします。 同一のタブ識別子を持つウインドウは、まとめてグループ化されます。 これはネイティブのタブボタンをウインドウのタブバーに追加し、app
とウインドウが new-window-for-tab
イベントを受け取ることができるようになります。
minWidth
/maxWidth
/minHeight
/maxHeight
で最小もしくは最大のウインドウサイズを設定するのは、ユーザを束縛するだけです。 サイズ制約に従わないサイズを setBounds
/setSize
や BrowserWindow
のコンストラクタに渡しても構いません。
type
オプションに設定できる値と動作は、プラットフォーム依存です。
以下は取りうる値です。
- Linux では、設定できる値は
desktop
, dock
, toolbar
, splash
, notification
です。
desktop
タイプは、ウインドウをデスクトップのバックグラウンドウインドウのレベル (kCGDesktopWindowLevel - 1) に配置します。 ただし、デスクトップウインドウはフォーカス、キーボード、マウスのイベントを受け取らないことに注意してください。 globalShortcut を使用すれば、辛うじて入力を受け取れます。
dock
タイプは、Dock のようなウインドウの動作を生成します。
toolbar
タイプは、ツールバーの見た目でウインドウを生成します。
splash
タイプは特殊な動作をします。 たとえウインドウ本文の CSS スタイルが -webkit-app-region: drag であっても、ドラッグできません。 このタイプは主にスプラッシュスクリーンで使用されます。
notification
タイプはシステム通知の様に動作するウインドウを作成します。
- macOS では、設定できるタイプは
desktop
, textured
, panel
です。
textured
タイプは、メタルのグラデーションの外観 (NSTexturedBackgroundWindowMask
) を追加します。
desktop
タイプは、ウインドウをデスクトップのバックグラウンドウインドウのレベル (kCGDesktopWindowLevel - 1
) に配置します。 デスクトップウインドウはフォーカス、キーボードやマウスイベントを受け付けないことに注意してください。しかし globalShortcut
を使って、かろうじて入力を受け付けることはできます。
panel
タイプは、通常 NSPanel に予約されている NSWindowStyleMaskNonactivatingPanel
スタイルマスクを実行時に追加することにより、フルスクリーンのアプリの上にウィンドウを浮かせます。 また、すべてのスペース (デスクトップ) にそのウインドウが表示されます。
- Windows では、設定できるタイプは
toolbar
です。
インスタンスイベント
new BaseWindow
で作成されたオブジェクトでは以下のイベントが発生します。
注: いくつかのイベントは特定のオペレーティングシステムでのみ利用可能で、そのように注記がつけられています。
イベント: 'close'
戻り値:
ウインドウがクローズされようとするときに発生します。 これは、DOM の beforeunload
と unload
イベントの前に発生します。 event.preventDefault()
を呼び出すことで、ウインドウを閉じる処理がキャンセルされます。
大抵はウインドウをクローズさせる必要 があるかどうかを判断するために beforeunload
ハンドラーを使用したいと思うでしょうが、これはウインドウがリロードされるときにも呼び出されます。 Electron では、undefined
以外の値を return すれば閉じる処理をキャンセルします。 以下がその例です。
window.onbeforeunload = (e) => {
console.log('I do not want to be closed')
e.returnValue = false
}
注意: window.onbeforeunload = handler
と window.addEventListener('beforeunload', handler)
の動作には微妙な違いがあります。 Electron 内では前者の方が一貫して動作するため、値を return するだけでなく常に event.returnValue
を明示的にセットすることを推奨します。
イベント: 'closed'
ウインドウが閉じられたときに発生します。 このイベントを受け取った後は、ウインドウへの参照を削除し、以降そのウインドウを使用しないようにしてください。
イベント: 'session-end' Windows
強制的なシャットダウン、マシン再起動またはセッションのログオフによってウインドウセッションが終了されようとしたときに発生します。
イベ ント: 'blur'
ウインドウがフォーカスを失うときに発生します。
イベント: 'focus'
ウインドウがフォーカスを得るときに発生します。
イベント: 'show'
ウインドウが表示されるときに発生します。
イベント: 'hide'
ウインドウが非表示になるときに発生します。
イベント: 'maximize'
ウィンドウが最大化されるときに発生します。
イベント: 'unmaximize'