Electronのサムネイル ツールバー にカスタムボタンを設置する

2016年12月27日

動作環境

Electron: 1.3.9

 

導入

公式のドキュメントを参考に設置をしてみる

Thumbnail Toolbars

 

'use strict';

// Electronのモジュール
const electron = require("electron");
const path = require('path');

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
 if (process.platform != 'darwin') {
 app.quit();
 }
});

// Electronの初期化完了後に実行
app.on('ready', function() {
 // メイン画面の表示。ウィンドウの幅、高さを指定できる
 mainWindow = new BrowserWindow({width: 800, height: 600});
 mainWindow.loadURL(path.join(__dirname, 'index.html'));

 // サムネイルボタンを設置
 createThumbarButton(mainWindow, [
 {
 tooltip: 'これはAボタン',
 icon: path.join(__dirname, 'public/icon/A.png'),
 click() { console.log('A button') }
 },
 {
 tooltip: 'これはBボタン',
 icon: path.join(__dirname, 'public/icon/B.png'),
 click() { console.log('B button') }
 }
 ])

// ウィンドウが閉じられたらアプリも終了
 mainWindow.on('closed', function() {
 mainWindow = null;
 });
});

// サムネイルツールバーへ設定する
function createThumbarButton(window, menu){
 window.setThumbarButtons(menu)

}


 

 

上記の設定をすると以下のようになります。

 

 

今日はこの辺でー

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Electron
-, , , ,