LoginSignup
12

More than 5 years have passed since last update.

Electron 1.0でコンテキストメニュー

Last updated at Posted at 2016-08-30

Electron 1.0でコンテキストメニュー

Electronでのコンテキストメニュー(右クリックで現れるメニューのやつ)の色々を忘れないようにメモ。

こちらを参考に実装。
electron/menu.md at master · electron/electron · GitHub

環境

module version
node v6.1.0
electron 1.2.2

構成

app
├── index.html
├── main.js
└── package.json

index.htmlは最低限のもので。

index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="">
</head>
<body>
  <div>
    <h1>Sample App</h1>
  </div>
  <script>
    //ここにスクリプトを追加
  </script>
</body>
</html>
script
const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;

var menu = new Menu();
menu.append(new MenuItem({ label: 'MenuItem1', click: function() { console.log('item 1 clicked'); } }));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }));

window.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  menu.popup(remote.getCurrentWindow());
}, false);

コンテキストメニューの色々

  • サブメニュー
submenu
menu.append(new MenuItem({
  label: 'サブメニュー一覧',
  submenu: [
     {
      label: 'サブメニュー1'
     },
     {
      label: 'サブメニュー2'
     }
   ]
}));
  • チェックボックス
checkbox
menu.append(new MenuItem({
  label: 'チェックボックス',
  type: 'checkbox',
  checked: true,// 初期値
  click: function(e) {
    console.log(e.checked);// チェックされたかどうか
  }
}));
  • ラジオ
radio
menu.append(new MenuItem({
  label: 'OK',
  type: 'radio',
  click: function(e) {
    console.log(e.checked)
  }
}));
menu.append(new MenuItem({
  label: 'NG',
  type: 'radio',
  click: function(e) {
    console.log(e.checked)
  }
}));
  • ラジオ(サブメニュー)
radio(submenu)
menu.append(new MenuItem({
  label: 'ラジオ(サブメニュー)',
  submenu: [
    {
      label: 'ラジオ(サブメニュー)1',
      type: 'radio',
      click: function(e) {
        console.log(e.checked)
      }
    },{
      label: 'ラジオ(サブメニュー)2',
      type: 'radio',
      click: function(e) {
        console.log(e.checked)
      }
     }
   ],
}));
  • オプションの色々(抜けてたり、間違っているかもしれませんが。。。)
キー名 名前 補足
label ラベル コピー
sublabel サブラベル copy
icon アイコン icon.png サイズの指定は出来ない・・・?
accelerator ショートカットキーの割り当て Ctrl+C  
type タイプ checkbox noraml, checkbox, separator, submenu, radio
enabled 有効/無効 false
visible 表示 true
submenu サブメニュー [{label: 'submenu'}]
click クリック クリックされた際の挙動

よくある機能

コピーや貼り付けなどよくある機能はデフォルトで用意されている。
roleにcopyやpasteをセットする。

script
menu.append(new MenuItem({
  label: 'コピー',
  accelerator: 'CmdOrCtrl+C',
  role: 'copy'
}));
menu.append(new MenuItem({
  label: '貼り付け',
  accelerator: 'CmdOrCtrl+V',
  role: 'paste'
}));

とりあえずで書いたので後で整理しよう。。。

今回のソースはこちらに。

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
12