概要

よみがえるはウェブサイトのフォームの内容を保存、復元するツールです。

製作の動機

お問い合わせ等のフォームに入力した内容を誤って消してしまい、また一から入力し直している時のあの残念な感じを撲滅しよう！

製作過程

制作当初の指針

どのサイトでも手軽に使えるようにブックマークレットとして製作を開始しました。仕様は、フォームの内容をJSON形式でクッキーに５秒ごとに保存し、次回のブックマークレット起動時にクッキーの有効期限が切れていなければ復元する、といったものでした。このバージョン１（と呼ばせてもらいます）の決定的な欠陥はクッキーの保存容量が極端に少ないことでした（参考：クッキーの最大サイズ制限について）。これだと完全にフォームの内容を復元できず「残念な感じ」を撲滅できないので次にjavascriptとFlashのSharedObjectを用いたブックマークレット、バージョン２の製作に移りました。

バージョン２

これの仕様はjavascriptでフォームの内容を取得、JSON化しFlashに渡してやりSharedObjectに保存するといった仕様でした。ここではまったのがjavascriptとFlashの通信でした。【解決！】ExternalInterfaceにハマるここで書かれていることにはまり、さらにExternalInterface.call Internet explorerでnullが返ってくる件ここで書かれていることにもはまりました。どちらもブラウザの仕様が原因でした。これらの問題を解決してある程度完成したとこで、ブックマークレットを起動中かどうかのUIがほしいという話になり一考。エディタなどによくある未保存を表す「＊」をページ右上に表示しブックマークレットの起動と、フォームの内容の保存、未保存をあらわしました。これで完成かなぁと思っていたら重大なことに気づく、SharedObjectは有効期限を設定することができないので自動で削除ができない。セキュリティに不安ありとうことでバージョン２も断念、いずれFlashPlayerの仕様が改善されてSharedObjectの有効期限が設定できることを願うのみ。それで、次の「よみがえる」はサーバーにフォームの内容を保存しcrontabの設定で自動削除を実装しました。

よみがえる

ブックマークレットとして作ってきましたが、フォームの内容をサーバーに保存することにしたのでブックマークレット版は一度開発をストップして「よみがえる」を使用したいページにスクリプトを埋め込む、埋め込み版の開発を進めていくことにしました。 埋め込み版にしたことにより、ユーザーは「よみがえる」を使用している意識が無く、UIの必要性も薄れたので排除し、フォームが復元されるのはブラウザの機能であるかのように動作するよう、心がけました。

仕様

• 保存したフォームの内容があれば復元してから保存を開始します
• 5秒ごとに、前回保存した内容と異なれば保存します
• 5分に一度は必ず保存します
• 保存したフォームの内容はページを離れて１０分間保存します

課題

• 5秒ごとの保存のため完全な保存、復元ができていない
• 強制的に復元するためUIで復元するか問うべきか？

次回はよみがえるの製作過程ではまった技術的な事柄についてまとめたいと思います。

ダウンロード

ファイル構成

WWWサーバで公開するファイル

• yomigaeru.js

各種ライブラリと本体を読み込むためのブートストラップ

• yomigaeru_main.js

  よみがえる本体

• prototype.js

  クロスブラウザ対応用

• swfobject.js

swfファイルロードに使用

• md5.js

  よみがえり対象ページの一致チェック用

• yomigaeru.swf

通信用

• yomigaeru.cgi

  サーバ保存用
  #!/usr/local/bin/ruby
  DATADIR="/tmp/yomigaeru"
  の2行は環境に合わせて変更してご利用ください
  

• yomigaeru.fcgi

FastCGI用ラッパ(FastCGI使用時にご利用ください)
設置pathなど環境に合わせて変更してご利用ください

WWWサーバで公開しないファイル

• delete_session.rb

保存したフォーム内容の定期的な削除に使用
#!/usr/local/bin/ruby
DATADIR="/tmp/yomigaeru"
の2行は環境に合わせて変更してご利用ください
定期的な削除には cron などをご利用ください
*/10 * * * * /usr/local/bin/ruby /var/yomigaeru/bin/delete_session.rb

その他

• yomigaeru.fla

yomigaeru.swfのソースファイル

• Yomigaeru.as

外部ASファイル

• README.txt

使用ライブラリ

Prototype

http://www.prototypejs.org/
よみがえるでは1.5.1以降の機能を使用しています。
既にprototype.jsを使用している場合そのまま使用できるはずですが、
より古いバージョンと同時に使用することは困難です。

SWFObject

http://blog.deconcept.com/swfobject/

md5.js

http://www.onicos.com/staff/iz/amuse/javascript/expert/

インストール方法

• ファイルをサーバーへアップします

※「WWWで公開するファイル」に関してはすべて同じ場所へアップしてください

• 以下のスクリプトタグを使用したいページのhtmlに挿入してください

<script type="text/javascript" src="http://*/yomigaeru.js" charset="UTF-8"></script>

※srcはyomigaeru.jsを設置したサーバーへのパスに書き換えてください。

使い方

よみがえるを設置したページを訪れる人は使い方を意識する必要は無く、
ページに訪れたらフォームの保存が始まります。
復元できるデータがあれば復元してからフォームの保存が始まります。
5秒ごとにフォームの内容が前回保存した内容と異なるかチェックして異なれば保存します。
また、そうでなくても5分に一度は必ず保存するようにしています。
保存期間はページを離れてから10分以上です。
（※保存期間はクーロンの設定によります。）

使用をやめる場合

設置したファイルを削除していただき、htmlに挿入したスクリプトタグも削除してください。