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

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

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

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

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

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

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

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

会員限定コンテンツ

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

ログインはこちら

新規会員登録はこちら

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

コメント

  1. 2018/04/09(月) 04:35:00
    毎度オルネポPodcastページでおなじみワードプレスのプラグインPower Pressの変更なのか iTunesに出てるエピソードが最大300件になってて第9回放送分から入手可能になってた とりあえず読めない英語を翻訳しつつ最大1000件に再設定したので 第1回放送分からの表示上手くいくのでしょうかい
  2. 2018/04/09(月) 04:35:00
    サイトをつくるとき、無料でネット上で使える便利なツールです。 → ワードプレス WPプラグイン(無料)の使い方2 https://t.co/LucebH5elo 【ツイキャス録画】 https://t.co/P93603jokj ワードプレス教室をしています。
  3. 2018/04/09(月) 04:35:00
    Wordpressをカスタマイズするならプラグイン!という考えで負のスパイラルに入る方、わりといらっしゃいます。 ワードプレスも普通にwebサイトを作るのも、観覧者からの目線が必要ですね。
  4. 2018/04/09(月) 04:35:00
    ワードプレスPing送信プラグイン【WordPress Ping Optimizer】のインストールと設定方法 https://t.co/mjJ0AeQ71u
  5. 2018/04/09(月) 09:18:23
    こんにちは^^ アフィリエイターの玉緒です。 サイトをクラックされてしまい、セキュリティ強化策を実行しました! とりあえずは、ワードプレスのプラグインで対応してみます! https://t.co/igp41wRiBc

記事に戻る

コメントを残す