ボクココ

個人開発に関するテックブログ

Canvas を容易に扱えるプラグイン jCanvas

以下のようなハッカソンに参加した。

Salesforceハックチャレンジ2014 | Salesforce World Tour Tokyo

ここで、自動コールセンターを作成するコールクラウドを提出した。コールクラウドで分岐を手軽に作成できるようなユーザーインタフェースにこだわった。このようなインタフェースを作るために、 jCanvas | jQuery meets the HTML5 canvas を利用した。これを使うと、以下のようなグラフィック処理をウェブ上で実現できる。

こういうのって今まではかなりとっつきにくい感じでなかなか手が出なかったんだけど、意外とドキュメントを見ながら開発してなんとかなった。

特にjCanvas で重要な概念は「Layer」だ。これがHTMLでいう id の役割をしており、後からイベントが発生した時に getLayer でその要素を取ってくることができる。また「Group」の概念も重要だ。これはいわゆる class の役割をしており、ひとまとまりを一気に消したり、移動させたりするときに使える。

この2つさえそれなりに理解すれば、あとは線や四角形、テキストの表示方法をドキュメントを見ながら頑張れば、実現したいものが実現できるだろう。

今回のコールクラウドでは木構造を扱う割と複雑な描画だったため、さらに四角形のひとまとまりを「box」クラスとして別に定義し、それを木のノードとして扱うような作りにした。それらをどのx, y の位置に描画するのかいちいち計算して指定しなければならないため、普段のアプリ開発よりかなり頭を使う必要がある。ただそれも最初は数字でピクセル指定して場所を確認し、あとは動的に表示できるようにメソッドに切り分ければいいだけなので、頑張るだけだ。

今回は利用しなかったが、jCanvas を使えばドラッグも簡単だ。

所感

一歩先のユーザーエクスペリエンスを目指すウェブプログラマーの方は是非 jCanvas を使ってみることをおすすめする。やり始めると楽しいのでおすすめ。