Help us understand the problem. What is going on with this article?

Mac環境でElectronのWindows用パッケージングをしたら大変だった話

More than 3 years have passed since last update.

今はやりのElectronを使ってWindows用アプリをパッケージングしようとしたところ、環境周りの様々な問題にぶつかって大変でした…。
備忘録と情報共有をかねて、恥をしのんで書き記します。

確認環境

  • Mac OSX Yosemite(10.10.5)
  • node v4.2.3
  • electron v0.35.4

パッケージング用コマンドを実行するとエラーが出る

Electronのパッケージングにはelectron-packagerを使用します。
Windows向けのパッケージングを行う時は、下記のようなコマンドを実行します。

$ electron-packager <ソースディレクトリ> <アプリ名> --platform=win32 --arch=x64 --version=0.35.4 --icon=<アイコンファイルのパス> --overwrite

とはいえ、いきなり実行すると、下記のようなエラーが発生します。

Packaging app for platform win32 x64 using electron v0.35.4
spawn wine ENOENT

npm ERR! Darwin 14.5.0
(略)

上記のエラーにある通り、このコマンドを実行するためには、Wineのインストールが必要です。
electron-packagerのドキュメントにもこのことは明記されており、homebrewからインストールできるよ、とも示されています。

Wineがインストールできない

ということで、ドキュメントにしたがって、Wineのインストールをhomebrewからインストールしようとしました。

$ brew install wine

すると、次のエラーが発生しました。

Error: Cannot write to /usr/local/Cellar

Google先生に泣きついてみると、「/usr/localの所有者がログインしているユーザでないことが原因。」との啓示を頂戴しました。

$ sudo chown -R $USER /usr/local

そして再度brew install wineしてみると、次はこんなエラーが出ました。

Error: Permission denied - /Library/Caches/Homebrew/Formula/wine.brewing

またしてもGoogle先生に泣きつくと、今度は「It seemed I needed to take ownership of /Library/Caches/Homebrew」との啓示を頂戴しました。

$ sudo chown -R $USER /Library/Caches/Homebrew/

今度こそいけるだろう、とbrew install wineしてみると…。

$ brew install wine
wine: XQuartz is required to install this formula.
You can install with Homebrew Cask:
  brew install Caskroom/cask/xquartz

You can download from:
  https://xquartz.macosforge.org
Error: An unsatisfied requirement failed this build.

おお…。
brew install Caskroom/cask/xquartzせよ、ということなので実行してみました。

$ brew install Caskroom/cask/xquartz
==> brew cask install Caskroom/cask/xquartz
==> Downloading https://xquartz.macosforge.org/downloads/SL/XQuartz-2.7.7.dmg
######################################################################## 100.0%
Error: Permission denied - /opt/homebrew-cask/Caskroom/xquartz

  Most likely, this means you have an outdated version of homebrew-cask. Please run:

      brew update && brew upgrade brew-cask && brew cleanup && brew cask cleanup

  If this doesn’t fix the problem, please report this bug:

      https://github.com/caskroom/homebrew-cask/issues

/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb:245:in `mkdir'
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/fileutils.rb:245:in `fu_mkdir'
(略)

…心を無にして、brew update && brew upgrade brew-cask && brew cleanup && brew cask cleanupを実行します。
もろもろのアップデートやクリーンアップが完了するまでしばし待ち、再度brew install Caskroom/cask/xquartzを実行しました。

$ brew install Caskroom/cask/xquartz          
==> brew cask install Caskroom/cask/xquartz
==> Downloading https://xquartz.macosforge.org/downloads/SL/XQuartz-2.7.7.dmg
Already downloaded: /Library/Caches/Homebrew/xquartz-2.7.7.dmg
==> Running installer for xquartz; your password may be necessary.
==> Package installers may write to any location; options such as --appdir are ignored.
==> installer: Package name is XQuartz 2.7.7
==> installer: Installing at base path /
==> installer: The install was successful.
🍺  xquartz staged at '/opt/homebrew-cask/Caskroom/xquartz/2.7.7' (64M)

入った!
が、そもそもの目的はWineのインストールです。再度brew install wineを実行します。

$ brew install wine                           
==> Installing dependencies for wine: xz, libpng, freetype, jpeg, pkg-config, libtool, libusb, libusb-compat, fontconfig, libtiff, gd, libgphoto2, little-cms2, jasper, libicns, makedepend, openssl, sane-backends
==> Installing wine dependency: xz
==> Downloading https://homebrew.bintray.com/bottles/xz-5.2.1.yosemite.bottle.tar.gz
######################################################################## 100.0%
==> Pouring xz-5.2.1.yosemite.bottle.tar.gz
🍺  /usr/local/Cellar/xz/5.2.1: 59 files, 1.7M
==> Installing wine dependency: libpng
==> Downloading https://downloads.sourceforge.net/project/libpng/libpng16/1.6.17/libpng-1.6.17.tar.xz

curl: (22) The requested URL returned error: 404 Not Found
Trying a mirror...
==> Downloading ftp://ftp.simplesystems.org/pub/libpng/png/src/libpng16/libpng-1.6.17.tar.xz

curl: (78) RETR response: 550
Error: Failed to download resource "libpng"
Download failed: ftp://ftp.simplesystems.org/pub/libpng/png/src/libpng16/libpng-1.6.17.tar.xz

…。
…。

Google先生にすがりつくと、以下のような啓示を頂戴しました。

These are the steps I took to get this to work:

brew update
brew unlink libpng
brew install libpng
brew install wine

Hope it helps...
Unable install wine on yosemite · Issue #34257 · Homebrew/homebrew · GitHub

だいぶぐったりしながらも、ひとつひとつ実行していきました。
すると、そこそこ長いビルド時間をかけて、やっとWineをインストールすることができました。

パッケージングするとFatal error: Unable to load fileが発生する

これでもう勝ったも同然と思いきや、electron-packagerコマンドの第2引数に日本語のアプリ名を指定して実行したところ、下記のエラーが発生しました。

Packaging app for platform win32 x64 using electron v0.35.4
fixme:heap:HeapSetInformation 0x0 1 0x0 0
Fatal error: Unable to load file
err:display:macdrv_ChangeDisplaySettingsEx No matching mode found 1920x1200x32 @60!
 undefined

npm ERR! Darwin 14.5.0
(略)

基本、日本語はトラブルの元なので気をつけないといけませんね…。

exeファイルを実行すると、node.dllが必要と言われる

Windows用のパッケージングを行うと、結構な数のファイルが生成されます。
これらのファイルは配布時にもまるっと配布しないと、exeファイルを起動できません。

ちなみに、exeファイルだけをコピーして実行すると、node.dllが必要というエラーが出ます。

その他つまずいたこと

jQueryを読み込んでいるのにjQuery is not definedが出る

scriptタグでjQueryを読み込んでいるのに、Developer ToolsのConsoleにUncaught ReferenceError: jQuery is not definedというエラーが出ました。

これについては、こちらの記事を参考に解決することができました(ありがとうございます!)。

index.html
// js/vendor/jquery-2.1.4.min.jsを読み込む
<script>window.$ = window.jQuery = require('./js/vendor/jquery-2.1.4.min');</script>

最後に

また何か壁にぶつかったら、この記事に追記していきます。
色々ありつつも面白いことができそうなツールなので、こりずにしばらく格闘してみたいと思います。

opst
情報技術と社員力でお客様を成功に導く Make IT Your Success
https://www.opst.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away