お絵かき掲示板のペイントツールlitaChixにブラウザストレージからの復元機能を追加

ブラウザストレージからデータを復元

お絵かき掲示板で絵を描くにはChromeなどのブラウザが必要です。
しかし、ブラウザには｢戻る｣ボタンや｢再読み込み｣ボタンがあります。
そのため、ブラウザバック、リロードのタイミングでデータが消えてしまう事があります。
消えてしまう｢事がある｣?
必ず消えるわけではない?
はい。
Java時代のしぃペインターとPaintBBSには強力な復元機能がありました。
つまり、間違ってページを移動してしまってもデータを復元できたのです。
しぃペインターのドキュメントの該当箇所を引用します。

この復元機能は、PaintBBS NEOにも引き継がれました。

PaintBBS NEOは、しぃペインターと同じようにページの移動時にバックアップを保存していました。
その後、AXNOS Paintの10ストローグごとに保存する機能にヒントを得て、NEOでも10ストロークごとにバックアップが保存されるようになりました。
これにより、ブラウザクラッシュ、停電やChromeのメモリ節約機能によるデータの消失にも対応できるようになりました。
一方でlitaChixは、依然としてリロード、ページ移動でデータが消えていました。
移動時に一応警告は出るし、そのままでもいいか…と思っていたら、Chromeのメモリ節約機能で、せっかく描いたイラストが消えてしまいそのまま復元できなかった海外のユーザの方が…。
ずっと後回しにしていたデータの復元機能でしたが、実際に事故が発生してしまったので、とりかかる事にしました。
たぶん、この作業は半年ぐらいかかるんだろうなぁ…→数時間でバックアップできるようなりました。
もっとも、とりあえず動いたところからの作業時間はものすごい事になりました…。
試行錯誤を重ねてようやく実用に耐えるようになったバックアップ機能の画面をご覧ください。

このGIF動画では、ページを再読み込みしています。(GIF動画が動かない時は画像をタップして拡大表示)
ブラウザストレージへのバックアップ機能が付く前は再読み込みした時点で画像データがすべて失われていましたが、今回追加したブラウザストレージへのバックアップ機能を使えばそこから復元する事ができます。
ブラウザストレージへの自動保存は、60ストロークごとに行われます。
AXNOS PaintやNEOのように10ストローク単位にしかったのですが、litaChixで扱うレイヤーの枚数が多くデータが大きいので60ストローク単位でのバックアップになりました。

また、ファイルメニューからブラウザストレージにバックアップする機能も追加しました。
これにより、同じサイト内の別の掲示板でデータを復元できるようになりました。
描く場所を間違えた時に別の板で復元して続きを描く事ができるようになりました。

データは、ブラウザのIndexedDBに保存されます。
電源を切っても、PCを再起動してもブラウザのIndexedDBに保存したデータは消えません。
ただし、｢復元しますか?｣という確認ダイヤログが開いた時に｢キャンセル｣を選択するとデータは消えてしまいます。
また、掲示板に投稿する時にもバックアップデータは消えてしまいます。
あくまでも｢未保存のデータ｣の復元機能だからです。

夏のゲリラ雷雨の時などに、デスクトップPCの電源が一瞬切れる事が何度かありました。
もしお絵かき掲示板で絵を描いている最中だったら?
これまでは、NEOかAXNOS Paintでしか復元できなかったので、雷の音が聞こえたらChickenPaint/litaChixでは絵を描いてはいけない状態でした。
これからは、100%の保証ではないものの、そんな事になったとしてもデータを復元できるようになりました。

お絵かき掲示板PHPスクリプトPetit Note

お絵かき掲示板PHPスクリプト、Petit Noteには、このブラウザストレージへのバックアップ機能を搭載した最新版のlitaChixを同梱しています。
すべて無料で提供しています。
ぜひご利用ください。

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

お絵かき掲示板交流サイトPetit Noteを運営しています。
もちろん自分で掲示板を設置して使う事もできますがlitaChixの最新版は、お絵かき掲示板交流サイトPetit Noteでも使えます。