if ( Electron && Windows && フレームレス && 全面ドラッグ移動可 && リサイズ可能) { 設定して欲しいCSS }

概要

• Electronアプリ
• フレーム非表示
• 画面ドラッグでウィンドウを移動
• リサイズできる
• Windows対応

を実現するために、Macではおそらく不要で、
Windowsでは必要なCSS設定が実装次第ではある。

検証環境

• Windows7 Professional 64bit
• electron 0.37.2
• node v5.2.0

もしかしたらWindows7 固有かも。

サンプル

electron/frameless-window.md at master · electron/electron
を参考に、フレームレスはこう設定し、

js.main.js

const BrowserWindow = require('electron').BrowserWindow;
var win = new BrowserWindow({ width: 800, height: 600, frame: false });

ドラッグ可能はCSSで設定します
(bodyでもいいと思います。)

index.css

html {
	-webkit-app-region: drag;
}

ただし、これではbody内の要素が確保した領域分しか反映されないので(主に縦幅)、
ウィンドウサイズ全体に適用します。
だいたいこんな感じじゃないでしょうか

index.cc

html {
	-webkit-app-region: drag;
}

html, body {
	height: 100%;
	width:  100%;
	margin: 0;
}

本題からは横道にそれますが、Electron0.37.4ごろからheight:100%ではデフォルトで縦に謎領域があるらしく、スクロールバーがでます。
これはoverflow: hidden;やheight: calc(100% - 2px);で回避できます。
何の部分なのか知りたいです。

さて、ここまでの動作サンプルを挙げたいのですが、これだけのものを挙げるのもなんなので、他人のものを宣伝がてら…

@akameco さんのyamadaが、すごく良いアプリです。
詳細は【Electron】画像を保存するだけで満足してしまうオタクのために最高の画像ビューアをつくった - Qiitaを。

現在(v0.4.0)は丁度条件を満たしていて、

• フレームレス
• 全面ドラッグ移動
• リサイズ可能
• Windows非対応

ということで、Windowsユーザーの方は試していただけると思いますが、
リサイズができません。
それでも画面隅に置いていますが。

解決策

なぜリサイズできないか推測すると、width.heightを**100%**にすると、
リサイズの部分()までHTMLがかぶり、
-webkit-app-region: drag;が効いてフレームではなくメニューバー内扱いになるのではないかと。

そこで、marginをとることで外周を-webkit-app-region: drag;の対象外にし、リサイズできるようにしました。

index.css

html {
	margin: 2px;
	-webkit-app-region: drag;
	height: calc(100% - (2px * 2));
	width:  calc(100% - (2px * 2));
}

body {
	height: 100%;
	width:  100%;
	margin: 0;
}

calcで100%から引き、marginは上下、左右なので2px * 2です。
CSSはあやしいのでmarginとheightとの関係は誤っているかもしれませんが、
他のレイアウトへの影響を考慮して、
スクロールバーを出さないこと、
できるだけウィンドウサイズに合わせることを目標としました。
面倒ならoverflow: hidden;でOKです。

marginは1pxではリサイズ可能になる幅が狭く、特に斜めのリサイズがかなり難しいです。
2pxでもけっこう難しいです。
余裕を見たければ3 ~ 5pxあればいいと思います。

Electron0.37ならCSS Variablesも使えます

index.css

:root {
	--html-margin: 2px;
}

html {
	margin: var(--html-margin);
	-webkit-app-region: drag;
	height: calc(100% - (var(--html-margin) * 2));
	width:  calc(100% - (var(--html-margin) * 2));
}

body {
	height: 100%;
	width:  100%;
	margin: 0;
}

関係ないこと

Electron0.37.3～4からframe: falseにしたときの挙動がおかしくなった気がします。
原因がよくわからなかったので0.37.2までダウングレードしました。
更新内容はそそられる内容なんですが…