SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

2.2 クライアントコード

リスト3 クライアントHTMLとJavaScript(addJournal2.htm)
<!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 仕訳データ登録&nbsp;&nbsp;&nbsp;
  <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)

次のページ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Cloud SQLで学ぶ業務・基幹系アプリ再入門連載記事一覧

もっと読む

この記事の著者

清野 克行(セイノ カツユキ)

慶應義塾大学工学部電子物理専攻卒。日本IBM、日本HPで、製造装置業を中心とした業務系/基幹業務系システムのSE/マーケティングや、分散アプリケーションによる社内業務システム開発などに携わる。現在は、クラウドやAjax関連の/ソフト開発/書籍執筆/セミナー講師/コンサルティング、などを行っている。情...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6672 2012/07/30 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング