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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

- Sponsored Link -

基本的な設定方法

とりあえずサクッと変更したい場合には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ファイルをダブルクリックしマウント。その後中身を開くと先ほど設定したアイコンに置き換わっているのがわかりますね。場所がずれてるけどw 「アプリケーション」フォルダにコピーします。

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

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

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

Windowsの場合

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

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

macOSの場合

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

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

#サイズdpiファイル名
116×1672icon_16x16.png
232×32144icon_16x16@2x.png
332×3272icon_32x32.png
464×64144icon_32x32@2x.png
5128×12872icon_128x128.png
6256×256144icon_128x128@2x.png
7256×25672icon_256x256.png
8512×512144icon_256x256@2x.png
9512×51272icon_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枚用意するやり方で良いのですけどねw 一部の解像度のアイコンを差し替えたいといった場合にご利用ください。

参考ページ

コメント

感想やご質問などお気軽にどうぞ。広告が表示されている場合は下にスクロールしてください。投稿にはSNSへのログインが必要です。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -