ElectronでmacOSのDockやWindowsのタスクバーに独自のアイコンを表示するには
こんばんは。お盆の休みは奥さんが仕事だったので、近場の高尾山に子供たちと一緒に行ってきた@kjunichiです。
背景
Electronベースの3Dデスクトップマスコットアプリのgopheronを細々と開発している
このアプリにRaspberry PiのCPU温度を表示させる機能を追加したことなどを インスタで投稿したら、結構海外で良い反応を貰うことがある。
そんなアプリのアイコンがElectronのデフォルトなのはそろそろ問題じゃないかと 重い腰を上げて取り組んだ
なにはなくともアイコン画像の用意と読み込み
macOS、Windows共に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)
Windows編
WindowsとLinuxではBrowserWindow#setIconでできた。
mainWindow = new BrowserWindow({/*...*/}) mainWindow.setIcon(iconimage)
学べたこと
Windows、macOSそれぞれ、今回使ったプラットフォームに依存するElectronのAPIは macOSだとWindows向けのAPIは呼び出すこと
Uncaught Exception: TypeError: mainWindow.setIcon is not a function
Uncaught Exception: TypeError: Cannot read property 'setIcon' of undefined
と怒られるので、プラットフォーム毎の条件分岐が必要なことが分かった。
また、パッケージツールで自前のアイコンを作成して.exeや.appを作成しなくても 今回の方法である程度は独自のアプリ風のテイストを出せることが分かった。
関連記事
- ElectronでWebGL(three.js)使ってデスクトップマスコット作った際に分かったこと
- Goオールスターズ2に行くので、gopheronをGo言語で動かせるようにした #websocket
- Raspberry Piの温度をgRPCを使ってElectronで作ったデスクトップマスコットに表示させた
- macOSのCPU温度をgRPCを使ってElectronで作ったデスクトップマスコットに表示させた
