アプリの顔である「アプリアイコン」を設定します。
今回はelectron-builderを利用してビルドする際の内容です。
アイコン画像を設定するのは非常に簡単なのですが、個人開発しているプログラマー的には画像を用意するのが一番ハードル高いですねｗ
目次
基本的な設定方法
とりあえずサクッと変更したい場合にはPNG画像を1枚用意し、package.jsonに追記するだけです。
アイコン画像を準備
必ず正方形のPNG画像を用意します。少なくともWindows用は256x256pixel、macOS用は512x512pixelが必要です。両方のOSに対応するなら大きい方のサイズが1枚あればOKです。また背景は透過させておくとキレイに表示されます。
今回はいらすとやさんからお借りした画像を512×512にリサイズしました。
あとはこの画像ファイルをプロジェクト内の適当なフォルダに保存します。今回は「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ファイルをダブルクリックしマウント。その後中身を開くと先ほど設定したアイコンに置き換わっているのがわかりますね。場所がずれてるけどｗ 「アプリケーション」フォルダにコピーします。
Launchpadを開くと先ほどインストールしたアプリのアイコンがちゃんと変わっています。ちょっと感動しますねｗ
もちろんアプリを起動するとDoc上のアイコンも変わってくれます。
アイコンをサイズ毎に細かく用意する
Windowsの場合
Windowsでおなじみの「ICO形式」の画像が利用できます。変換方法などはWeb上に記事がたくさんありますのでここでは割愛します。
画像形式の詳細はマイクロソフトのドキュメントをご覧ください。
macOSの場合
macOS上で利用されている「Apple Icon Image形式(icns)」の画像を用意する必要があります。念の為アイコン作成時にAppleが定めるガイドラインも目を通しておいてください。具体的な画像形式などにも触れられています。
作業的には以下の9種類のサイズの画像を用意し、macOSにインストールされている変換用のコマンド「iconutil」を実行するだけです。
| # | サイズ | dpi | ファイル名 |
|---|---|---|---|
| 1 | 16×16 | 72 | icon_16x16.png |
| 2 | 32×32 | 144 | icon_16x16@2x.png |
| 3 | 32×32 | 72 | icon_32x32.png |
| 4 | 64×64 | 144 | icon_32x32@2x.png |
| 5 | 128×128 | 72 | icon_128x128.png |
| 6 | 256×256 | 144 | icon_128x128@2x.png |
| 7 | 256×256 | 72 | icon_256x256.png |
| 8 | 512×512 | 144 | icon_256x256@2x.png |
| 9 | 512×512 | 72 | icon_512x512.png |
上記の画像一式を「(適当な名前).iconset」という名前のフォルダを作成してつっこみ、以下のコマンドを実行すると「(適当な名前).icns」ファイルが作成されます。
$ iconutil -c icns (適当な名前).iconset
「(適当な名前).iconset」内のファイル名や画像サイズ、ファイルの個数、縦横比(アスペクト比)が違うとエラーとなりiconsetファイルが生成されない場合があるので注意が必要です。
WinodowsとmacOS用アイコンを一発で作成するシェルスクリプト
元画像（PNG形式, 512x512pixel〜）で準備するだけで、一括でWindows用のICOとmacOS用のicnsを作成してくれるBashを置いておきます。動かすにはmacOSにImageMagickがインストールされている必要があります。
準備
コマンドラインから画像の編集が行える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枚用意するやり方で良いのですけどねｗ 一部の解像度のアイコンを差し替えたいといった場合にご利用ください。
参考ページ
- Icons – electron-builder
- App Icon – Human Interface Guidelines
- Icons (Design basics) – Windows テクニカル ドキュメント
- Electronの各Platform向けアプリアイコンを作成する – horimisli.me
- How to manually create icns files using iconutil? – Stack Overflow
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
