素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【Vue.js】Electronのタイトルバーを消す方法【ドラッグ移動も対応】

投稿日:

スポンサーリンク

336×280




Electronアプリのタイトルバーを消したい

Electron製のアプリケーションを作るとデフォルトではこのように、アプリケーション名がタイトルバーに表示されます。

しかし、正直なところデザイン的にはタイトルバーは表示されなくても良い情報なので消したいですよね。

Electronであれば起動スクリプトに手を加えるだけで簡単にタイトルバーを消すことが出来るのでやり方をご紹介しようと思います。

手順

new BrowserWindowにtitleBarStyleを追加

消し方はとても簡単で、Electronの起動処理スクリプトでBrowserWindownewするときのオプションとして、titleBarStyle: "hidden"を加えるだけで実現可能です。

確認

かなりスッキリしましたね。

Window操作のボタンは残るのでご安心を♪

ドラッグ出来ない問題

しかし、タイトルバーを消してしまうとウィンドウのドラッグ移動出来なくなってしまいます。

ドラッグ移動を可能にするためには以下のようなCSSを当てる必要があります。

公式では、body要素に対して、-webkit-app-region: dragを指定しつつ、ドラッグさせたくない操作要素には-webkit-app-region: no-drag;をつけて制御すると紹介されています。

しかし、これだとウィンドウの領域全体でドラッグ出来てしまうためエディターなどの機能を搭載している場合にテキスト選択しようとしてもウィンドウドラッグになってしまいます

もちろん、テキスト選択する要素に対して、-webkit-app-region: no-drag;をつけても良いのですが、明らかにウィンドウドラッグエリア<テキスト選択エリアだと思うので、ウィンドウドラッグを許可する要素のみ-webkit-app-region: drag;をかけたほうが合理的な気がしたので、今回は以下のようなCSSを適用することにしました。

これでいい感じにタイトルバーを消しつつドラッグが出来るElectronアプリケーションが構築出来ました♪

本日のオススメ商品

終わりに

以上のようにちょっとはまりがちな部分ですが、対策方法はしっかりと用意されています。

お困りの方は是非こちらの方法を試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist