Electronでメニューバーが作れるらしいのでやってみたら出来ず。ところが思わぬところでメニューバーが発生・・・。

2016/02/11 2016/06/11

[ad#top-1]

クロスプラットホームで動作するElectronですが、基本的にHTML+CSS+Japascriptで動くとはいえ、デスクトップアプリ特有のデザインもほしいところです。その代表が「メニューバー」かと。

Googleで「Electron メニューバー」と検索すると、何件もヒットしたので、それらを参考にコーディングしてみました。

ちなみにメインメニューは画像を指定する必要があるそうです。なので、アイコン画像として

を、取り急ぎ作成。「icon.png」というファイル名にしております。それを踏まえてソースコードはこちら。

‘use strict’;

const electron = require(“electron”);

const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

var Tray = require(‘tray’);

var Menu = require(‘menu’);

let mainWindow;

app.on(“ready”, function(){

   mainWindow = new BrowserWindow({ width: 600, height: 400 });

   mainWindow.loadURL(“file://” + __dirname + “/index.html”);

   var appIcon = new Tray(__dirname + ‘/icon.png’);

   // コンテキストメニュー追加

   var contextMenu = Menu.buildFromTemplate([

      {label: ‘メニュー1’, type: ‘radio’},

      {label: ‘メニュー2’, type: ‘radio’},

      {type: ‘separator’},

      {label: ‘サブメニュー’, submenu: [

         {label: ‘サブメニュー1’},

         {label: ‘サブメニュー2’}

      ]},

      {label: ‘終了’, accelerator: ‘Command+Q’, click: function() { app.quit(); }}

   ]);

   appIcon.setContextMenu(contextMenu);

   // アイコンにマウスオーバーした時の説明

   appIcon.setToolTip(‘This is sample.’);

   mainWindow.on(“closed”, function(){

      mainWindow = null;

   });

});