カスタマイズが容易なWebベースのペイント「Sketch.js」
Sketch.jsはCanvasを使ったWebベースのイラストソフトウェアです。
Web上でお絵描きをしようと思ったらCanvasタグを使うのが良さそうです。そのためチュートリアルとしても役立ちそうなのがSketch.js、超シンプルなお絵描きソフトウェアです。
中央に真っ白なキャンパスがあります。
マウスで書けます。
こちらは色や太さを指定できるようにしたサンプルです。
さらに画像での出力機能付き。
間違えて書いてしまった場合も…
消しゴム機能で消せます。
iPhoneでも書けるのですが、2回目を書くと1回目の線が消えてしまいました。
使い方は簡単で、data-downloadでダウンロード機能、data-sizeで太さ、data-colorで色、data-markerでマーカー、data-eraserで消しゴム機能を提供します。つまりUIについてはかなり広くカスタマイズができるようです。
Sketch.jsはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
Sketch.jsはUIと機能のバランスがとても良いと思います。data-*で機能や設定を与えるようになっているので、見た目のカスタマイズが容易です。シンプルなUIにすることもユーザビリティを高めるのも自由自在です。
この手のライブラリの欠点として、見た目と機能がガチガチに固定されてしまっていることがあります。それではそのまま組み込むことはできても自分たちに合わせてカスタマイズするのは困難です。このバランス感覚は見習える点があると思います。