Electronでメニューバーが作れるらしいのでやってみたら出来ず。ところが思わぬところでメニューバーが発生・・・。
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; |
}); |
}); |
修正したのはindex.jsのみです。それ以外は以下のブログのままになっていますので参考にしてください。
ちなにみ、Windowsのexeファイルにする方法はこちらです。
で、早速起動してみたんですが・・・、
メニューバーが出ない・・・。
何でだろ??といろいろいじってみたのですが、やっぱり現れず。あきらめかけたその時、思わぬところに出現していることを発見しました。
タスクトレイにアイコンが・・・
で、右クリックでメニューが開きます。どうりでメインメニューが画像であるわけだ・・・。
ということで、ちょっと微妙な結果となってしまいましたが、Electronが掲載されているサイトってほとんどがMacなんです。Macだとタスクバーが上部にあるので何となくメニューバーっぽく見えるのですが、Windowsだとちょっとアレですね。
やっぱ、フォーム内にメニューを作る場合はHTML+CSSで作らないとダメみたいですね。
[ad#ad-1]
スポンサーリンク