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

2016年5月 補足

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

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

はじめに

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

初期の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(); }
          },
        ]
      },
// 後略