見出し画像

ChickenPaintを改良したChickenPaint Beの新機能

さとぴあ

ChickenPaintとは

｢ChickenPaint｣は、Nicholas Sherlock氏が開発したペイントソフトです。

2020年頃から日本のお絵かき掲示板でも使われるようになり、ブラウザなのにPhotoshopのような機能がある!お絵かき掲示板なのに高機能!と讃えられました。

そして、今回紹介するのはそのChickenPaintを改造したChickenPaint Beです。

ChickenPaint Beの新機能をYou Tube動画で

この動画で説明している機能の一覧

  • エラーメッセージの日本語化

  • 下のレイヤーと結合アイコンの追加

  • グループ結合アイコンの追加

  • マスクアイコンはマスク有りの時はマスク適用に機能が変わるトグルアイコンに

  • R+ドラッグでキャンバスを回転

  • 描画中にも円カーソルが表示される

  • レイヤーパレットを操作しても、ショートカットキーが有効

言葉で説明するとものすごくながくなりますので、ぜひ動画でご確認ください。

改造版がなぜ必要だったのか?

JavaScriptの進歩は日々めざましく、ほんの数年前には普通に使われていたコードが非推奨になる事があります。
たとえば…

互換性のために、非推奨になってもブラウザからすぐには消えて無くならないのかもしれませんが、非推奨になったものは、いつか消えてしまってもそれが正しい仕様なので可能であれば修正したほうがいいでしょう。
しかし、修正作業をすすめてすべて完了したはずなのに、ビルドしたコードに非推奨のコードが残っていいました。
Bootstrap4にも非推奨になったコードが存在していたからです。

という事は、npmでパッケージをインストールしてビルドしたコードを再編集して問題の箇所を修正しないと、非推奨のコードを推奨されるものに修正できない事になります。
ChickenPaintをビルドするたびに生成ずみのコードを再編集する作業が発生します。これはとても無駄な作業です。

また、Bootstrap4は2023年1月1日にサポートを終了したので、Bootstrap4のコードの問題の箇所が修正される事もありません。

では、Bootstrap5にするだけですね?
いいえ、Bootstrap5はjQueryからJavaScriptに置き換えられていて変更点も多いため、単にBootstrap4をBootstrap5に入れ替えただけでは動作しません。コードの大幅な書き直しが必要になります。
Bootstrapのバージョンを4から5にあげて、いったんChickenPaintが動かなくなったところから、Bootstrap5でも動作するようにするための作業をすすめていく事になりました。
その過程で、どこで何を処理をしているのかを理解する事が必要になり、結果として機能の拡張が実現できました。

これが、カスタマイズ性の高いスタンドアローンのアプリだったら、ここにはフォルダ結合のアイコンを配置して…と簡単にできるのかもしれないのですが、まずアイコンを用意して、そのアイコンをクリックしたら動作するようにコードを書かなければいけません。

人気が高まっているノーコードの真逆!?なのかもしれません。

だいたいまるまる一ヶ月かかりっきりで作業してやっと形になりました。

しかし…。

ChickenPaint Beを使ってくれる人が思ったほどいない…。
これが現在の悩みです。

もともと十分使えるアプリでしたからね…。
非推奨のコードでも、ブラウザからすぐに機能が消えてなくなる訳ではないし、早まってしまったのかもしれません。
しかし、Bootstrap4をBootstrap5対応にできたのなら、将来Bootstrap6に対応しなければならなくなった時に自力でBootstrap6に対応させる事もできるかもしれません。

2024年1月現在、ChickenPaint Beのビルド時のパッケージの脆弱性0件、非推奨0件です。
これまでは何件もの脆弱性と非推奨のパッケージを使っていましたから、何年分かは寿命をのばす事ができたと思います。
もっとも、オリジナルの開発元も更新を停止しているわけではないので、逆にオリジナル版のコードに変更があった場合は改造版のコードも変更する必要がでてくるのかもしれません。

もしそうなったとしても、改造版からオリジナル版に戻す事もできるので、保険としての改造版があってもいいのでは?と思っています。
オリジナル版が更新されて改造版は必要なしとなったらその時はその時です。

さらに機能を追加して、操作パレットに左右反転アイコン付けました。

ChickenPaint Beを同梱したPetit Note

お絵かき掲示板PHPスクリプトPetit Noteには、4つのお絵かきアプリの最新版を同梱しています。
ChickenPaint Beの最新版もPetit Noteに入っています。

お絵かき掲示板交流サイトPetit Note

そのPetit Noteを使ったお絵かき掲示板交流サイトPetit NoteのChickenPaintもChickenPaint Beです。
ChickenPaintとChickenPaint Beの何が違うのかをすぐに確認していただく事ができます。
お絵かきの投稿を随時募集中ですので、どうぞよろしくお願いします。


この記事が気に入ったらサポートをしてみませんか？