Electronでタイトルバーを非表示にしつつウィンドウの操作ボタンを表示する方法 #JavaScript

要はこうしたい人向け。

概要

Electronを利用するとWebフロントエンドの技術で簡単にネイティブアプリケーションが開発可能で便利な反面、ちょっと野暮ったいタイトルバーがついてきます。

これは、オプションで簡単に削除することが可能なのですが、そうした場合にはOSに付随する閉じる/最大化/最小化といったボタンまで消えてしまいます。

これは不便なので、どうにかボタンのみは残したままフレームレスにしたいところでしたが、探せど探せど国内にこれにあたる情報がなく、ようやく海外の情報で知り得たのでQiitaで共有しておきます。

ちなみに、パッチをあてる複雑な設定が出てきたこともありますが、どうやら今のバージョンですとそこまで複雑なことをする必要もなかったようで、平易な設定で可能なので、はじめから公式ドキュメントを探したほうがはやそうな結果でした。

Electronデフォルトのタイトルバーつきウィンドウ

ElectronのQuick Startレポジトリからクローンしてきて走らせると、このような状態のウィンドウが表示されます（コンテンツの中身は少し変えています）。

普通のアプリケーションについている場合はそこまで気になりませんが、Electronアプリケーションの場合はWebのようなナビゲーションなどがつくことを考えると、少々不格好といえますね。

完全に非表示にした状態のウィンドウ

次に、完全にネイティブのコンポーネントを削除した状態のウィンドウです。
こちらは様々なところで紹介されていますが、以下のようにmain.jsを編集することで実現が可能となります。

main.js

function createWindow () {
  // Create the browser window.
---  mainWindow = new BrowserWindow({width: 800, height: 600})
+++  mainWindow = new BrowserWindow({frame: false, width: 800, height: 600})

2016年11月時点でのレポジトリの状況ですと、16行目に存在するnew BrowserWindow()のパラメータにframeを追加してやることで可能となっています。

今回達成したいウィンドウ

最後に、今回実現したい形となります。
こちらは、非表示の場合のウィンドウと同様に、16行目のnew BrowserWindow()へ設定をひとつ追加するだけで実現することが可能となります。具体的には、以下のような形となります。

main.js

function createWindow () {
  // Create the browser window.
---  mainWindow = new BrowserWindow({width: 800, height: 600})
+++  mainWindow = new BrowserWindow({titleBarStyle: 'hidden',width: 800, height: 600})

まとめ

意外と需要がありそうなわりに、情報が少なかったこともあって、開発者さんたちの助けになればと思います。
Electronはバージョンの違い(とくに1.0以降かそれ以前か)で大きく仕様が変わるため、できる限り公式ドキュメントを参照することをおすすめします。