Cloud SQLとHTML5のWeb Storageで高速仕訳入力

Cloud SQLで学ぶ業務・基幹系アプリ再入門（2）

　基幹系システムとは一言で言えば、「仕訳入力（journal entry）が発生する業務系システム」です。他の定義も見掛けたりしますが、これが一番明確な定義でしょう。連載第2回では、Cloud SQLを使用した仕訳入力を紹介します。業務系／基幹系システムではデータ入力での操作性とスピードが要求される処理内容も多いですが、仕訳入力はその典型です。ここではCloud SQLとHTML5のWeb Storageの組み合わせやjQueryのUI機能などによる、操作性と入力速度の向上について検討してみます。

サンプルシステムの構成

　図1は今回サンプルのシステム構成で、クライアント側では前回もそうでしたがHTMLのタグ記述をHTML5の書式で行い、サーバ側ではサーブレットとビーンズの構成でCloud SQLからRDBのMySQLにアクセスするようになっています。この構成でアプリケーションとしては仕訳入力を行うプログラムを作成していきますが、今回Cloud SQLと組み合わせて使用するWeb Storageについて最初に見ていきます。

図1　連載第2回のサンプルシステム構成

Web Storage

　HTML5ではHTMLのタグ仕様だけでなくJavaScriptから呼び出されるAPIの仕様も策定し、Webブラウザによる動作の差異をなくそうという方向性と、Webアプリケーションを作成する上でWebクライアントとして不足していた機能を補うAPIを補充・追加するという方向性が見られます。

　このような趣旨・目的から策定されたAPIの一つがWeb Storageで、Webクライアントのローカルディスク上にデータを保存する機能です。従来はCookieがこれに近い機能として使用されていましたが、Web StorageはCookieに比べて「有効期限がない」「データサイズの制限がない」などの特徴があり、また保存できるデータ量も多くなっています。

1. Web Storageの仕様

　Web Storageはデータを識別するための文字列をキーとし、任意のJavaScriptオブジェクトを値にとる単純なキー・バリュー型のストレージで、次の2種類のストレージタイプがあります。

localStorage（ローカルストレージ）

　localStorageは、オリジン単位でデータを永続的に保存するストレージです。 ここでオリジンは、「http://www.at21.net:80」のような「プロトコル://ドメイン名:ポート番号」を意味しており、 オリジンが同じであれば別ウィンドウでもデータを共有でき、ブラウザを終了してもデータは失われません。 データ保存量の上限はブラウザへの推奨値が1オリジン当たり5MBとされており、 クッキーの4KBに比べるとはるかに大容量のデータを保存できます。

sessionStorage（セッションストレージ）

　sessionStorageは、ウィンドウやタブ単位での一回限りのセッションで有効なストレージです。 ウィンドウやタブが開いている間のみデータが保存され、閉じるとデータが失われます。 同じドメインのサイトを別々のウィンドウやタブで開いている場合は、それぞれが別のsessionStorageとなります。 クッキーとは異なり、ウィンドウ間でデータが共有されることはありません。またWeb Storageでは、Cookieと異なり、任意のJavaScriptオブジェクトを保存（正確にはオブジェクトのコピー）することができます。

　以上のスペックの違いを、クッキーを含めて比較すると表1のようになりますが、この中で最も使いでがあるのはlocalStorageで、このサンプルではlocajStorageを使用しています。

表1 クッキー、sessionStorage、localStorageのスペック比較

	別ウィンドウでのデータ共有	データの有効期限	保存容量	セキュリティ
クッキー	○	指定期限まで有効で期限が過ぎると削除される	4KB	すべてのリクエストに対してサーバにデータを自動送信
sessionStorage	×	ウィンドウやタブを閉じるまで有効	1オリジン当たり5MB	データを利用する時のみ送信（自動で送信しない）
localStorage	○	永続的に有効	1オリジン当たり5MB	データを利用する時のみ送信（自動で送信しない）

2. Web SQL Database

　Webクライアントのディスク上にデータを保存するストレージとしては、上記の他にWeb SQL Databaseがあり、今回は触れませんがこの後の連載で取り上げる予定です。

　Web SQL Databaseは、簡単に言えばブラウザからアクセスされるローカルRDBで、実装部分はSQLiteがベースになっています。従来からのデータベース（RDB）の特長をそのまま受け継いでいるため、リレーショナル構造やトランザクションもサポートされます。

注

　Web SQL DatabaseはHTML5の仕様から外れることがすでに正式決定されており、W3Cでメンテナンスされないことが公表されています。