non vorrei lavorare

2020年度からの小学校プログラミング教育の必修化を親として迎えるブロガーの書く、子供との日常

ElectronでmacOSのDockやWindowsのタスクバーに独自のアイコンを表示するには

こんばんは。お盆の休みは奥さんが仕事だったので、近場の高尾山に子供たちと一緒に行ってきた@kjunichiです。

背景

Electronベースの3Dデスクトップマスコットアプリのgopheronを細々と開発している

このアプリにRaspberry PiのCPU温度を表示させる機能を追加したことなどを インスタで投稿したら、結構海外で良い反応を貰うことがある。

そんなアプリのアイコンがElectronのデフォルトなのはそろそろ問題じゃないかと 重い腰を上げて取り組んだ

なにはなくともアイコン画像の用意と読み込み

macOSWindows共にNativeImage型の画像データを用意する。

その為には、nativeImage#createFromPathメソッドを利用することで、画像ファイルからNativeImage型を取得できる。

const { app, BrowserWindow, ipcMain, nativeImage, shell, Menu } = require('electron')
const iconimage = nativeImage.createFromPath(`${__dirname}/gopheron_icon.png`)

macOS

macOSではDock関連のAPIがapp.dockに用意されており、その中のapp.dock#setIconメソッドを利用することで、Dockのアイコンを指定することができた。

const { app, nativeImage } = require('electron')
app.dock.setIcon(iconimage)

f:id:kjw_junichi:20180820202054p:plain

Windows

WindowsLinuxではBrowserWindow#setIconでできた。

mainWindow = new BrowserWindow({/*...*/})
mainWindow.setIcon(iconimage)

f:id:kjw_junichi:20180820201510p:plain

学べたこと

WindowsmacOSそれぞれ、今回使ったプラットフォームに依存するElectronのAPImacOSだとWindows向けのAPIは呼び出すこと

Uncaught Exception:
TypeError: mainWindow.setIcon is not a function

となり、逆にWindowsmacOSAPIを呼び出すと

Uncaught Exception:
TypeError: Cannot read property 'setIcon' of undefined

と怒られるので、プラットフォーム毎の条件分岐が必要なことが分かった。

また、パッケージツールで自前のアイコンを作成して.exeや.appを作成しなくても 今回の方法である程度は独自のアプリ風のテイストを出せることが分かった。

関連記事

8年前の記事

7年前の記事