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

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

More than 5 years have passed since last update.

やりたいこと

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

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

環境

インストール手順

  1. brewで pkgconfig をインストール
    • brew install pkgconfig
  2. pkgから XQuartz をインストール
  3. brewで cairo をインストール
    • brew install cairo
  4. $PKG_CONFIG_PATH を設定
    • export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig
  5. 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をインストール

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

どうやら、以前は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

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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした