Merge pull request #4217 from yamatoya/master
Add Japanes translated docs, improve a doc style.
This commit is contained in:
Cheng Zhao
commit
58127e3d52
2 changed files with 338 additions and 1 deletions
337
docs-translations/jp/api/menu.md
Normal file
337
docs-translations/jp/api/menu.md
Normal file
|
|
@ -0,0 +1,337 @@
|
|||
# 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
|
||||
|
|
@ -302,7 +302,7 @@ You can make use of `position` and `id` to control how the item will be placed
|
|||
when building a menu with `Menu.buildFromTemplate`.
|
||||
|
||||
The `position` attribute of `MenuItem` has the form `[placement]=[id]`, where
|
||||
placement is one of `before`, `after`, or `endof` and `id` is the unique ID of
|
||||
`placement` is one of `before`, `after`, or `endof` and `id` is the unique ID of
|
||||
an existing item in the menu:
|
||||
|
||||
* `before` - Inserts this item before the id referenced item. If the
|
||||
|
|
|
|||
Loading…
Reference in a new issue