LoginSignup
37

More than 5 years have passed since last update.

Electronに開発用メニューとショートカットを付ける

Last updated at Posted at 2015-08-12

2016年5月 補足

この記事の内容は Electron v0.3x 時代の内容です。2016年5月最新の Electron v1.1.1 で確認したところ、開発者メニューは最初から表示された状態になっています。また、 Electron v1.0 より APIが刷新されたため、下記のコードは Electron v1.0 以降ではそのまま動作しません。

以下は当時の記事をそのまま残したものです。

はじめに

この記事では、Electronに以下の開発者用メニューとショートカットを追加する方法を紹介します。

スクリーンショット 2015-08-12 11.37.32.png

初期のElectronには上記のメニューとキーボードショートカットがデフォルトで設定されていたのですが、v0.25.2以降、削除されてしまいました。 

現在ではQuick Startのmain.jsサンプルに従うと、Electronの起動直後に開発者メニューが自動で開きます。しかしUIのデバッグ中などは開発者メニューを任意のタイミングで開閉できたほうが圧倒的に楽でなので、ここでは上記の開発者メニューとショートカットを自前のコードで復活させる方法を紹介します。

コード

ずばり以下のコードになります。元々のmain.jsとの違いは2点だけです。

  • mainWindow.openDevTools()の呼び出しを、installMenu()の呼び出しに変更
  • installMenu関数を追加
main.js
var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 1024, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  installMenu();

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});


function installMenu() {
  var Menu = require('menu');
  if(process.platform == 'darwin') {
    menu = Menu.buildFromTemplate([
      {
        label: 'Electron',
        submenu: [
          {
            label: 'Quit',
            accelerator: 'Command+Q',
            click: function() { app.quit(); }
          },
        ]
      },
      {
        label: 'View',
        submenu: [
          {
            label: 'Reload',
            accelerator: 'Command+R',
            click: function() { mainWindow.restart(); }
          },
          {
            label: 'Toggle Full Screen',
            accelerator: 'Ctrl+Command+F',
            click: function() { mainWindow.setFullScreen(!mainWindow.isFullScreen()); }
          },
          {
            label: 'Toggle Developer Tools',
            accelerator: 'Alt+Command+I',
            click: function() { mainWindow.toggleDevTools(); }
          },
        ]
      }
    ]);
    Menu.setApplicationMenu(menu);
  } else {
    menu = Menu.buildFromTemplate([
      {
        label: '&View',
        submenu: [
          {
            label: '&Reload',
            accelerator: 'Ctrl+R',
            click: function() { mainWindow.restart(); }
          },
          {
            label: 'Toggle &Full Screen',
            accelerator: 'F11',
            click: function() { mainWindow.setFullScreen(!mainWindow.isFullScreen()); }
          },
          {
            label: 'Toggle &Developer Tools',
            accelerator: 'Alt+Ctrl+I',
            click: function() { mainWindow.toggleDevTools(); }
          },
        ]
      }
    ]);
    mainWindow.setMenu(menu);
  }

}

Electronメニューも拡張する(Mac)

Mac限定です。デフォルトではElectronメニューには「Quit」しかありませんが、次のような感じで修正すれば、初期Electronが持っていたのと同じAboutやShow/Hideを追加できます。

// 前略
    menu = Menu.buildFromTemplate([
      {
        label: 'Electron',
        submenu: [
          {
            label: 'About Electron',
            selector: 'orderFrontStandardAboutPanel:'
          },
          {
            type: 'separator'
          },
          {
            label: 'Services',
            submenu: []
          },
          {
            type: 'separator'
          },
          {
            label: 'Hide Electron',
            accelerator: 'Command+H',
            selector: 'hide:'
          },
          {
            label: 'Hide Others',
            accelerator: 'Command+Shift+H',
            selector: 'hideOtherApplications:'
          },
          {
            label: 'Show All',
            selector: 'unhideAllApplications:'
          },
          {
            type: 'separator'
          },
          {
            label: 'Quit',
            accelerator: 'Command+Q',
            click: function() { app.quit(); }
          },
        ]
      },
// 後略

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37