開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

In the realm of desktop application development, Electron.js stands out as a robust framework for building cross-platform apps using web technologies. Among its many features, integrating tray icons can significantly enhance user experience by providing quick access to essential functionalities. Today, let’s explore how we can implement tray icons in our Electron.js application, from setup to implementation.

Setting Up A Electron.js Project

First things first, let’s set up a basic Electron.js project:

1. Initialize a new Node.js project

mkdir project_name && cd project_name
npm init -y

2. Install Electron.js

npm install electron

3. Create project files

project_name/
├── icon.png
├── index.html
├── index.js
├── node_modules
├── package.json
└── package-lock.json

– `index.html` for the application’s UI.

– `index.js` for Electron main process code.

– An icon file (`icon.png`) for the tray icon.

– add `start` command in package.json like this.

{
  "name": "project_name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^29.0.1"
  }
}

Implementing Tray Icon Functionality

Next, let’s dive into implementing the tray icon functionality in `index.js` file:

const { app, Tray, BrowserWindow } = require('electron');
const path = require('path');

let tray = null;
let mainWindow = null;

app.on('ready', () => {
  tray = new Tray(path.join(__dirname, 'icon.png'));

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  tray.on('click', () => {
    mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
  });
});

Running Your Electron.js Application

To run Electron.js application, execute the following command in the terminal:

npm start

This command will start Electron application, and we should see the tray icon appear in our system tray. Clicking on the tray icon should toggle the visibility of the application window.

Conclusion

Integrating tray icons into Electron.js application is a straightforward process that can greatly improve user experience. Whether it’s for displaying notifications, providing quick access to features, or simply adding a professional touch to our app, tray icons are a valuable addition to any desktop application.

With Electron.js, implementing tray icons becomes seamless, allowing us to focus on crafting an exceptional user experience for our desktop application. So why not enhance our Electron.js app with a sleek tray icon for innovative ideas?

Hope you enjoy that.

By Asahi

Tweet

スクリーンセーバーが新しくなり
デスクトップにウィジェットを配置できるようになったそうです。

OS標準のメモアプリでPDFを見ることができる機能が追加されたり、
FaceTimeやZoom等で画面共有で共有するコンテンツに、
カメラで撮影している自分自身をオーバーレイ表示することが可能になったようです。

既にサードパーティのサービスを利用すれば実現できていた機能もありますが
OS標準機能で利用可能になったのは便利ですね。

追加された機能の中で、カメラに向かってハンドジェスチャーをするだけで、
エフェクトを表示することができる機能が面白そうだなと思いました。

水曜担当：Tanaka

Tweet

先日Appleが新型MacProを発表しました。

M2 Ultraプロセッサを搭載したMacProです。
これで現行のMacは全てAppleシリコン搭載になることになります。

Tweet

Appleが最新Apple SiliconのM2とM2 Proを搭載した新型Mac miniの販売を始めました。

ディスクリートGPUを搭載したインテルiMacと比較しても画像処理が数倍高速になっている様です。

Tweet

You might see this error message when debugging the app to your device.

This operation can fail if the version of the OS on the device is incompatible with the installed version of Xcode.

Today I would like to share with you how I solved this issue.

Firstly , you have to check the compatibility versions between Xcode and iOS. You can check on the link below.

https://developer.apple.com/support/xcode/

Secondly , check the version of your iOS device. Let’s say 15.4 in this case. Then you can check the device supports on your Mac. You can check under this path

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/

If the directory is missing download support files for 15.4 (your iOS version) , you can download the files from this github.

https://github.com/filsv/iOSDeviceSupport

As a final step, restart your Xcode.

Yuuma

Tweet