HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください)について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。

デモ

今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています

Section1. Node.jsとモジュールについて

Node.jsはブラウザではなくサーバーサイドで動くJavaScriptで、手軽にhttpサーバーを立てたりファイルの読み書きができます。Node.jsにおける様々な処理はモジュールという単位に分けられていて、httpサーバーを立てるためのhttpモジュール、リアルタイムなWebコンテンツを作るためのSocket.IO等があります。今回はその中のNode.jsでCanvasを扱うためのモジュールとCreateJSを扱うためのモジュールを使います。なお、インストール方法やモジュールについては記事「TypeScriptで始めるNode.js/io.js入門」で詳しく解説してあります。

Node.jsでCreateJSを使うことができる

Section2. Node.jsでCanvasを使う

Node.jsでnode-canvasというモジュールを使うと、サーバーサイドでHTML5 Canvas要素を使った画像処理ができるようになります。PHP等を使ったサーバーサイドの画像加工の代替手段となるのがメリットです。しかし、クライアントサイドのCanvasと同じく低レベルなCanvas(Context2D)のAPIを使用する必要があり、コードが複雑になりがちです。そこでCanvasを扱いやすくするためのCreateJSの登場です。 ※ node-canvasは依存ライブラリが多く、インストールがやや煩雑です。インストールの際には、公式のWikiQiita等の解説記事を参照してください。

node-canvasはNode.jsでHTML5 Canvasを扱うためのモジュール

Section3. Node.jsでCreateJSを使う

node-easelというモジュールを使うと、Node.jsでCreateJSが使えるようになります。CreateJSのスイートであるEaselJS(0.7.0)とTweenJS(0.6.1)が使用可能で、PreloadJSやSoundJSは非対応です。使用するAPIがクライアントサイドのCreateJSとほぼ同じあるため、学習コストを低く抑えることができるのがメリットです※ node-easelは、node-canvasがインストールされている環境でコマンドラインからnpm install node-easelを実行することでインストールできます。

node-canvasはNode.jsでCreateJSを扱うためのモジュール

実際のコード

それではnode-easelを使ってサーバーサイドで星の図形を描くというサンプルを通して、実際のコードを見てみましょう。Node.jsの処理はapp.jsというJavaScriptファイルに記述してあります。

var Canvas = require("canvas"); // node-canvasの読み込み
require("node-easel"); // node-easelの読み込み
var canvas = new Canvas(400, 400);  // Canvasの作成
var stage = new createjs.Stage(canvas); // CanvasからStageを作成
var shape = new createjs.Shape();   // Shapeの作成
// Shapeのgraphicsプロパティで星の図形を描画
shape.graphics
    .beginFill("#FF3DB1")
    .drawPolyStar(200, 200, 100, 5, 0.6);
stage.addChild(shape);  // ShapeをStageに配置
stage.update(); // Stageをアップデート

var base64String = canvas.toDataURL();  // Canvasの描画情報をBase64形式に変換
console.log(base64String);  // コマンドラインにBase64の文字列を出力

上記はサーバーサイドのソースコードですが、StageクラスやShapeクラスなどクライアントサイドでCreateJSを使う時と同じAPIが使われています。最後にCanvasのtoDataURL()メソッドを実行することで、Canvasの描画情報がBase64形式(※)の画像になります。以下のコマンドをコマンドラインから実行すると、上記のJavaScriptがNode.jsとして実行され、Base64形式の画像情報が出力されます。 ※ Base64とはバイナリデータを文字列にエンコードした情報で、コード内でバイナリデータを取り扱うのに向いています。

node app
# Base64の画像文字列が出力される

HTMLファイルを作成し、imgタグのsrc属性に出力された文字列を指定し、そのHTMLをブラウザで閲覧すると以下のような図形が表示されるのが確認できます。

Node.jsでEaselJSを実行した結果

次のページではnode-easelを使った画像加工の方法を紹介します。