Linux 開発環境で Windows 用の Electron アプリを作る場合のアイコンについて

はじめに

この記事では、Electronアプリケーションの作成方法を最初からは説明しません。下記の記事などが大変役に立ちますので、入門の方はこちらをお勧めします。

30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで - Qiita

もう少し詳しく、ひと通りの過程をなぞっておられる記事でしたら、次のようなものをお勧めします。

Electronでデスクトップウィジェットを作るまで - Qiita

結論を急ぎたい方は

こちらへどうぞ

ビルドした .exe ファイルにアイコンを設定したい!

本題です。 アプリケーションをそれなりに作成したら、アイコンを設定したくなるのが人間の性というものです。 Windows だったら .exe ファイルに好きな画像を表示させたいですよね?

ところが、私の開発環境が Ubuntu であったばっかりに、これが意外に手間でした。そして、これに関する情報がとても少なく、あちらこちらの記事にバラけていたため、まとめようと考えました。

まず、こちらのブログ。アイコンについて記載があるのですが、

qiita.com

さて、恐らく皆さんが一番カスタマイズしたいのがこれでしょう。 アプリ自体のアイコンの変更です。デフォルトではElectronになっています。 これを変更するのは、実はとても簡単です。

と書かれていて、夢がひろがりんぐです。なるほど、Macでは icon.icns というファイルを用意して electron-packager にオプションを指定すればいいのか。なるなる。

$ electron-packager . sample --platform=darwin--arch=x64 --version=0.30.0 --icon=images/icon.icns

なら、Windowsも似たようにすれば、・・・とはいきませんでした。同記事にも、

ただ、Windows版アプリだとそのままでは上手くいかないようです。

と書かれています・・・簡単なのはMac用アプリの話だったのですね。

さて、別の記事には、丁寧に Windows の場合のオプション指定方法を記載してくださっています。

nulab-inc.com

f:id:takemaruhirai:20151212104956p:plain

なんだか、これでうまく行きそうですね?

残念。実は、これでうまく行くのは 開発環境がWindowsの場合 のようです。

あきらめて、公式ドキュメントを読みましょう

www.npmjs.com

icon - String
Currently you must look for conversion tools in order to supply an icon in the format required by the platform:
OS X: .icns
Windows: .ico (See below for details on on-Windows platforms)
Linux: this option is not required, as the dock/window list icon is set via the icon option in the BrowserWindow contructor. Setting the icon in the file manager is not currently supported.

on-Windows は non-Windows のミスでしょう。細かいことは気にせず、下を見ろ、というので下を見ましょう。なになに。

Building Windows apps from non-Windows platforms
Building an Electron app for the Windows platform with a custom icon requires editing the Electron.exe file. Currently, electron-packager uses node-rcedit to accomplish this. A Windows executable is bundled in that node package and needs to be run in order for this functionality to work, so on non-Windows platforms, Wine needs to be installed. On OS X, it is installable via Homebrew.

つまり、カスタムアイコンを .exe ファイルに設定するには、今のところ、Electron は node-rcedit というパッケージを必要としているということのようです。この node-rcedit が Windows の実行ファイルをもっているため、必然的に Linux環境に Wine が入っている必要がある、ということのようです。

node-rcedit のサイトへ行ってみると、npmでインストールできるようですね。ただし、パッケージ名は node-rcedit ではなく rcedit のようですのでご注意を。 github.com

これで、ひと通りの前知識が揃ったようです。

実行手順のまとめ

前提

node や npm、Electron はすでに導入済みで、アプリも作成中であるものとします。

Wine をインストール

たとえば、Ubuntu の場合は apt を使用して以下のようなコマンドを実行します。

$ sudo apt-get install wine

かなり時間がかかると思います。余裕を見て実行してください。

node-rcedit をインストール

Electronアプリケーションのルートディレクトリに移動し、以下のコマンドを実行します。

$ npm install --save-dev rcedit

アイコンを作成

256x256 の .ico ファイルが最適のようですね。 画像編集ソフトなどを用いてお好きなアイコンファイルを用意してください。

f:id:takemaruhirai:20151212113555p:plain:w256

electron-packager を実行

作成したアイコンファイルを icon.ico とし、Electronアプリケーションの images ディレクトリに格納してあるとします。 sample というパッケージ名でビルドするとすると、下記のようなコマンドを実行することになります。 パッケージ化の際の細かいオプション等は、他の方の記事を参照してください。

$ electron-packager . sample --platform=win32 --arch=x64 --version=0.30.0 --icon=images/icon.ico

これで、Linux環境でWindows用のElectronアプリケーションがアイコン付きで作成できます。

f:id:takemaruhirai:20151212115354p:plain