Electron-メニュー

デスクトップアプリには2つのタイプのメニューがあります-アプリケーションメニュー（トップバー上）と*コンテキストメニュー*（右クリックメニュー）。この章では、これらの両方を作成する方法を学習します。

_Menu_および_MenuItem_モジュールの2つのモジュールを使用します。 _Menu_および_MenuItem_モジュールは、メインプロセスでのみ使用できることに注意してください。レンダラープロセスでこれらのモジュールを使用するには、_remote_モジュールが必要です。これは、コンテキストメニューを作成するときに発生します。

さて、メインプロセス用の新しい main.js ファイルを作成しましょう-

const {app, BrowserWindow, Menu, MenuItem} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'indexl'),
      protocol: 'file:',
      slashes: true
   }))
}

const template = [
   {
      label: 'Edit',
      submenu: [
         {
            role: 'undo'
         },
         {
            role: 'redo'
         },
         {
            type: 'separator'
         },
         {
            role: 'cut'
         },
         {
            role: 'copy'
         },
         {
            role: 'paste'
         }
      ]
   },

   {
      label: 'View',
      submenu: [
         {
            role: 'reload'
         },
         {
            role: 'toggledevtools'
         },
         {
            type: 'separator'
         },
         {
            role: 'resetzoom'
         },
         {
            role: 'zoomin'
         },
         {
            role: 'zoomout'
         },
         {
            type: 'separator'
         },
         {
            role: 'togglefullscreen'
         }
      ]
   },

   {
      role: 'window',
      submenu: [
         {
            role: 'minimize'
         },
         {
            role: 'close'
         }
      ]
   },

   {
      role: 'help',
      submenu: [
         {
            label: 'Learn More'
         }
      ]
   }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
app.on('ready', createWindow)

ここでは、テンプレートからメニューを構築しています。これは、関数にJSONとしてメニューを提供し、残りを処理することを意味します。次に、このメニューをアプリケーションメニューとして設定する必要があります。

次に、indexlという空のHTMLファイルを作成し、このアプリケーションを実行します-

$ electron ./main.js

アプリケーションメニューの通常の位置に、上記のテンプレートに基づいたメニューが表示されます。

アプリケーションメニュー

このメニューはメインプロセスから作成しました。アプリのコンテキストメニューを作成しましょう。 HTMLファイルでこれを行います-

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Menus</title>
   </head>

   <body>
      <script type = "text/javascript">
         const {remote} = require('electron')
         const {Menu, MenuItem} = remote

         const menu = new Menu()

        //Build menu one item at a time, unlike
         menu.append(new MenuItem ({
            label: 'MenuItem1',
            click() {
               console.log('item 1 clicked')
            }
         }))

         menu.append(new MenuItem({type: 'separator'}))
         menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
         menu.append(new MenuItem ({
            label: 'MenuItem3',
            click() {
               console.log('item 3 clicked')
            }
         }))

        //Prevent default action of right click in chromium. Replace with our menu.
         window.addEventListener('contextmenu', (e) => {
            e.preventDefault()
            menu.popup(remote.getCurrentWindow())
         }, false)
      </script>
   </body>
</html>

リモートモジュールを使用して、MenuおよびMenuItemモジュールをインポートしました。次に、メニューを作成し、メニュー項目を1つずつ追加しました。さらに、クロムでの右クリックのデフォルトアクションを防止し、メニューに置き換えました。

コンテキストメニュー

Electronでのメニューの作成は非常に簡単な作業です。これで、これらのアイテムにイベントハンドラーをアタッチし、必要に応じてイベントを処理できます。

Electron-menus

Electron-メニュー