テキストエリアの内容を Web Storage に保存する下書きプラグインを書いた

tDiary で日記を書いているときに、誤操作（うっかりリロード）やサーバエラーなどで、書きかけの日記が消えちゃったことがある。 最近では、定期的に書きかけの日記の内容をクリップボードやテキストエディタにコピーするようにしていたけど、いちいちそんなことに気を使うのもなんだかエネルギーの無駄に思えてきた。

Gmailだと書きかけのメールを自動的に下書き保存する機能があるけど、あれを実装しようと思ったら Ajax を駆使しないといけないので大変そう。 と思っていたら、ふと HTML5 で策定されている Web Storage が使えるんじゃないかと気がついた。 ただし、テキストエリアの内容を定期的にブラウザのストレージに記憶させるのはいいとして、それをいつ削除すればいいか。 日記の更新に成功したときは下書きを削除…と考えていたら、意外と難しそうだと分かった。 そういえば、ローカルストレージを使うときはサーバ側との同期が大変…とどこかで読んだな。

いいインタフェースが思いつかずに1ヶ月くらい放置していたけど、ふと閃いた。 書き込みに成功したときに下書きを削除するんじゃなくて、下書きの保存件数の上限を決めておき、上限を超えたものから消しちゃえばいい。 目的は誤操作によるデータ消失を防ぐことなので、直近の書きかけデータを取得できればOKだし。

インタフェースを思いついたので、休みを利用して勢いで実装してみた。 主にコードの大半はリナカフェで珈琲を飲みながら書いた。

下書きプラグインのソース (coderepos.org)。 ライセンスを書き忘れたけど、 tDiary と同じ GPL で（あとでソースに追記する）。

インストール方法

• tDiary の contrib パッケージから js/draft.js と plugin/draft.rb を、 tDiary の js ディレクトリとプラグインディレクトリにコピー
• tDiary の設定画面で draft プラグインを有効にする

jQuery ライブラリに依存しているので、jQueryライブラリが読み込まれるようになっている開発版（リポジトリからチェックアウト）でないと動作しない。 tDiary 3.0がリリースされるまでの、お楽しみ。

あ、あと。HTML5のWebストレージを使っているので、非対応のブラウザだと動かない。 手元では、Snow Leopard の Firefox3.6.6と、Chrome6.0で動作確認をした。

使い方

• プラグインを有効にすると、日記の更新フォームの下に「下書き」が表示される。
• 普通に日記を書いていけば、書きかけの内容が自動的に下書きに保存されていく。
• 復活させたい下書きをセレクトボックスで選択して「読み込み」ボタンをクリックすれば、保存された下書きの内容が更新フォームのテキストエリアにコピーされる。
• 下書きは最大10件保存される。

補足

• 下書きは Web ブラウザのローカルストレージに保存される。
• 下書きの保存は5秒間隔、もしくはテキストエリアからフォーカスが外れたタイミング。
• 下書きには日記の日付（○月×日）は記憶されない。誤って別の日の日記に上書きしてしまわないように注意。

備考

Web Storage にはセッションストレージとローカルストレージがある。 セッションストレージはブラウザが閉じるとデータが消えるので、永続化されるローカルストレージに保存している。

これは tDiary プラグイン用に作ってるけど、考え方はテキストエリア全般に適用できる。 グリモンを書いてみると面白いかもね。