東日本橋の制作・開発会社 プレスマンのスタッフブログ

PRESSMAN*Tech

AWS プログラミング

AWS Lambda上でcanvasを使いたい【前編】

AWS Lambdaはnode.jsを使います。最近Javaも使えるようになりましたが。
マニュアルによると投稿した時点ではAmazonLinux 2014.9版で動いている様です。
node.jsのバージョンは0.10.33となっています。
http://docs.aws.amazon.com/ja_jp/lambda/latest/dg/current-supported-versions.html

node.jsのモジュールはJSだけで書かれたモジュールとC/C++でかかれたネイティブモジュール(アドオン)があります。
node.jsのモジュールはnpmで簡単にインストール出来ます。
JSだけで書かれたモジュールは例えばそのままコピーしても動きますが、ネイティブモジュールはそのモジュールが使っているライブラリが無ければ使えませんし、モジュール本体もインストールした環境でしか動きません。

今回使いたいnode-canvasはサーバーサイドでHTML5のCanvasを実現してしまおうというモジュールです。
https://github.com/Automattic/node-canvas
このnode-canvasはcairoというCで書かれたライブラリを使います。
http://cairographics.org/
このライブラリはWikipediaによると

cairo(カイロ)は、デバイスに依存しないベクトルベースの描画APIを提供する、フリーの2Dグラフィックスライブラリである。アンチエイリアスがかかった綺麗な表示が特徴である。直線、矩形、円弧の他、ベジェ曲線や文字の描画も可能である。半透明描画、マスクやグラデーション機能がある。ソフトウェアによるテセレーションが基本だが、可能な場合にはハードウェアアクセラレーションを利用するよう設計されている。
https://ja.wikipedia.org/wiki/Cairo

とのことです。つまり、cairoのAPIをcanvasと同じAPIで動かすためのラッパーみたいな感じでしょうか。

node-canvasのインストールと動作確認

Lambda上で動かす前にnode-canvasを動かしてみます。OS毎のインストール方法は下記URLに書かれています。
https://github.com/Automattic/node-canvas/wiki/_pages
基本的に面倒なのと、今回Lambdaで動かすのが目的なので下記の手順でAmazon Linux上で動かしてみます。

1. インスタンスの作成

Amazon Linux 2015.03でインスタンスを作ります。

2. node.jsのインストール

Lambdaで動いているバージョンがv0.10.33なので同じバージョンを持ってきてインストール

$ sudo yum install gcc44 gcc-c++ libgcc44 cmake
$ wget http://nodejs.org/dist/v0.10.33/node-v0.10.33.tar.gz
$ tar -zxf node-v0.10.33.tar.gz
$ cd node-v0.10.33 && ./configure &&; make
$ make install

3. cairoのインストール

$ sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel

4. node-canvasのインストール

$ cd ~/
$ mkdir example
$ cd example
$ npm install canvas

5. サンプルの動作確認

公式ページのサンプルスクリプトを動かしてみます。

test.js

var Canvas = require('canvas')
  , Image = Canvas.Image
  , canvas = new Canvas(200, 200)
  , ctx = canvas.getContext('2d');

ctx.font = '30px Impact';
ctx.rotate(.1);
ctx.fillText("Awesome!", 50, 100);

var te = ctx.measureText('Awesome!');
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.lineTo(50, 102);
ctx.lineTo(50 + te.width, 102);
ctx.stroke();

var fs = require('fs')
  , out = fs.createWriteStream(__dirname + '/test.png')
  , stream = canvas.pngStream();

stream.on('data', function(chunk){
  out.write(chunk);
});

そして下記コマンドで実行するとtest.png ファイルが出来ているはずです。

$ node test.js

次回はLambdaで使えるようにしてみます。

この記事をシェアする:

-AWS, プログラミング
-,

Copyright© PRESSMAN*Tech , 2020 All Rights Reserved Powered by STINGER.