この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


新プラグイン「ペイントプレス」 ワードプレスでお絵描きして投稿できちゃうプラグインを作ってみた 体験版配布あり

「チャットプレス」に引き続き、もう一つの新たな試みとしてペイントプレスというプラグインを開発中だ。
これはお絵描きツールでお絵描きして投稿が保存ができるというプラグイン。
実はワードプレスのお絵描きプラグインというのはありそうでない。
あっても新バージョンのワードプレスに対応してなかったりして全然使えない。

そこで、ないなら作ってしまえ、ということで作ったみた。
利用しているのはHTML5から導入されたCanvas APIだ。
Canvas APIは以前紹介したことがあったけどゲームが作れたりと、グラフィック系を強力にサポートする新機能なんだよね。3DCGも作れてしまう。

で、そのCanvas APIを使いやすくしてくれるjQueryプラグインとして「jcanvas」というものがある。
これを使ってお絵描きツールを作ってみた。
ただし「jcanvas」だけでは「なぞる」といったタッチイベントをサポートしていないので、「jquery-ui-touch-punch.js」という「jQuery UI」の拡張プラグインも利用する。
これでマウスやスマホでなぞると線が描けるようになる。

ワードプレスへの保存にはbase64に変換したCanvasデータをajax通信してPHPに送り、画像として保存する。
その後、メディアファイルとしてワードプレスに登録する。
メディアライブラリに登録されるのであとは検索すればギャラリーが作れる。

まだ全然機能がシンプルで最低限のものしかないけれど、面白い機能として投稿のサムネイル画像を読み込んで、そこに落書きができてしまう。

レイヤー機能なんかも用意してドラッグができたりすれば、オーダー商品販売にも使えるよね。
ユーザーが自分で画像を加工して、見本を作るなんてことができてしまう。名入れ商品なんかにも便利だ。
もう少し機能を付け足したらミリオンハイスクールで販売予定だ。

関連記事