338 lines
10 KiB
Markdown
338 lines
10 KiB
Markdown
|
# Menu
|
|||
|
|
|
|||
|
|
`menu`クラスは、アプリケーションのメニューと[コンテキストメニュー](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/PopupGuide/ContextMenus)として使えるネイティブメニューを作成するのに使われます。このモジュールは、`remote`モジュール経由でレンダラープロセスで使用できるメインプロセスのモジュールです。
|
|||
|
|
|
|||
|
|
個々のメニューは複数の[menu items](menu-item.md)で成り立ち、個々のメニューアイテムはサブメニューを持てます。
|
|||
|
|
|
|||
|
|
以下は、ユーザーはページを右クリックした時、[remote](remote.md)モジュールを作成するために、（レンダラープロセス）ウェブページで動的にメニューを作成して、表示します。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<!-- index.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);
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
シンプルなテンプレートAPIでレンダラープロセスでアプリケーションメニューを作成する例です。
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var template = [
|
|||
|
|
{
|
|||
|
|
label: 'Edit',
|
|||
|
|
submenu: [
|
|||
|
|
{
|
|||
|
|
label: 'Undo',
|
|||
|
|
accelerator: 'CmdOrCtrl+Z',
|
|||
|
|
role: 'undo'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Redo',
|
|||
|
|
accelerator: 'Shift+CmdOrCtrl+Z',
|
|||
|
|
role: 'redo'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'separator'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Cut',
|
|||
|
|
accelerator: 'CmdOrCtrl+X',
|
|||
|
|
role: 'cut'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Copy',
|
|||
|
|
accelerator: 'CmdOrCtrl+C',
|
|||
|
|
role: 'copy'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Paste',
|
|||
|
|
accelerator: 'CmdOrCtrl+V',
|
|||
|
|
role: 'paste'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Select All',
|
|||
|
|
accelerator: 'CmdOrCtrl+A',
|
|||
|
|
role: 'selectall'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'View',
|
|||
|
|
submenu: [
|
|||
|
|
{
|
|||
|
|
label: 'Reload',
|
|||
|
|
accelerator: 'CmdOrCtrl+R',
|
|||
|
|
click: function(item, focusedWindow) {
|
|||
|
|
if (focusedWindow)
|
|||
|
|
focusedWindow.reload();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Toggle Full Screen',
|
|||
|
|
accelerator: (function() {
|
|||
|
|
if (process.platform == 'darwin')
|
|||
|
|
return 'Ctrl+Command+F';
|
|||
|
|
else
|
|||
|
|
return 'F11';
|
|||
|
|
})(),
|
|||
|
|
click: function(item, focusedWindow) {
|
|||
|
|
if (focusedWindow)
|
|||
|
|
focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Toggle Developer Tools',
|
|||
|
|
accelerator: (function() {
|
|||
|
|
if (process.platform == 'darwin')
|
|||
|
|
return 'Alt+Command+I';
|
|||
|
|
else
|
|||
|
|
return 'Ctrl+Shift+I';
|
|||
|
|
})(),
|
|||
|
|
click: function(item, focusedWindow) {
|
|||
|
|
if (focusedWindow)
|
|||
|
|
focusedWindow.toggleDevTools();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Window',
|
|||
|
|
role: 'window',
|
|||
|
|
submenu: [
|
|||
|
|
{
|
|||
|
|
label: 'Minimize',
|
|||
|
|
accelerator: 'CmdOrCtrl+M',
|
|||
|
|
role: 'minimize'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Close',
|
|||
|
|
accelerator: 'CmdOrCtrl+W',
|
|||
|
|
role: 'close'
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Help',
|
|||
|
|
role: 'help',
|
|||
|
|
submenu: [
|
|||
|
|
{
|
|||
|
|
label: 'Learn More',
|
|||
|
|
click: function() { require('electron').shell.openExternal('http://electron.atom.io') }
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
if (process.platform == 'darwin') {
|
|||
|
|
var name = require('electron').app.getName();
|
|||
|
|
template.unshift({
|
|||
|
|
label: name,
|
|||
|
|
submenu: [
|
|||
|
|
{
|
|||
|
|
label: 'About ' + name,
|
|||
|
|
role: 'about'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'separator'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Services',
|
|||
|
|
role: 'services',
|
|||
|
|
submenu: []
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'separator'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Hide ' + name,
|
|||
|
|
accelerator: 'Command+H',
|
|||
|
|
role: 'hide'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Hide Others',
|
|||
|
|
accelerator: 'Command+Alt+H',
|
|||
|
|
role: 'hideothers'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Show All',
|
|||
|
|
role: 'unhide'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'separator'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Quit',
|
|||
|
|
accelerator: 'Command+Q',
|
|||
|
|
click: function() { app.quit(); }
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
// Window menu.
|
|||
|
|
template[3].submenu.push(
|
|||
|
|
{
|
|||
|
|
type: 'separator'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Bring All to Front',
|
|||
|
|
role: 'front'
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var menu = Menu.buildFromTemplate(template);
|
|||
|
|
Menu.setApplicationMenu(menu);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## クラス: Menu
|
|||
|
|
|
|||
|
|
### `new Menu()`
|
|||
|
|
|
|||
|
|
新しいメニューを作成します。
|
|||
|
|
|
|||
|
|
## メソッド
|
|||
|
|
|
|||
|
|
`menu`クラスーは次のメソッドを持ちます。
|
|||
|
|
|
|||
|
|
### `Menu.setApplicationMenu(menu)`
|
|||
|
|
|
|||
|
|
* `menu` Menu
|
|||
|
|
|
|||
|
|
OS Xで、アプリケーションメニューとして`menu`を設定します。WindowsとLinuxでは、`menu`はそれぞれのウィンドウの上のメニューとして設定されます。
|
|||
|
|
|
|||
|
|
### `Menu.sendActionToFirstResponder(action)` _OS X_
|
|||
|
|
|
|||
|
|
* `action` String
|
|||
|
|
|
|||
|
|
アプリケーションの最初のレスポンダーに`action`が送信されます。規定のCocoaメニュー動作をエミュレートするために使われ、通常は`MenuItem`の`role`プロパティーを使います。
|
|||
|
|
|
|||
|
|
### `Menu.buildFromTemplate(template)`
|
|||
|
|
|
|||
|
|
* `template` Array
|
|||
|
|
|
|||
|
|
一般的に、`template`は、[MenuItem](menu-item.md)を組み立てるための `options`配列です。使用方法は下のように参照します。
|
|||
|
|
|
|||
|
|
ほかのフィールドに`template`の項目を設定でき、メニューアイテムを構成するプロパティです。
|
|||
|
|
|
|||
|
|
### `Menu.popup([browserWindow, x, y, positioningItem])`
|
|||
|
|
|
|||
|
|
* `browserWindow` BrowserWindow (オプション) - 既定では`null`です。
|
|||
|
|
* `x` Number (オプション) - 既定では -1です。
|
|||
|
|
* `y` Number (**必須** `x` が使われている場合) - 既定では -1です。
|
|||
|
|
* `positioningItem` Number (オプション) _OS X_ - 既定では -1です。
|
|||
|
|
|
|||
|
|
メニューアイテムのインデックスを指定した座標にマウスカーソルを配置します。
|
|||
|
|
|
|||
|
|
`browserWindow`でコンテキストメニューとしてメニューをポップアップします。メニューを表示する場所をオプションで`x, y`座標を指定でき、指定しなければ現在のマウスカーソル位置に表示します。
|
|||
|
|
|
|||
|
|
### `Menu.append(menuItem)`
|
|||
|
|
|
|||
|
|
* `menuItem` MenuItem
|
|||
|
|
|
|||
|
|
メニューに`menuItem`を追加します。
|
|||
|
|
|
|||
|
|
### `Menu.insert(pos, menuItem)`
|
|||
|
|
|
|||
|
|
* `pos` Integer
|
|||
|
|
* `menuItem` MenuItem
|
|||
|
|
|
|||
|
|
メニューの`pos`位置に`menuItem`を追加します。
|
|||
|
|
|
|||
|
|
### `Menu.items()`
|
|||
|
|
|
|||
|
|
メニューのアイテムを収容した配列を取得します。
|
|||
|
|
|
|||
|
|
## OS X アプリケーションメニューの注意事項
|
|||
|
|
|
|||
|
|
OS Xは、WindowsとLinuxのアプリケーションのメニューとは完全に異なるスタイルを持ち、よりネイティブのようにアプリメニューを作成するのに幾つかの注意事項があります。
|
|||
|
|
|
|||
|
|
### 標準的なメニュー
|
|||
|
|
|
|||
|
|
OS Xでは、`Services`と`Windows`メニューのように定義された標準的な多くのメニューがあります。標準的なメニューを作成するために、メニューの`role`に次のどれかを設定する必要があり、Electronはそれを受けて標準的なメニューを作成します。
|
|||
|
|
|
|||
|
|
* `window`
|
|||
|
|
* `help`
|
|||
|
|
* `services`
|
|||
|
|
|
|||
|
|
### 標準的なメニューアイテムの動作
|
|||
|
|
|
|||
|
|
`About xxx`と`Hide xxx`、`Hide Others`のようないくつかのメニューアイテム用にOS Xは標準的な動作を提供します。メニューアイテムの動作に標準的な動作を設定するために、メニューアイテムの`role`属性を設定すべきです。
|
|||
|
|
|
|||
|
|
### メインのメニュー名
|
|||
|
|
|
|||
|
|
OS Xでは、設定したラベルに関係なく、アプリケーションの最初のアイテムのラベルはいつもアプリの名前です。変更するために、アプリにバンドルされている`Info.plist`ファイルを修正してアプリの名前を変更する必要があります。詳細は、 [About Information Property List Files][AboutInformationPropertyListFiles] を見てください。
|
|||
|
|
|
|||
|
|
## メニューアイテムの位置
|
|||
|
|
|
|||
|
|
`position`を使用することができ、`Menu.buildFromTemplate`でメニューを構築するときに`id`がアイテムを配置する方法をコントロールします。
|
|||
|
|
|
|||
|
|
`MenuItem`の`position`属性は、`[placement]=[id]`をもち、 `placement`は`before`や `after`、 `endof`の一つが設定され、`id`はメニューの設定されているアイテムで一意のIDです。
|
|||
|
|
|
|||
|
|
* `before` - IDから参照したアイテムの前にアイテムを挿入します。参照するアイテムが存在しないのなら、メニューの最後にアイテムが挿入されます。
|
|||
|
|
* `after` - IDから参照したアイテムの後にアイテムを挿入します。参照するアイテムが存在しないのなら、メニューの最後にアイテムが挿入されます。
|
|||
|
|
* `endof` -IDから参照したアイテムを含む論理グループの最後にアイテムを挿入します（グループはアイテムを分けるために作成されます）。参照するアイテムが存在しないのなら、付与されたIDで新しい分離グループが作成され、そのグループのあとにアイテムが挿入されます。
|
|||
|
|
|
|||
|
|
アイテムが配置されたとき、新しいアイテムが配置されるまで、すべての配置されていないアイテムがその後に挿入されます。同じ場所にメニューアイテムのグループを配置したいのなら、最初にアイテムで場所を指定する必要があります。
|
|||
|
|
|
|||
|
|
### 具体例
|
|||
|
|
|
|||
|
|
テンプレート:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
[
|
|||
|
|
{label: '4', id: '4'},
|
|||
|
|
{label: '5', id: '5'},
|
|||
|
|
{label: '1', id: '1', position: 'before=4'},
|
|||
|
|
{label: '2', id: '2'},
|
|||
|
|
{label: '3', id: '3'}
|
|||
|
|
]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
メニュー:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
- 1
|
|||
|
|
- 2
|
|||
|
|
- 3
|
|||
|
|
- 4
|
|||
|
|
- 5
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
テンプレート:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
[
|
|||
|
|
{label: 'a', position: 'endof=letters'},
|
|||
|
|
{label: '1', position: 'endof=numbers'},
|
|||
|
|
{label: 'b', position: 'endof=letters'},
|
|||
|
|
{label: '2', position: 'endof=numbers'},
|
|||
|
|
{label: 'c', position: 'endof=letters'},
|
|||
|
|
{label: '3', position: 'endof=numbers'}
|
|||
|
|
]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
メニュー:
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
- ---
|
|||
|
|
- a
|
|||
|
|
- b
|
|||
|
|
- c
|
|||
|
|
- ---
|
|||
|
|
- 1
|
|||
|
|
- 2
|
|||
|
|
- 3
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
[AboutInformationPropertyListFiles]: https://developer.apple.com/library/ios/documentation/general/Reference/InfoPlistKeyReference/Articles/AboutInformationPropertyListFiles.html
|