systemTrayにアプリelectronjsを表示する方法

導入

Electron JS は、JavaScript、HTML、CSS などの Web テクノロジーを使用してデスクトップ アプリケーションを構築するための一般的なフレームワークです。デスクトップ アプリケーションの重要な機能の 1 つは、デスクトップ アプリケーションをシステム トレイと統合できることで、ユーザーは主要な機能や設定に簡単にアクセスできます。この記事では、Electron JS アプリケーションの作成とシステム トレイとの統合について説明します。

システムトレイにアプリを表示する

アプリケーションをシステム トレイに表示するには、Electron から Tray クラスのインスタンスを作成する必要があります。このインスタンスは、システム トレイ内のアプリをアイコンで表します。

次の行を main.js ファイルに追加します。

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

アイコンのカスタマイズ

トレイ アイコンを変更するには、トレイ コンストラクターのパスを更新します。

tray = new Tray('path/to/new_icon.png');

トレイ アイコンとして使用する有効な画像ファイルをパスが指していることを確認してください。

表示、非表示、および終了ボタンの追加

システム トレイ メニューの機能を強化するために、アプリケーションの表示、非表示、終了のオプションを追加できます。 main.js ファイルを次のように変更します:

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

説明

1. アプリボタンを表示:

   {
     label: 'Show App',
     click: () => {
       mainWindow.show();
     }
   }

このメニュー項目をクリックすると、アプリケーションのウィンドウが再び表示されます。

1. アプリボタンを非表示:

   {
     label: 'Hide App',
     click: () => {
       mainWindow.hide();
     }
   }

このメニュー項目は、アプリケーションをシステム トレイに最小化し、タスクバーから非表示にします。

1. 終了ボタン:

   {
     label: 'Exit',
     click: () => {
       app.quit();
     }
   }

このメニュー項目を選択すると、アプリケーションが終了します。

完全なコンテキスト メニューの例

設定ウィンドウを開いたり、アプリケーション情報を表示したりするなど、オプションを追加してコンテキスト メニューをさらにカスタマイズできます。

const { app, BrowserWindow, Tray, Menu } = require('electron');
let mainWindow;
let tray;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  mainWindow.loadFile('index.html');
  createTray();
});

function createTray() {
  tray = new Tray('path/to/icon.png'); // Path to your tray icon
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Show App',
      click: () => {
        mainWindow.show();
      }
    },
    {
      label: 'Hide App',
      click: () => {
        mainWindow.hide();
      }
    },
    {
      label: 'Settings',
      click: () => {
        // Open a settings window
      }
    },
    {
      label: 'About',
      click: () => {
        // Show about information
      }
    },
    {
      label: 'Exit',
      click: () => {
        app.quit();
      }
    }
  ]);
  tray.setToolTip('My Electron App');
  tray.setContextMenu(contextMenu);
}

結論

これらの手順に従うことで、システム トレイとシームレスに統合する Electron JS を使用したデスクトップ アプリケーションを作成できます。この統合により、システム トレイから直接アプリの重要な機能に簡単にアクセスできるようになり、ユーザー エクスペリエンスが向上します。アプリケーションの表示、非表示、終了のいずれの場合でも、システム トレイはユーザーがアプリを操作するための便利な方法を提供します。

以上がsystemTrayにアプリelectronjsを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。