2.2 クライアントコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Google Cloud SQL Journal Entry</title> <style><!-- .num {text-align: right; } --></style> <script type="text/javascript" src="../jslib/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ if (localStorage){ $("#stat").text("このブラウザはlocalStorage使用可能です。"); }else{ $("#stat").text("このブラウザはlocalStorage使用できません。"); } $("#check_no").focus(); var date = new Date(); var stime = 0; var etime = 0; $("#check_date").val(date.getFullYear()+"-"+(date.getMonth() + 1)+"-"+date.getDate()); $("#items").keyup(function(e){ //(1) var eid = e.target.id; //(2) var dc = eid.split("_")[0]; //(3) var con = eid.split("_")[1]; //(4) if(con=="code"){ var dc_code = $("#"+dc+"_code").val(); //(5) if(dc_code.length != 6) return; //(6) stime = etime = 0; var storage = $("input[name='storage']:checked").val(); //(7) if (storage=="local"){ //(8) stime = new Date(); var val1 = localStorage.getItem(dc_code); $("#"+dc+"_acct").val(val1); //(9) etime = new Date(); $("#stat").text((etime - stime)+"ms"); $("#"+dc+"_amt").focus(); } else if(storage=="cloud"){ //(9) stime = new Date(); var query = {}; query["mode"] = "get_acct"; query["acct_code"] = dc_code; $.get("/acctsvlt", query, function(res){ //(10) var r = $.parseJSON(res); if(r.stat.substr(0,2) == "NO"){ $("#stat").text(r.stat.substr(3)); }else{ $("#"+dc+"_acct").val(r.acct_name); //(11) etime = new Date(); $("#stat").text((etime-stime)+"ms"); $("#"+dc+"_amt").focus(); } }); } }else if ((eid=="credit_amt" || eid=="remark") && e.keyCode==18){ //(12) stime = new Date(); var query = {}; query["mode"] = "addJournal"; query["check_no"] = $("#check_no").val(); query["debit_code"] = $("#debit_code").val(); query["debit_acct"] = $("#debit_acct").val(); query["debit_amt"] = $("#debit_amt").val(); query["credit_code"] = $("#credit_code").val(); query["credit_acct"] = $("#credit_acct").val(); query["credit_amt"] = $("#credit_amt").val(); query["remark"] = $("#remark").val(); $.post("/acctsvlt", query, function(res){ //(13) var r = $.parseJSON(res); $("#stat").text(r.stat); etime = new Date(); $("#stat").text((etime-stime)+"ms"); //(14) $("#check_no").focus(); }); } else if (con=="amt"){ var dc_amt = $("#"+dc+"_amt").val(); $("#"+dc+"_total").val(dc_amt); } }); $("#check_no").keyup(function(){ if($("#check_no").val().length != 5) return; $("#debit_code").focus(); }); }); </script> </head> <body> <h4>Google Cloud SQL 仕訳データ登録 <span> 勘定科目参照 <input type="radio" name="storage" value="local" checked/>localStorage <input type="radio" name="storage" value="cloud"/>クラウドストレージ </span> </h4> <table width="280" border="0" cellspacing="2" cellpadding="0"> <tr bgcolor="#ccffcc"> <th align="center">伝票番号</th> <th align="center">日付</th> <th align="center">会計区分</th> </tr> <tr> <td ><input type="text" size="10" id="check_no" /></td> <td ><input type="text" size="10" id="check_date" /></td> <td ><input type="text" size="25" value="収益事業等会計" /></td> </tr> </table> <table width="700" border="0" cellspacing="2" cellpadding="0"> <tr bgcolor="#ccffcc"> <th>借方コード</th> <th>勘定科目名</th> <th>借方金額</th> <th>貸方コード</th> <th>勘定科目名</th> <th>貸方金額</th> <th>摘要</th> </tr> <tr id="items"> <td><input id="debit_code" type="text" size="7" /></td> <td><input id="debit_acct" type="text" size="11" /></td> <td><input id="debit_amt" type="text" size="9" class="num" /></td> <td><input id="credit_code" type="text" size="7" /></td> <td><input id="credit_acct" type="text" size="11" /></td> <td><input id="credit_amt" type="text" size="9" class="num" /></td> <td><input id="remark" type="text" size="15" /></td> </tr> </table> <table width="700" border="0" cellspacing="2" cellpadding="0"> <tr> <td width="500" id="stat"><td> <th width="100" align="center" bgcolor="#ccffcc">借方合計</th> <td width="100"><input type="text" id="debit_total" size="14" /></td> </tr> <tr> <td><td> <th align="center" bgcolor="#ccffcc">貸方合計</th> <td><input type="text" id="credit_total" size="14" /></td> </tr> </table> </body> </html>
リスト3は仕訳データ登録のJavaScriptですが、仕訳データ入力項目のどのフィールドでキー入力があった場合も(1)の匿名関数が呼び出されます。これはイベント伝搬機能を利用して入力フィールドの上位ノード(<tr>タグ、id="items")でキー入力を検知することによって行われています。従って(1)の匿名関数ではキー入力がどのフィールドで行われたかを識別する必要があり、これはイベントオブジェクトeを使用した(2)のe.target.idで取得されるイベント発生ノードのID値(eid)を使用して行っています。
ここで、リスト3の各仕訳入力フィールドのID値を見ると一定の規則性で設定されています。つまり、借方項目では'_'の前がすべて「debit」で貸方項目の場合はすべて「credit」になっており、'_'の後は借方、貸方ともに入力項目に合わせてcode(勘定コード)、acct(勘定科目)、amt(仕訳金額)の順に並んでいます。この規則性を利用するため、(3)と(4)でそれぞれ'_'の前後の値を変数の「dc」と「con」にセットし、この後の処理記述の短縮化を行っています。
上記の準備によって、最初のif判定後、(6)の$("#"+dc+"_code").val() はキー入力されている勘定コードになり、この値がセットされた変数dc_codeの長さが6の場合は、勘定コードの入力完了を意味しており、その後の処理が継続されます(6)。
(7)では勘定科目参照がlocalStorageかクラウドストレージかを確認し、localStorageの場合は(8)からの処理で勘定科目名を対応する勘定名フィールドにセットし(9)、クラウドストレージの場合は(9)からの処理で、(10)のクラウドサーバにアクセスして得られた勘定科目名を(11)で借方または貸方の対応する勘定名フィールドにセットして処理時間をステータス表示し、その後カーソルを対応する仕訳金額フィールドに移動しています
以上の処理後、貸方金額または摘要フィールドまで入力が進んでいる状態でALTキー(キーコード=18)が押されると(12)、$.postメソッドで入力された勘定データを連想配列(query)にセットして、登録データとしてサーバに送信します(13)。サーバ側では受信した仕訳データのデータベース登録処理が行われ、サーバでの登録完了後、以上の処理に要した時間がステータス表示されます(14)。