【Electron連載】第５回 基本編－ウィンドウを作って表示

↑【Electron連載（目次）】Electronでアプリ完成までのメモ

んじゃ、今回から基本編のスタートやで。
というわけで、まずはWindowを作って表示までな。

ここのAPIドキュメントを参考に進めていくで。
https://electron.atom.io/docs/api/browser-window/

ソースコードはJavaScriptじゃなくて、TypeScriptで書いてるから注意な。

ウィンドウの作成

index.ts

const {BrowserWindow} = require('electron');

var win: Electron.BrowserWindow = new BrowserWindow({width: 800, height: 600});

//ウィンドウ内にリモートのページを表示する場合
win.loadURL('https://github.com');

//ウィンドウ内にローカルファイルのページを表示する場合
win.loadURL('file://' + __dirname + '/index.html');

//ウィンドウを閉じるイベント処理
win.on('closed', () => {
    win = null;
});

BrowserWindow作成時のオプション

ウィンドウを作成する際のオプションで良く使いそうなのをピックアップしたで。
ここから抜粋したから、載ってないのはよく見てや。
https://electron.atom.io/docs/api/browser-window/#new-browserwindowoptions

オプション名	型	省略時の値	説明
width	integer	800	ウィンドウの幅
height	integer	600	ウィンドウの高さ
x	integer	画面中央	ウィンドウの横位置（yとセットで使用）
y	integer	画面中央	ウィンドウの縦位置（xとセットで使用）
resizable	boolean	true	ウィンドウサイズの変更可否
movable	boolean	true	ウィンドウ移動可否
minimizable	boolean	true	最小化可否
maximizable	boolean	true	最大化可否
closable	boolean	true	閉じる可否
alwaysOnTop	boolean	false	常に最前面に表示

イベント

ウィンドウのイベントを記述する方法や。
基本的にはonメソッドでイベント名を記載するみたいやけど、一部例外もあるっぽいな。
詳しくはこっち見てな。
https://electron.atom.io/docs/api/browser-window/#instance-events

引数があるapp-commandイベントの例やで。

index.ts

const {BrowserWindow} = require('electron');
var win : Electron.BrowserWindow = new BrowserWindow();
//アプリのコマンドイベント
win.on('app-command', (e, cmd) => {
  //ブラウザの戻るを検知して処理
  if (cmd === 'browser-backward' && win.webContents.canGoBack()) {
    win.webContents.goBack();
  }
})

メソッド

ウィンドウを操作する際にはメソッドを実行やな。
この辺は他のプログラムと変われへんな。
こっち書いてあるから参考にしてな。
https://electron.atom.io/docs/api/browser-window/#instance-methods

子ウィンドウ

子ウィンドウの作成方法や。
って言ってもBrowserWindowのインスタンス作成時にオプション指定するだけやけどな。

index.ts

var top : Electron.BrowserWindow = new BrowserWindow();
var child : Electron.BrowserWindow = new BrowserWindow({parent:top});
child.show();
top.show();

子ウィンドウをモーダルにする場合はオプションで追加や。

index.ts

var child : Electron.BrowserWindow = new BrowserWindow({parent: top, modal: true});

フレームなしウィンドウや透明なウィンドウなど

ウィンドウの見た目を変えたり、ちょっと特殊なウィンドウを作る際はこっちを参照な。
https://electron.atom.io/docs/api/frameless-window/

とりあえず書かれている内容をかいつまんで書くと・・・

• フレームなしウィンドウはインスタンス作成時にframeオプションをfalseにする。
• メニューが表示されたままやから、titleBarStyleオプションをhiddenにしておけ。
• 透明なウィンドウはtransparentオプションをtrueにするとよい。
• マウスクリックを無効にする場合はwin.setIgnoreMouseEvents(true)を実行。
• ウィンドウを移動できるようにするにはbodyタグのstyleに"-webkit-app-region: drag"をつけておく。

てなところかな。
まちがってたらすんまへん。

＞　第６回　基本編－ダイアログ表示