BrowserWindow
ブラウザウィンドウを作成したり、制御したりします。
プロセス: Main
app
モジュールの ready
イベントが発生するまでは、このモジュールは使用できません。
// メインプロセス
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
// 外部 URL を読み込む
win.loadURL('https://github.com')
// またはローカルの HTML ファイルを読み込む
win.loadURL('index.html')
ウインドウのカスタマイズ
BrowserWindow
クラスは、アプリのウインドウの見た目や動作を変更するさまざまな方法を提供しています。 詳細は、ウインドウのカスタマイズ のチュートリアルをご覧ください。
ウインドウを違和感なく表示する
ウインドウにページを直接ロードすると、ユーザにはページが徐々にロードされるように見えるかもしれません。これはネイティブアプリとしては良い挙動ではありません。 ちらつかせることなくウインドウを表示するには、さまざまな状況に応じた 2 つの解決策があります。
ready-to-show
イベントを使用する
ページのロード中、ウインドウがまだ表示されていない場合、レンダラープロセスが初めてページをレンダリングし終わったとき、ready-to-show
イベントが発生します。 このイベントの後にウインドウを表示させれば、チラつくことはありません。
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ show: false })
win.once('ready-to-show', () => {
win.show()
})
このイベントは、通常、did-finish-load
イベントの後に発生しますが、大量のリモートリソースがあるページでは、did-finish-load
イベントの前に発生する可能性があります。
このイベントを使用すると、show
が false でもレンダラーが "見えている" と見なされ、描画されることに注意してください。 paintWhenInitiallyHidden: false
を使用すると、このイベントは発生しません。
backgroundColor
プロパティを設定する
複雑なアプリでは、ready-to-show
イベントが発生するのに時間がかかり過ぎて、アプリが遅いと感じさせる可能性があります。 このような場合、ウインドウをすぐに表示し、アプリの背景に近い backgroundColor
を使うことを推奨します。
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({ backgroundColor: '#2e2c29' })
win.loadURL('https://github.com')
ready-to-show
イベントを使用しているアプリに対しても、アプリがよりネイ ティブに感じられるように backgroundColor
を設定することが推奨されます。
いくつか有効な backgroundColor
の例を示します。
const win = new BrowserWindow()
win.setBackgroundColor('hsl(230, 100%, 50%)')
win.setBackgroundColor('rgb(255, 145, 145)')
win.setBackgroundColor('#ff00a3')
win.setBackgroundColor('blueviolet')
これらの色の種類についての詳細は、win.setBackgroundColor の有効なオプションをご参照ください。
親ウィンドウと子ウィンドウ
parent
オプションを使用することで、子ウインドウを作成することができます。
const { BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top })
child.show()
top.show()
child
ウインドウは、常に top
ウインドウの前面に表示されます。
モーダルウィンドウ
A modal window is a child window that disables parent window. To create a modal window, you have to set both the parent
and modal
options:
const { BrowserWindow } = require('electron')
const top = new BrowserWindow()
const child = new BrowserWindow({ parent: top, modal: true, show: false })
child.loadURL('https://github.com')
child.once('ready-to-show', () => {
child.show()
})
ページの表示状態
Page Visibility API は、以下のように動作します。
- すべてのプラットフォームおいて、表示状態はウインドウが非表示/最小化されているかどうかをトラッキングします。
- さらに、macOSでは、表示状態はウインドウが重なり合った状態もトラッキングします。 ウインドウが別のウインドウと重なり合った (例えば、完全に覆い隠された) 場合、表示状態は、
hidden
になります。 他のプラットフォーム上では、ウインドウが最小化されるか、明示的にwin.hide()
で非表示にされた場合のみ 、表示状態はhidden
になります。 BrowserWindow
がshow: false
で作成された場合、ウインドウが実際には非表示であるにも関わらず、初期の表示状態はvisible
になります。backgroundThrottling
が無効の場合、ウインドウを最小化したり、重ねたり、非表示にしたりしても、表示状態はvisible
のままになります。
消費電力を最小にするために、表示状態が hidden
のとき、高負荷な操作を一時停止することを推奨します。
プラットフォームに関する注意事項
- macOSでは、モーダルウインドウは親ウインドウに付随したシートとして表示されます。
- 親ウインドウが移動したとき、macOSでは、子ウインドウは親ウインドウに対する相対的な位置を維持しますが、WindowsとLinuxでは、子ウインドウは移動しません。
- Linuxでは、モーダルウインドウの型は、
dialog
に変更されます。 - Linuxでは、多くのデスクトップ環境は、モーダルウインドウを非表示にすることをサポートしていません。
Class: BrowserWindow extends BaseWindow
ブラウザウィンドウを作成したり、制御したりします。
プロセス: Main
BrowserWindow
は EventEmitter を継承しています。
options
によって設定されたネイティブプロパティで新しい BrowserWindow
を生成します。