More than 5 years have passed since last update.

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

Last updated at 2014-04-08Posted at 2014-04-08

やりたいこと

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

インストール手順

brewで pkgconfig をインストール
- brew install pkgconfig
pkgから XQuartz をインストール
- https://xquartz.macosforge.org/landing/
  - XQuartz-2.7.5.dmg
brewで cairo をインストール
- brew install cairo
$PKG_CONFIG_PATH を設定
- export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig
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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up