Electronのメニューを消す

やりたいこと
実装
結果
参考にさせていただいたサイト

やりたいこと

下の記事にてElectronを使ってWebページをWindowsの実行ファイルにビルドしてみました。

しかし、下の用にメニューが表示されます(File, Edit…の部分)。

基本的に不要(リリースするときはない方がいいDeveloperToolの表示もあります)ですので消したいと思います。

実装

先述のページのmain.js(Electronのエントリーポイント)は以下の通りです。

const { app, BrowserWindow } = require('electron/main')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('file://' + __dirname + '/index.html');
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

main.jsを以下のように修正します。

修正箇所にはコメントをいれています。

const { app, BrowserWindow, Menu } = require('electron/main')//////Menuを追加

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadURL('file://' + __dirname + '/index.html');
}
Menu.setApplicationMenu(null);/////追加　MENUにnullを設定

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

結果

メニューが消えました。

副次的な効果として、Menuから実行できたDeveloperToolや全画面化などのキーボードからのショートカットも実行できなくなります。

参考にさせていただいたサイト

Menu | Electron

ネイティブアプリケーションのメニューとコンテキストメニューを作成します。