ペイントツールlitaChix(リタチックス)のさらなる進化

お絵かき掲示板のペイントツールlitaChixは、2023年12月に、ChickenPaintの派生バージョンとして誕生しました。
そこからの機能追加の歴史は以下の記事をご覧ください。

以下はその後にさらに追加された新機能やコードのリファクタリングについての記事になります。

レイヤーマスクをゴミ箱アイコンで削除

レイヤーパレットのゴミ箱アイコンのタップで、レイヤーマスクを削除できるようになりました。

一般的なペイントツールではごく当たり前の操作ですが、これまではゴミ箱アイコンをタップすると、レイヤー全体が削除されていました。

通信エラー時のエラーメッセージをより詳細に

これまでは404としか表示されていなかった、HTTPステータスコードに、Not Foundのようなコードの説明を追加しました。

脱jQueryを実現

オリジナルのChickenPaintは、bootstrap4を使っていたためjQueryが必要でした。
しかし、litaChixは、bootstrap5を使っているためjQueryは必須ではありません。
では、jQueryをJavaScriptに書き直すだけですね?
ええ、そうですね。
膨大な数のjQueryのコードをひとつひとつ手作業で丁寧に…。
ただ、それをやっているとそれだけで人生が終わってしまいます。
そのためChat GPTやGitHub Copilotを駆使して作業を行い、意図どおりの動作にならない箇所を人間が丁寧にデバッグして、JavaScriptだけで動くコードに書き直しました。

2025年4月、ついにすべてのjQueryを撤去する事に成功し、脱jQueryを実現する事ができました。
litaChixは脱Queryによって、jQueryの今後の開発に左右されなくなりました。
仮にjQueryの開発が終了したとしても、litaChixには影響がありません。
また、ファイルサイズを劇的に削減する事ができました。
改造前のオリジナルの｢chickenpaint.min.js｣(圧縮済み)のファイルサイズは743kbでした。
古いブラウザのためのポリフィルを整理した結果、ファイルサイズは743kbから594kbになり約20%のファイルサイズ削減を実現しました。
そして、jQueryからバニラJavaScriptへのコードの書き直しによりさらにファイルサイズを削減することができました。
ファイルサイズは743kbから496kbになり約33%のファイルサイズ削減を実現しました。

jQueryとJavaScriptが混在しているコードは保守が面倒です。

例えばjQueryでは、｢blur()｣が非推奨になりました。

しかし、純粋なJavaScriptでは非推奨ではなく推奨されるメソッドです。
これは別のものなのですが、コードを検索する時には同じ文字列として検索にヒットするため、非推奨のコードなのか問題のないコードなのかを確認する時に、jQueryのオブジェクトなのかそれともJavaScriptのオブジェクトなのかを確認する必要がありました。
脱jQueryを実現すれば、ブラウザの標準で動作する事を確認するだけですみます。

その後さらに追加された｢表示の左右反転｣の記事はこちらをごらんください。

お絵かき掲示板 Petit Note

litaChix、PaintBBS NEOのメンテナンスも行い、お絵かき掲示板のPHPスクリプトの開発を維持しながら、お絵かき掲示板交流サイトPetit Noteを運営しています。
これらの開発は、自分のサイトで使うための開発であり、いわばDIYですが、結果としてできあがったものを無償で配布しています。
だれでもお絵かき掲示板を自サイトに設置する事ができます。
お絵かき掲示板 Petit Noteをどうぞよろしくお願いします。