途中保存
原稿や入会申し込み、レジュメなど、論理的なフォームが大きい場合、ページを分割して入力させる。そうすると当然ながらコンバージョンが落ちるので、離脱しても途中から再開できるように状態を保存しておくことが求められる。
https://gyazo.com/349723cb80e6efc680237a68a4f05ba3
※ SMBCのVISAカードの入力フォームの例 (数ページに1トランザクションの入力がまたがる; なおこのサイトには途中保存機能は付いていない)
設計のポイント
基本的には生存期間の長いセッションデータとして考える。
復元のさせ方
一度ブラウザを落として、再度アクセスした際に、「途中まで入力したデータが存在します。そこから再開しますか?」のようなダイアログを表示して、入力データ、ページともに復元させる。
途中保存の条件
ログインがない場合、無条件に復元させると、共有PCなどで入力データの漏洩に繋がってしまうので、明示的に途中保存のボタンを押させて、パスワードを入力させるなどして保護する。(か、途中保存要件をあきらめる)
保存のタイミング
(仮想的でも)ページ遷移があれば、そのタイミング
ない、または仮想ページ中のフォームがそれなりに大きければ、以下のどちらか。
一定の時間間隔で保存を走らせる。
onKeyPressが一定時間発生しなければ、保存を走らせる。
ストア先をどこにするか?
ストア先候補
localStorage
サーバ (RDB/ドキュメントストア)
localStorageの容量制限や複数端末で途中保存したときどうするなど考える必要がないので、迷ったらサーバで持っておくのが無難。
どこまでバリデーションするか?
SPAの場合でも、仮想ページ切り替えるたびに部分的なバリデーションはするように設計しておく。
途中保存データの保管期間は?
データストアの設計
サーバ内のRDBMSに途中保存させるとしても、最終的なバリデーション前のデータなので、カラム定義がきちんとされたテーブルに格納しづらい。CLOB型またはJSON型にJSONとして、保存しておくのがよい。使いどころを悩むJSON型の最も適した用途である。
□TODO: コード例を載せる