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

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

## 確認環境
- Mac OSX Yosemite(10.10.5)
- node v4.2.3
- electron v0.35.4

## パッケージング用コマンドを実行するとエラーが出る
Electronのパッケージングには[electron-packager](https://github.com/maxogden/electron-packager)を使用します。
Windows向けのパッケージングを行う時は、下記のようなコマンドを実行します。

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

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

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

npm ERR! Darwin 14.5.0
（略）
```

上記のエラーにある通り、このコマンドを実行するためには、[Wine](https://ja.wikipedia.org/wiki/Wine)のインストールが必要です。
electron-packagerの[ドキュメント](https://www.npmjs.com/package/electron-packager#building-windows-apps-from-non-windows-platforms)にもこのことは明記されており、homebrewからインストールできるよ、とも示されています。

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

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

```zsh
$ brew install wine
```

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

```zsh
Error: Cannot write to /usr/local/Cellar
```

Google先生に泣きついてみると、「[/usr/localの所有者がログインしているユーザでないことが原因。](http://anton0825.hatenablog.com/entry/20140606/1409898700)」との啓示を頂戴しました。

```zsh
$ sudo chown -R $USER /usr/local
```

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

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

またしてもGoogle先生に泣きつくと、今度は「[It seemed I needed to take ownership of /Library/Caches/Homebrew](http://stackoverflow.com/questions/17610417/permission-denied-library-caches-homebrew-formula-nmap-brewing)」との啓示を頂戴しました。

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

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

```zsh
$ 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`せよ、ということなので実行してみました。

```zsh
$ 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`を実行しました。

```zsh
$ 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`を実行します。

```zsh
$ 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](https://github.com/Homebrew/homebrew/issues/34257#issuecomment-68596123)

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

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

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

```zsh
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`というエラーが出ました。

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

- [ElectronでjQueryがundefinedになる - Qiita](http://qiita.com/pirosikick/items/72d11a8578c5c3327069)

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

## 最後に

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