｢ChickenPaint｣は、Nicholas Sherlock氏が開発したペイントソフトです。
thenickdude/chickenpaint: An HTML5 Port of the ChibiPaint multi-layer Oekaki painting tool
そして、このリポジトリにあるのは、その｢ChickenPaint｣を改造したものです。
IEのサポートが完全に終了したため、互換性のための古いJavaScriptが必要なくなりました。
そして、古い非推奨のJavaScriptを推奨されるものに置き換える作業が必要になりました。
その作業の過程で、キーボードインベントの処理の書き直しを行いました。
しかし、Bootstrap4にも非推奨になったキーボードイベントのコードが残っていました。
Bootstrap4のコードを含む｢ChickenPaint｣のビルドを行ったあと手作業で該当箇所を置換してGoogleのクロージャーコンパイラーでminifyするとても無駄な作業が発生しました。
これらの問題を解決するためBootstrap5対応版を作りました。
改造したバージョンの｢ChickenPaint｣の名称は｢ChickenPaint Be｣です。
追加された機能と廃止された機能があり、またこの改造版に固有の問題が存在する可能性もあるため名称を変更しました。
noteにも、概要をまとめましたのでご一読いただければ幸いです。
ChickenPaintを改良したChickenPaint Beの新機能｜さとぴあ
2024年7月、Bootstrap 4.0.0 - 4.6.2 にXSSの脆弱性がある事が明らかになりました。
Bootstrap4はサポートが終了しているため、セキュリティパッチが提供される事はありません。
つまり、Bootstrap5に移行する必要があるという事です。
npm audit reports moderate XSS vulnerability with bootstrap 4.6.2 · Issue #40685 · twbs/bootstrap
｢ChickenPaint Be｣は、Bootstrap5に移行しました。
Bootstrap5は現行サポートバージョンであるため、新しい問題が見つかっても修正されることが期待できます。
Bootstrap4はjQueryを必要としていましたが、Bootstrap5はJavaScriptのみで動作します。
もはや必須ではなくなったjQueryで書かれた大量のコードをjQueryのまま保守するのではなくJavaScriptに書き換える事にしました。
jQueryのコードは大量に存在し、JavaScriptへの書き換えと動作確認に時間がかかりましたがJavaScriptへの書き換えに成功し脱jQueryを実現する事ができました。
ChickenPaint BeはjQueryの開発状況に左右されなくなりました。
仮にjQueryの開発が終了したとしても、影響を受けません。
https://paintbbs.sakura.ne.jp/localPaintBBS/chickenpaint/
お絵かき掲示板PHPスクリプトPetit Noteを開発しています。
このPetit Noteを使ったお絵かき掲示板交流サイトPetit NoteでChickenPaint Beを使う事もできます。
- キャンバスを移動する｢手のひらツール｣｢回転ツール｣選択時にピンチズームが使えるようになりました。
これまではスマホ･タブレットでは虫眼鏡アイコンをタップして、0.7092倍1.41倍等の倍率を選択する事しかできませんでしたがピンチズームにより無段階ズームを使う事ができるようになりました。
ChickenPaint Beにピンチズームを実装 - YouTube
- [CRTL+スペース]キーまたは[Z]キーを押下するとズームモードに入りズームカーソルに変わります。
そのズームモードに入った時に、ペンを右にドラッグすると拡大、左にドラッグすると縮小します。
これは、多くのPC用ペイントツールに実装されているUIです。
- ←↓↑→キーで選択範囲内の画像を移動できるようになりました。これにより、確実に1ピクセルずつ移動できるようになりました。
ChickenPaint Beの新機能 新しくなったズームと移動 - YouTube
- レイヤーが50枚存在する画像の表示を反転するために、50枚のレイヤーを左右反転して、さらにもとに戻すために50枚のレイヤーを左右反転する無駄な作業が発生する事がありました。
新しく追加された｢表示の左右反転｣を使用すれば、レイヤーが何枚あってもワンタップで表示を左右反転できます。
この操作は実際の画像を変更しないため、アンドゥの履歴にも残りません。
ChickenPaint Beの新機能 表示の左右反転 - YouTube
表示の左右反転!ChickenPaint Beの大進化｜さとぴあ
- ツールオプションパレットに「塗り潰し」「選択解除」「変形」ボタンが表示されるようになりました（長方形選択ツール・移動ツール使用時）。
ChickenPaint Beの新機能 選択範囲パネル･ズームと回転パネル - YouTube
- ツールオプションパレットに｢ズームと回転｣が追加されました。
手のひらツール･回転ツール選択時、スペースキー押下時などに表示されます。
ズームの倍率･キャンバスの回転角度をスライダーで操作できます。
｢表示を初期化｣ボタン押下で｢拡大率｣｢回転角度｣｢表示の左右反転｣をすべてリセットします。
- レイヤー名に日本語を含むマルチバイト文字が使えるようになりました。
これまでは英数字以外を入力すると続きを描く時に文字化けが発生していました。
これからは、多国語に対応し、絵文字にも対応します。
2025_09_11_002_ChickenPaint_Be.mp4
- テクスチャを選択している時は、そのテクスチャで選択範囲を塗り潰す事ができるようになりました。
2025_09_15_002_ChickenPaint_Be.mp4
- ChickenPaint Beで別のレイヤーの画像を参照して｢バケツ塗り｣ができるようになりました。
線画のレイヤーとバケツ塗りするレイヤーを分ける事が可能になりました。
これまでは線画の領域を塗り潰す時に、同一レイヤー内でしか塗り潰せませんでしたが、｢全レイヤー参照｣にチェックが入っていれば、｢全レイヤー｣の画像を統合した画像を元に塗り潰しの領域を判定します。
また｢領域拡張｣機能が追加され、アンチエイリアスの境界を塗り潰せるようになりました。
｢バケツ塗り｣の不透明度が調整できるようになりました。
｢バケツ塗り｣に半透明色が使えるようになりました。
ChickenPaint Beの新機能 バケツ塗りの全レイヤー参照･領域拡張 - YouTube
ChickenPaint Beの2025年9月の新機能｜さとぴあ
- 描き始めの時にレイヤーの透明部分の白を引きずり白く浮き上がる問題を修正しました。
- 選択範囲がかかっている時は、ブラシで描画できる範囲が選択範囲内のみになりました。
これまでは、選択範囲のありなしに関わらずキャンバス全体に描画されていました。
- RGBをずらす色収差フィルタを効果メニューに追加しました。 レイヤーに透明な箇所があると透明な箇所にはずれてくれないので、一度全レイヤーを結合して作業するとRGBがうまくずれます。
- 「全体に適用 (結合レイヤーを追加)｣がチェックされた状態で色収差フィルタを実行すると、全レイヤーを結合した新レイヤーが追加されます。その追加されたレイヤーに色収差フィルタがかかります。
これにより、事前にレイヤーを結合する必要がなくなります。
- これはでは画面が小さな端末のためのモバイルモードは、画面が小さくかつマルチタッチの時にのみ有効でした。
しかし、PCで作業する時にも画面を広く使いたい時があります。
そのため、PCで作業する時にも｢モバイルモード｣ボタンを押下すればモバイルモードに切り替わるようにしました。
また、タブレット端末などでモバイルモードで起動すると、これまではモバイルモードで使う事しかできませんでしたが、PCモードに切り替える事ができるようになりました。
｢モバイルモード｣ボタンと｢PCモード｣ボタンは押下するたびに入れ替わります。
- 変形確定前にレイヤーを追加しようとすると変形を確定する取り消すなどの操作を促すダイヤログが表示されますが、従来の動作では、変形確定のエンターキーの押下で変形は確定されるものの、ダイヤログはすぐには消えず、レイヤーの追加も行われませんでした。
修正後は、エンターキーによる変形の確定と同時にダイヤログは閉じられ、かつ、レイヤーも追加されます。 一連のダイヤログの日本語訳も追加しました。
PaintBBS NEOとChickenPaintの円カーソルの表示を変更しました｜さとぴあ
Petit.Note.-.Google.Chrome.2023-12-25.18-53-44.-.Trim.mp4
これまでは白い背景レイヤー1枚で起動していましたが、透明なレイヤーが1枚追加されレイヤー2枚で起動するようになりました。
間違って白い背景レイヤーに線画を描く事故を減らす事ができます。
ChickenPaintのショートカットキーを拡張しました｜さとぴあ
- R+左クリックでキャンバスの回転
- Hで表示の左右反転
- Qでレイヤーの左右反転
- Wで水彩
- Aでエアブラシ
- Sで薄消しゴム
- Uでぼかしツール
- Dで指先ツール
- Cで混色ツール
- SHIFT+CTRL+Eで全レイヤー結合
- SHIFT+ALT+Eで全レイヤーを結合した新レイヤーを追加
- SHIFT+CTRL+Gでグループ結合
- CTRL+Mでマスク適用
- SHIFT+Mでマスク削除
- CTRL+Iでネガポジ反転
- SHIFT+左クリックでブラシサイズと不透明度のスライダーを緩やかに調整
- CTRL+スペース+左クリックでズーム (左にドラッグで縮小し右にドラッグで拡大)
レイヤーパレットの右クリックメニューが動作しなくなってしまったので、埋め合わせとして、ショートカットキーを追加しました。
以下はレイヤーマスクのサムネイルの上をクリックした時に動作するショートカットキーです。
- shift+クリックでマスク表示/非表示切り替え(ドキュメントには記載がなかったものの元から存在していたショートカット)
- alt+クリックでマスクの内容を表示/非表示(ドキュメントには記載がなかったものの元から存在していたショートカット)
- ctrl+クリックでマスク適用(追加)
- shift+crtl+クリックでマスク削除(追加)
- ｢下のレイヤーと結合｣をペンによる操作で簡単に実現できるようにするため、レイヤーパレットに｢下のレイヤーと結合｣アイコンを追加しました。
- グループ結合アイコンを追加しました。
たくさんレイヤーがある時はグループ化して閉じればレイヤーパレットの場所を取らず便利です。
しかし、これまではグループレイヤーを結合するには右クリックメニューから選ぶか上段のメニューからグループ結合を選択する必要がありました。
そして、レイヤーの右クリックメニュー機能を再実装できなかったため、実質上のメニューか、ショートカットキーでしか操作できなくなっていました。
そこで、レイヤーパレットに｢グループ結合｣アイコンを追加しました。
1タップで、グループフォルダ内のレイヤーを結合して1つにします。
グループフォルダを選択すると下のレイヤーと結合アイコンがグループ結合アイコンに入れ代わります。
- 複製アイコンを追加しました。
これまでは、ショートカットキーを使うか、上段のメニューから複製を選択するしかありませんでした。
複製アイコンを1タップするだけでレイヤーやレイヤーグループが複製できるようになりました。
- レイヤーパレットのマスクアイコンの動作を変更しました。
選択しているレイヤーにマスクが無い時は｢マスク追加｣になり、マスクが存在している時は｢マスク適用｣に変わります。
これによりペン操作で簡単にレイヤーマスクを適用できようになります。
これまでの、マスクアイコンには｢マスク追加｣機能しかありませんでした。
- レイヤーパレットのゴミ箱アイコンをタップするとレイヤー全体が削除されていましたが、レイヤーマスクを選択している時は、レイヤーマスクだけ削除できるようになりました。 一般的なペイントツールと同じ動作になりました。
- キーボードショートカットキー｢Hでレイヤーの左右反転｣に続き、アイコンも追加しました。
これまではキーボードがないデバイスはメニューから左右反転を選択する必要がありました。
左右反転アイコンの追加により、ワンタップで左右反転できるようになりました。
ChickenPaint Beの操作パレットに左右反転アイコンを追加｜さとぴあ
- これまでは、下のレイヤーと結合するとクリッピングマスクが無効になっていました。
- これまでも問題なく動作していたレイヤーグループの結合と同じ挙動になるようにしました。
- 既存のレイヤーを残したまま、すべての可視レイヤーを結合した新しいレイヤーを追加します。
- これまでは、数値を入力する項目にアルファベットやひらがなの入力が可能でした。
- エンターキーのデフォルトの動作をキャンセルして、画面が移動しないようにしました。
- Alt押下でキャンバスの色をスポイトできますが、この時にFirefoxのメニューバーが開閉する問題がありました。 Altキーのブラウザのデフォルトの動作をキャンセルしてこの問題を修正しました。
- レイヤーの不透明度が0%の時や非表示の時にも、変形操作ができない理由を説明するポップオーバーが表示されるようになりました。
- 拡大で2倍、縮小で0.5倍だった拡縮率を拡大で 1.41倍、縮小で0.7092になるように変更しました。
また縮小率0.7092倍時に描線がきれいに表示されないため、初期状態ではオフだったズーム時のアンチエイリアス処理を初期値でOnになるように変更しました。
アンチエイリアスがかかると困る場合はメニューの｢表示｣の中にある、｢ズームをなめらかに表示する｣のチェックを外して使います。
- ｢テクスチャパレット｣に｢ノイズテクスチャ｣を追加しました。
これまでも、｢効果メニュー｣の｢単色ノイズ｣とレイヤー効果でノイズをのせる事ができましたが、それとも少し違うノイズを出す事ができます。
ペンや鉛筆と組み合わせて使う事で、より鉛筆らしい線を描写できます。
また水彩ブラシなどの厚塗りの時にも効果を発揮します。
- 消しゴム使用時はテクスチャを無効化する処理を追加しました。
テクスチャを選択している時にも、消しゴムで消去できるようになりました。
これまでは、テクスチャを選択したまま消しゴムをかけると、薄くはなるものの、消す事ができませんでした。 - 薄消しゴム使用時はテクスチャが適用されます。消しゴムを使ったテクスチャのかけ合わせによる模様の作成をする時は薄消しゴムをご利用ください。
- ブラシプレビューのプレビュー画面の円をドラッグしてブラシサイズを変更する操作がペンでもできるようになりました。
ペンでも操作できるようにするため、マウスに最適化されていた処理をPointerEventに書き直しました。
そして、該当パレットのtouchmoveEventのデフォルトの動作をキャンセルし、誤動作が発生しないようにしました。
ペンが画面から離れているにもかかわらず、ドラッグ中の対象が動いたままになる問題を解消しました。
- 変形時に縦横比を維持するチェックボックスが表示されるようになりました。
｢縦横比を維持｣するチェックボックスがチェックされている時は縦横比が維持されます。
これまでは、縦横比を維持するためにShiftキーを押下する必要がありました。
- 白いキャンバス上の線画を透明な背景の線画に変換する｢輝度を透明度に変換｣機能を実装しました。
Feature request/proposal: converting brightness to opacity · Issue #4 · satopian/ChickenPaint_Be
@SuzuSuzu-HaruHaruさんが作成した原型をもとに不透明度の計算方法を調整し、一般的なペイントソフトと比較しても遜色のない機能として実装しました。
- スマホの縦横の画面の切り換えの時に使いにくいパレットの位置になってしまう事がありました。
画面の向きの変化を検出して自動的にパレットの配置を初期化する事でこの問題を解決しました。
縦表示から
横表示へ。
- デバイスの幅または高さが820px以下でタッチデバイスの時は、パレット折りたたみ式のモバイル用UIで起動します。
600px x 600pxのキャンバスを開いた時の画面の比較。 左、旧UI。右、モバイル端末に最適化された新UI。
- 通信エラー発生時のHTTPステータスコードをわかりやすく表示します。
- ファイルサイズがサーバの上限を超過して送信に失敗した時の現在のファイルサイズとサーバの上限サイズをわかりやすく表示します。
パスワード等の機密データをGETパラメータにセットして送信する事がありました。
postUrl: "./?pwd=パスワード",
これをより安全なPOSTに変更する事ができるようになりました。
投稿が完了して画面が移動する直前に、handleExit関数を実行します。
この関数でFetch APIを使ったPOSTを行えばパスワードなどの機密データをより安全に送信する事ができます。
const handleExit = ()=>{
const formData = new FormData();
formData.append("pwd", "パスワード"); // 画像差し換え
fetch("./", {
method: 'POST',
mode: 'same-origin',
headers: {
'X-Requested-With': 'chickenpaint'
,
},
body: formData
})
.then(response => {
if (response.ok) {
if (response.redirected) {
return window.location.href = response.url;
}
response.text().then((text) => {
if (text.startsWith("error\n")) {
return window.location.href = "./?mode=paintcom";
}
})
}
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
return window.location.href = "./?mode=paintcom";
});
}
chickenpaint.min.jsから参照可能なスコープの中でconst handleExitを定義します。
handleExitという名前の関数が定義されていない時は、handleExitは実行されず、従来と同じ動作になります。
handleExit関数で何を行うのかは掲示板の作者が決定します。
- ビルドツールをParcelに変更しました。
それだけで、100kb以上のファイルサイズの削減を実現できました。
さらに、Pointer Events のポリフィルのためのPEP、Promise対応のためのcore-jsを削除しました。
IE11は完全にサポートが終了しているため、これらのポリフィルは必要なくなりました。
これらのポリフィルを整理した結果、743KBから594KBになり、約20%のファイルサイズ削減になりました。
さらに、jQueryからバニラJavaScriptへのコードの書き直しによりさらにファイルサイズを削減することができました。
ファイルサイズは743KBから496KBになり、約33%のファイルサイズ削減になりました。
- 使用していたnpmのパッケージの多くを整理しました。
パッケージの脆弱性によって開発の続行が困難にならないようにするためパッケージの多くを整理しました。
- もしも動作に問題がある場合は、このリポジトリのIssueを開いてください。
- GitHubにアカウントが無い場合は、サポート掲示板をご利用ください。
- かなりの箇所に手を加えているため、オリジナルの｢ChickenPaint｣には無い固有の問題が存在している可能性があります。
- オリジナル版の｢ChickenPaint｣で発生していない問題をオリジナルの｢ChickenPaint｣のリポジトリに問い合わせないようお願いします。
npm iでパッケージをインストールするとmake allも実行され、chickenpaint/js/に本番環境で使用するためのchickenpaint.jsとchickenpaint.min.jsがビルドされます。
example/index.htmlを開くとChickenPaint Beが起動します。
再度ビルドしたい時はmake allと入力します。
make devでParcelの開発サーバが起動します。
ブラウザで開発サーバのURLを開くと動作確認用のChickenPaint Beが起動します。
dist/ディレクトリに開発サーバで使用するファイル一式が入ります。
dist/ディレクトリに入るのは開発サーバを使った動作確認のためのファイルです。
dist/ディレクトリ内のファイルは配布に適していません。
掲示板などで使用する時に必要になるのは、chickenpaint/ディレクトリ内のファイルだけです。
chickenpaint/ディレクトリのminifyされたchickenpaint.jsとchickenpaint.min.jsをご利用ください。
ビルドずみファイルを含む必要なファイル一式はリポジトリのchickenpaint/ディレクトリにあります。
ビルドされたファイルは、すべてminifyされており、chickenpaint.jsとchickenpaint.min.jsは同じものです。