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

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

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

こちらを参考に実装。
[electron/menu.md at master · electron/electron · GitHub](https://github.com/electron/electron/blob/master/docs-translations/jp/api/menu.md)

### 環境

| module  | version |
|:---:|:----:|
| node | v6.1.0 |
| electron | 1.2.2 |

### 構成
```shell-session
app
├── index.html
├── main.js
└── package.json
```


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


```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>
```


```js: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);
```

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


+ **サブメニュー**

```js:submenu
menu.append(new MenuItem({
  label: 'サブメニュー一覧',
  submenu: [
     {
      label: 'サブメニュー1'
     },
     {
      label: 'サブメニュー2'
     }
   ]
}));
```

+ **チェックボックス**

```js:checkbox
menu.append(new MenuItem({
  label: 'チェックボックス',
  type: 'checkbox',
  checked: true,// 初期値
  click: function(e) {
    console.log(e.checked);// チェックされたかどうか
  }
}));
```

+ **ラジオ**

```js: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)
  }
}));
```

+ **ラジオ(サブメニュー)**
 
```js: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をセットする。

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

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

今回のソースは[こちら](https://github.com/yamayamasan/electron-contextmenu-sample)に。