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

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

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

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

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

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

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

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

会員限定コンテンツ

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

ログインはこちら

新規会員登録はこちら

パスワードをメールで送信します。

コメント

  1. 2018/07/14(土) 19:52:22
    【ワードプレス推奨プラグインまとめ】副業ラボ専用サイトにてツイキャスでもお話しした、ワードプレスの推奨プラグインをまとめました。これをつかってサクサクッとサイトを作りましょう!
  2. 2018/07/14(土) 19:52:22
    ワードプレスのブログ更新をリアルタイムで知らせるプラグイン「WebSub/PubSubHubbub」 記事の盗作防止にも役に立ち、設定も簡単な優れ物です。 このプラグインのインストールと設定方法はこちら↓ https://t.co/zAthvhvvyu
  3. 2018/07/14(土) 19:52:22
    WordPress(ワードプレス)でHydroの2FA認証使えるようにするプラグインを開発中だそうです かなり身近な所にDAppが来ますね #DApps #hydro
  4. 2018/07/14(土) 19:52:22
    ワードプレスのサイトマップには、使い勝手がいい「PS Auto Sitemap」が便利。 このプラグインのインストールと設定方法はこちら↓ https://t.co/rDXHLpa0ym
  5. 2018/07/14(土) 19:52:22
    ワードプレス プラグイン「Elementor」の相談から助言を聞いてくれる方。 https://t.co/DL3e1pkfgn

記事に戻る

コメントを残す