2 仕訳データの入力とDB登録
2.1 仕訳データの画面と処理手順
図4は仕訳データ入力の初期表示画面です。画面右上に「ローカルストレージ」と「クラウドストレージ」のラジオボタンがありますが、これは勘定データを、localStorageアカウント管理画面で登録されたlocalStorageにものを使用するか、またはクラウド上のデータを使用するかの指定になっており、デフォルトはlocalStorageになっています。
サンプルでは、借方（かりかた）、貸方（かしかた）それぞれ勘定科目1つのシンプルな画面にしてありますが、実際のパッケージソフトなどでは、図5のような仕訳入力画面も含めて何種類かの入力パターンが使用されています。
しかしサンプルで使用している図4の画面でも、仕訳入力で必要な入力項目や、この後見ていく仕訳入力でのユーザ操作とストレスのない画面表示などを理解する上で問題のない画面と言えます。
5桁の伝票番号を入力するとカーソルは借方コードに移動します。ここでは日付と会計区分は自動表示をそのまま使用します。実システムでは伝票番号の自動採番もあり得るでしょう。
次に5桁の借方コードを入力すると瞬時に勘定科目名が表示されカーソルは借方金額のフィールドに移動します。ここで画面左下に「1ms」と表示されていますが、これは5桁の入力された借方コードでWeb Storageを検索し、勘定科目名を表示するまでにかかる時間を意味しており「0.001秒」という超高速でアクセス・表示でき、借方金額へのカーソル移動を含めても0.002秒程度で済んでいます。
次に借方金額を入力すると、画面右下の借り方合計にも自動表示されます。ただし、合計金額が入力金額と異なることは当然あるのでその場合は修正します。その後貸方コードを入力すると勘定科目名が自動表示されますが、ここでは0msと表示され、0.001秒もかかっていません。
貸方金額入力後、「Alt」キーをクリックするとクラウドサーバへのデータ送信とDB登録処理が行われますが、この処理に要する時間は画面左下にあるように493ms、つまり0.5秒弱になっています。クラウドへの送信処理は「摘要」フィールドにも入力し、そこで「Alt」キーを押した場合も同様に行われます。
クラウドアクセスで勘定科目表示
最後に画面右上のラジオボタンでクラウドストレージを選択して実行した結果が図10です。図のように貸方コード入力から勘定科目表示まで424msで、約0.4秒ですが若干待たされるという感覚はあります。環境の問題などでlocalStorageが使用できないこともあるかもしれませんが、その場合は0.4秒強程度の待ち時間ということになります。
さらに処理スピードの向上
図9からクラウド上のMySQLへの仕訳データ登録では0.5秒程度時間を要していますが、この待ち時間を短縮する方法としては、次のような対応が考えられます。
- 仕訳データ書き込みでのlocalStorage利用
5MBのlocalStorage容量は100バイトのデータを5万件格納できることになります。従ってサンプルでの仕訳情報の登録内容をlocalStorage書き込みに変更することも可能で、担当者の仕訳入力完了後バッチでクラウドサーバに送信するようにして、さらに処理時間をスピードアップすることができます。
- HTML5のWeb Workersを使用したコンカレント処理
もう一つの方法として、Web Workersを使用したコンカレント処理で仕訳データクラウド送信での待ち時間を実質ゼロにしてしまう方法がありますが、これについては次回サンプルの紹介と解説を行う予定です。
このように、Web Storageを使用した場合のキー検索・転送時間は、ほとんどの場合1ミリ秒またはそれ以下で、Cloud SQLでクラウド上のMySQLをアクセスする場合に比べて約400倍以上スピードアップしていることになります。
ところで1ミリ秒というスピードは、ハードディスクアクセスを行った場合は不可能な値で、ディスクキャッシュでも難しいでしょう。従って、このデータアクセスはCPU内蔵キャッシュ（L1キャッシュまたはL2キャッシュ）が使用されていると推定されます。それではどのようなタイミングでキャッシュにデータが格納されるのかということになりますが、次の検索結果から推測できます。
- localStorageアカウント管理画面でクラウドのアカウントデータをlocalStorageに書き込んだ後は、すべて1ミリ秒またはそれ以下でアクセスされる
- localStorage書き込み後、時間をあけて（例えば翌日）アクセスした場合は、最初のアカウント名アクセスで計測では54ミリ秒掛かっており、その後は確認したアカウントコード（約10種類）すべてで1ミリ秒またはそれ以下でアクセスされる
以上の結果からCPUキャッシュについて、次のように推定されます。
- HTML5のWeb Storageストレージ機能を使用してローカルディスクにデータを書き込んだ場合は、同時にCPUキャッシュにも書き込まれ、他の操作などを行い時間が経過すればそのキャッシュは消去される。
- キャッシュが消去された後、最初にハードディスク書込のlocalStorageアクセスを行うと、アクセスと並行して、アクセスされたキー・バリュー値だけでなくすべてのキー・バリューペアがキャッシュされ（これはキー・バリューペアの数が増えればまた違ってくるでしょうが）、その後のアクセスでは、どのキー値に対してもキャッシュアクセスのスピードで検索される。
ところで筆者が使用しているPCでは、プロセッサとして Intel Pentium CPU G620 2.60GHz（2コア）が使用されていますが、このCPUのL2キャッシュは3MBでインテルスマートキャッシュが使用されています。
従来のCPUでは、コアごとにL2キャッシュを備えていたため、データの重複によるキャッシュ領域の無駄遣いが生じていましたが、インテルスマートキャッシュではコア間でL2キャッシュを共有するため効率的なキャッシュ利用を行えるようになっています。
