フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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

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

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

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

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

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

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

コメント

  1. 2018/10/15(月) 04:04:34
    とりあえず今日良かったのは、ワードプレス のアプリのせいで入ってしまったjetpackの、プラグインのせいで、モバイルユーザビリティの、エラーが211件になってたのが、消したら38件になったこと。 とりあえずアンチスパム系のプラグインも消してみたから、明日どうなってるかだなー
  2. 2018/10/15(月) 04:04:34
    » ワードプレス プラグイン ステップメール - Google 検索 https://t.co/VtmaOGrC1O
  3. 2018/10/15(月) 04:04:34
    【ワードプレス プラグイン】 目次を【Table Of Contents Plus】で設定してみた!カンタンな使い方> https://t.co/vlWQ8UypVb
  4. 2018/10/15(月) 04:04:34
    ワードプレスであるプラグインが使えなくなった…原因はサーバーのPHPにあり! https://t.co/oMhfm9IChM
  5. 2018/10/15(月) 04:04:34
    ワードプレスでアナリティクスの結果をダッシュボードに表示してくれる便利なプラグイン「Google Analyticator」 インストールと設定方法はこちら↓ https://t.co/N8IoWW5sfx

記事に戻る

コメントを残す