Macでnode-canvasをインストールする方法


## やりたいこと

stylusで画像sprite自動作成をしたいので、node-sprite-generatorというライブラリを導入したら、node-canvasが必要だった。

node-canvasのOSXのインストール手順を見ると、Cairoを野良ビルドしているが、brewで入れようとしたところ、インストールに若干手間取ったので手順をまとめました。
https://github.com/LearnBoost/node-canvas/wiki/Installation---OSX


## 環境

- Mac OS X 10.9.2
- brew 0.9.5
- node v0.9.12
	- anyenvでインストールした
- node-canvas
	- https://github.com/learnboost/node-canvas



## インストール手順

1. brewで pkgconfig をインストール
	- `brew install pkgconfig`
1. pkgから XQuartz をインストール
	- https://xquartz.macosforge.org/landing/
		- XQuartz-2.7.5.dmg
1. brewで cairo をインストール
	- `brew install cairo`
1. $PKG_CONFIG_PATH を設定
	- `export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig`
1. npmで canvas をインストール
	- `npm install -g canvas`

## やったこと

### まずインストールを実行するとこうなる

```
$ npm install -g canvas
npm http GET https://registry.npmjs.org/canvas
npm http 200 https://registry.npmjs.org/canvas
npm http GET https://registry.npmjs.org/canvas/-/canvas-1.1.3.tgz
npm http 200 https://registry.npmjs.org/canvas/-/canvas-1.1.3.tgz
npm http GET https://registry.npmjs.org/nan
npm http 200 https://registry.npmjs.org/nan
npm http GET https://registry.npmjs.org/nan/-/nan-0.4.4.tgz
npm http 200 https://registry.npmjs.org/nan/-/nan-0.4.4.tgz

> canvas@1.1.3 install /Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/canvas
> node-gyp rebuild

gyp http GET http://nodejs.org/dist/v0.9.12/node-v0.9.12.tar.gz
gyp http 200 http://nodejs.org/dist/v0.9.12/node-v0.9.12.tar.gz
./util/has_cairo_freetype.sh: line 4: pkg-config: command not found
gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:416:16)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:97:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:733:12)
gyp ERR! System Darwin 13.1.0
gyp ERR! command "node" "/Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/canvas
gyp ERR! node -v v0.9.12
gyp ERR! node-gyp -v v0.8.4
gyp ERR! not ok
npm ERR! canvas@1.1.3 install: `node-gyp rebuild`
npm ERR! `sh "-c" "node-gyp rebuild"` failed with 1
npm ERR!
npm ERR! Failed at the canvas@1.1.3 install script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.

npm ERR! System Darwin 13.1.0
npm ERR! command "/Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/bin/node" "/Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/bin/npm" "install" "-g" "canvas"
npm ERR! cwd /Users/maru
npm ERR! node -v v0.9.12
npm ERR! npm -v 1.2.12
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/maru/npm-debug.log
npm ERR! not ok code 0
```

### pkgconfig インストール
```
$ brew install pkgconfig
```

```
$ npm install -g canvas
npm http GET https://registry.npmjs.org/canvas
npm http 304 https://registry.npmjs.org/canvas
npm http GET https://registry.npmjs.org/nan
npm http 304 https://registry.npmjs.org/nan

> canvas@1.1.3 install /Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/canvas
> node-gyp rebuild

Package cairo was not found in the pkg-config search path.
Perhaps you should add the directory containing `cairo.pc'
to the PKG_CONFIG_PATH environment variable
No package 'cairo' found
gyp: Call to './util/has_cairo_freetype.sh' returned exit status 0. while trying to load binding.gyp
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:416:16)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:97:17)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:733:12)
gyp ERR! System Darwin 13.1.0
gyp ERR! command "node" "/Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/canvas
gyp ERR! node -v v0.9.12
gyp ERR! node-gyp -v v0.8.4
gyp ERR! not ok
npm ERR! canvas@1.1.3 install: `node-gyp rebuild`
npm ERR! `sh "-c" "node-gyp rebuild"` failed with 1
npm ERR!
npm ERR! Failed at the canvas@1.1.3 install script.
npm ERR! This is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.

npm ERR! System Darwin 13.1.0
npm ERR! command "/Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/bin/node" "/Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/bin/npm" "install" "-g" "canvas"
npm ERR! cwd /Users/maru
npm ERR! node -v v0.9.12
npm ERR! npm -v 1.2.12
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/maru/npm-debug.log
npm ERR! not ok code 0
```

cairo が無いと言われる

```
$ brew install cairo
cairo: Unsatisfied dependency: XQuartz
Homebrew does not package XQuartz. Installers may be found at:
  https://xquartz.macosforge.org
Error: An unsatisfied requirement failed this build.
```

XQuartz を入れろと言われる

### XQuartzをインストール

下記からダウンロードしてインストールする

- https://xquartz.macosforge.org/landing/
	- XQuartz-2.7.5.dmg

どうやら、以前はOSに含まれていたものが分離したらしい(?)
http://support.apple.com/kb/HT5293?viewlocale=ja_JP


pkgで何が入ったかは下記で確認ができる

```
$ pkgutil --pkgs | grep xquartz
org.macosforge.xquartz.pkg
$ pkgutil --files org.macosforge.xquartz.pkg
```

### cairoをインストール

```
$ brew install cairo
```

このままだと同じく見つからないと言われてしまうので、パスを通す。

```
$ export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig
```

### node-canvas をインストール

```
$ npm install -g canvas
(略)
1 warning generated.
  SOLINK_MODULE(target) Release/canvas.node
  SOLINK_MODULE(target) Release/canvas.node: Finished
canvas@1.1.3 /Users/maru/.anyenv/envs/ndenv/versions/v0.9.12/lib/node_modules/canvas
└── nan@0.4.4
```

無事に野良ビルドせずに入りました。