ChickenPaintのショートカットキーを拡張しました
ChickenPaintとは?
ChickenPaintは、Nicholas Sherlock氏がJavaアプレットのペイントソフトChibiPaintを、HTML5+JavaScriptに移植したペイントソフトです。
UIはブラウザの言語が日本語なら日本語になり、それ以外なら英語に切り替わります。
日本語のリソース作成には私も参加しました。
どんなアプリなのかを使い方動画にまとめました。
テキストで説明するよりも動画のほうがわかりやすいかもしれません。
ChickenPaintの独自派生版
ChickenPaintはGitHubで開発されているため、フォークして、改造したものを元の開発元への統合をお願いするプルリクエストを出す事もできます。
ただ、今回のショートカットキーの追加は、開発元があえて行っていなかったものかもしれないので、自分用に改造をする事にしました。
派生版のChickenPaintのソースコードはGitHubで公開中です。
LICENSEも、｢GNU General Public License v3.0｣から変更はありません。
著作権者は、個人名ではなく、Copyright (C) 2007 Free Software Foundation, Inc. です。
こちらがその派生バージョンのChickenPaint Beです。
私はJavaScript初心者ですから、ごく一部のかなり外側の箇所しかいじる事ができません。
ChickenPaintの開発元による大幅な更新が入ったら、この派生版は役目を終えるかもしれません。
むしろそのほうがいいのですが、自力で非推奨になったJavaScriptやJQueryを修正してみようと思いました。
非推奨のコードを修正しているうちに、キーボードショートカットキーの変更ができるかもしれないという事に気が付き。
一週間半かけて、キーボードショートカットキーを拡張しました。
たったそれだけの作業なのに一週間もかかったのは、ChickenPaintの構造がよくわかっていないのと、記述されているJavaScriptをみればすぐに理解できるわけでもないからです。
トライアンドエラーの手探りによる更新です。
新しく追加されたショートカットキー
もとのキャンバスの回転のショートカットキーAlt+スペース+左クリックがWindows+Chromeでは動作しなくなっていたため、どちらにしても何とかしかった問題でした。
消しゴムがEキーで、薄消しゴムはショートカットキーが無かったので調べてみたところ、比較的簡単に設定できるようにコードが書かれている事がわかりました。
そこまでわかれば、左右反転のショートカットキーも簡単に設定できます。
R+左ドラッグでキャンバスの回転
Hキーを押すたびにレイヤーを左右反転
Sキーで薄消しゴムに切り替え
Wキーで水彩ブラシに切り替え
Aキーでエアブラシに切り替え
Dキーで指先ツールに切り替え
Cキーで混色ツールに切り替え
SHIFT+CTRL+Eで全レイヤー結合
SHIFT+CTRL+Gでグループ結合
CTRL+Mでマスク適用
SHIFT+左ドラッグでブラシサイズと不透明度のスライダーを緩やかに調整
キャンバスの回転はRキーを押してドラッグするだけ!
これは描きやすい!!(自画自賛?)
私は左右反転機能を使わないとうまく描けない人なので、Hキーを押すだけで左右反転するようになったChickenPaintが大好きです。(自画自賛?)
さらに機能を追加して、操作パレットに左右反転アイコンを付けました。
お絵かき掲示板PHPスクリプトPetit Note
簡単に設置できて高機能なお絵かき掲示板のPHPスクリプトを開発して配布しています。
このお絵かき掲示板PHPスクリプトPetit Noteの最新版に、ショートカットキーを拡張したChickenPaintを同梱しています。
Petit Noteをすでに設置している方へ。
ChickenPaintだけ更新する方法もあります。
app/chickenpaint/ ディレクトリに、chickenpaintのスクリプトが入っていますから、app/chickenpaint/ ディレクトリを上書きアップデートするだけで、ChickenPaintを更新できます。
お絵かき掲示板交流サイト
Petit Noteを使ったお絵かき掲示板交流サイトを運営しています。
ChickenPaintのショートカットキーを拡張したものを使って運営中です。
そのほか、これこそお絵かき掲示板というなつかしのPaintBBSのHTML5版もあります。
すべてのペイントアプリがスマホ･タブレットにも対応しています。
お絵かき掲示板交流サイトPetit Noteをどうぞよろしくお願いします。