[Electron] アプリのアイコンを設定する - electron-builder編

アプリの顔である「アプリアイコン」を設定します。 今回はelectron-builderを利用してビルドする際の内容です。

イコン画像を設定するのは非常に簡単なのですが、個人開発しているプログラマー的には画像を用意するのが一番ハードル高いですねw

基本的な設定方法

とりあえずサクッと変更したい場合にはPNG画像を1枚用意し、package.jsonに追記するだけです。

イコン画像を準備

必ず正方形のPNG画像を用意します。少なくともWindows用は256x256pixel、macOS用は512x512pixelが必要です。両方のOSに対応するなら大きい方のサイズが1枚あればOKです。また背景は透過させておくとキレイに表示されます。

今回はいらすとやさんからお借りした画像を512x512にリサイズしました。

あとはこの画像ファイルをプロジェクト内の適当なフォルダに保存します。今回は「build」フォルダを新たに作成し、その中に「icon.png」という名前で保存しました。

package.jsonに追記

12行目と16行目のような形で先ほど作成したアプリ用アイコン画像のパスを指定します。この指定を忘れるとmacOSでは反映されないのでご注意を。

{
  "name": "myapp",
  /* 中略 */
  "build": {
    "appId": "net.katsubemakto.blog.app.my",
    "files": [
      "package.json",
      "index.js"
    ],
    "mac": {
      "target": "dmg",
      "icon": "build/icon.png"
    },
    "win": {
      "target": "nsis",
      "icon": "build/icon.png"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
}

ビルド

ビルド方法はこれまでと変わりません。Windowsで実行する場合は先頭にnpxを付けてください。

$ electron-builder --mac --x64
$ electron-builder --win --x64

Windowsでの結果

生成された「(アプリ名).Setup.exe」からインストールウィザードを起動すると早速アイコンが利用されているのがわかります。

インストールが完了するとデスクトップにも登場!

起動すればタスクバーにももちろん表示されます。

macOSでの結果

生成されたdmgファイルをダブルクリックしマウント。その後中身を開くと先ほど設定したアイコンに置き換わっているのがわかりますね。場所がずれてるけどw 「アプリケーション」フォルダにコピーします。

Launchpadを開くと先ほどインストールしたアプリのアイコンがちゃんと変わっています。ちょっと感動しますねw

もちろんアプリを起動するとDoc上のアイコンも変わってくれます。

アイコンをサイズ毎に細かく用意する

Windowsの場合

Windowsでおなじみの「ICO形式」の画像が利用できます。変換方法などはWeb上に記事がたくさんありますのでここでは割愛します。

画像形式の詳細はマイクロソフトのドキュメントをご覧ください。 docs.microsoft.com

macOSの場合

macOS上で利用されている「Apple Icon Image形式(icns)」の画像を用意する必要があります。念の為アイコン作成時にAppleが定めるガイドラインも目を通しておいてください。具体的な画像形式などにも触れられています。 developer.apple.com

作業的には以下の9種類のサイズの画像を用意し、macOSにインストールされている変換用のコマンド「iconutil」を実行するだけです。

# サイズ dpi ファイル名
1 16x16 72 icon_16x16.png
2 32x32 144 icon_16x16@2x.png
3 32x32 72 icon_32x32.png
4 64x64 144 icon_32x32@2x.png
5 128x128 72 icon_128x128.png
6 256x256 144 icon_128x128@2x.png
7 256x256 72 icon_256x256.png
8 512x512 144 icon_256x256@2x.png
9 512x512 72 icon_512x512.png

上記の画像一式を「(適当な名前).iconset」という名前のフォルダを作成してつっこみ、以下のコマンドを実行すると「(適当な名前).icns」ファイルが作成されます。

$ iconutil -c icns (適当な名前).iconset

「(適当な名前).iconset」内のファイル名や画像サイズ、ファイルの個数、縦横比(アスペクト比)が違うとエラーとなりiconsetファイルが生成されない場合があるので注意が必要です。

WinodowsとmacOS用アイコンを一発で作成するシェルスクリプト

元画像(PNG形式, 512x512pixel〜)で準備するだけで、一括でWindows用のICOmacOS用のicnsを作成してくれるBashを置いておきます。動かすにはmacOSImageMagickがインストールされている必要があります。

準備

コマンドラインから画像の編集が行えるImageMagickをインストールします。

$ brew install imagemagick

ソースコード

macOS上で以下のコードを「makeIcon.sh」など適当な名前で保存し、実行権限を付与します。エラー処理などは省略していますので必要に応じて追加してください。

#!/bin/bash

#
# Electron用にアプリアイコンを一括作成
#
# 実行方法
#   $ ./makeIcon.sh icon.png
#

#--------------------------------#
# 定数
#--------------------------------#
#-- 元画像 (512x512px) --#
readonly ORG_FILE=$1;

#-- Windows用アイコンの生成先 --#
readonly ICON_DIR_WIN='./'

#-- macOS用アイコン --#
readonly ICONSET_DIR='icon.iconset'
readonly ICON_DIR_MAC='./'

#--------------------------------#
# macOS用
#--------------------------------#
mkdir -p $ICONSET_DIR

#-- 元画像をリサイズしてコピー --#
convert -resize 16x16!    $ORG_FILE  $ICONSET_DIR/icon_16x16.png
convert -resize 32x32!    $ORG_FILE  $ICONSET_DIR/icon_16x16@2x.png
convert -resize 32x32!    $ORG_FILE  $ICONSET_DIR/icon_32x32.png
convert -resize 64x64!    $ORG_FILE  $ICONSET_DIR/icon_32x32@2x.png
convert -resize 128x128!  $ORG_FILE  $ICONSET_DIR/icon_128x128.png
convert -resize 256x256!  $ORG_FILE  $ICONSET_DIR/icon_128x128@2x.png
convert -resize 256x256!  $ORG_FILE  $ICONSET_DIR/icon_256x256.png
convert -resize 512x512!  $ORG_FILE  $ICONSET_DIR/icon_256x256@2x.png
convert -resize 512x512!  $ORG_FILE  $ICONSET_DIR/icon_512x512.png

#-- icns形式のファイルに変換 --$
iconutil -c icns $ICONSET_DIR -o $ICON_DIR_MAC/icon.icns

#---------------------------------------
# Windows用
#---------------------------------------
convert $ORG_FILE -define icon:auto-resize $ICON_DIR_WIN/icon.ico

実行方法

以下のようにTerminalから元画像ファイルのパスをオプションで指定し実行します。

$ ./makeIcon.sh ~/Desktop/icon.png

無事に実行されれば最終的にWindows用の「icon.ico」と、macOS用の「icon.icns」が生成されるので、Electronのbuildフォルダに突っ込み、pakcage.jsonで指定すれば作業完了です。

まぁ…今となっては最初のPNG画像を1枚用意するやり方で良いのですけどねw 一部の解像度のアイコンを差し替えたいといった場合にご利用ください。

参考ページ