2016年6月14日火曜日

Electronで、プリケーションメニュー

Electronで、プリケーションメニューです。実際にフルスクリーン表示したり、ウィンドウを最小化したり、ヘルプとして外部のウェブページを表示したりすることができます。なかなか面白い。

index.html
<script>
const {remote} = require('electron');
const {Menu, MenuItem} = remote;

const template = [
  {
    label: '編集',
    submenu: [
      {
        label: 'やり直し',
        accelerator: 'CmdOrCtrl+Z',
        role: 'undo'
      },
      {
        label: '再度',
        accelerator: 'Shift+CmdOrCtrl+Z',
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        label: '切り取り',
        accelerator: 'CmdOrCtrl+X',
        role: 'cut'
      },
      {
        label: 'コピー',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      },
      {
        label: '貼り付け',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      },
      {
        label: 'すべてを選択',
        accelerator: 'CmdOrCtrl+A',
        role: 'selectall'
      },
    ]
  },
  {
    label: '表示',
    submenu: [
      {
        label: 'リロード',
        accelerator: 'CmdOrCtrl+R',
        click(item, focusedWindow) {
          if (focusedWindow) focusedWindow.reload();
        }
      },
      {
        label: 'フルスクリーン',
        accelerator: process.platform === 'darwin' ? 'Ctrl+Command+F' : 'F11',
        click(item, focusedWindow) {
          if (focusedWindow)
            focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
        }
      },
      {
        label: '開発ツール',
        accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
        click(item, focusedWindow) {
          if (focusedWindow)
            focusedWindow.webContents.toggleDevTools();
        }
      },
    ]
  },
  {
    label: 'ウィンドウ',
    role: 'window',
    submenu: [
      {
        label: '最小化',
        accelerator: 'CmdOrCtrl+M',
        role: 'minimize'
      },
      {
        label: '閉じる',
        accelerator: 'CmdOrCtrl+W',
        role: 'close'
      },
    ]
  },
  {
    label: 'ヘルプ',
    role: 'help',
    submenu: [
      {
        label: '詳細',
        click() { require('electron').shell.openExternal('http://electron.atom.io'); }
      },
    ]
  },
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
</script>


参考サイト
Menu(Electron)

0 件のコメント:

コメントを投稿