CodeZine(コードジン)

特集ページ一覧

Google Cloud SQLとBigtableのコード記述と処理スピードを比較・検討してみる

Google App Engine for JavaでMySQLを使ってみる(2)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/04/13 10:30

目次

プログラムリスト

 このサンプルではJavaBeansからデータストアにアクセスしているので、そこから見ていきたいところですが、図1構成のアクセスの順序に従って、view機能に対応するWebクライアント(HTML+JavaScript)から見ていきます。ただし、Webクライアントとサーブレットはデータストア・アクセスには直接関係しない部分なので簡単に見ていきます。

1. HTML&JavaScript View -> Controller

リスト1 HTML&JavaScript(itemInfoCrud1.htm)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>App Engine Cloud SQL 部品情報管理</title>
<script type="text/javascript" src="../jslib/jquery-1.7.1.min.js"></script>
<script type="text/javascript"> 
var mode = "add";
var query = {};
query["table"] = "item_info";
$(function(){ 
   $("#item_no").focus();
   $("#exe").click(function(e){                                     //(1)
       query["mode"] = mode = $('input[name="op"]:checked').val();  //(2)
       query["item_no"] = $("#item_no").val();
       if(mode=="rev"){                                             //(3)
           $.get("/bomsvlt", query, function(json){
               var dat = $.parseJSON(json);
                $("#status").text(dat.status);
                $("#item_name").val(dat.item_name);
                $("#final_flag").val(dat.final_flag);
                $("#vendor_no").val(dat.vendor_no);
                $("#vendor_name").val(dat.vendor_name);
            });           
       }else    if (mode=="add" || mode=="upd"){                    //(4)
          query["item_name"] = $("#item_name").val();
          query["final_flag"] = $("#final_flag").val();
            query["vendor_no"] = $("#vendor_no").val();
            query["vendor_name"] = $("#vendor_name").val();
            $.post("/bomsvlt", query, function(resp){
                $("#status").html(resp);    
            });
       }else if(mode=="del"){                                       //(5)
           $.post("/bomsvlt", query, function(resp){
               $("#status").text(resp);
           });
       }
   });
}); 
</script>
</head>
<body>
<table width="350" border="1" cellpadding="0" class="b1" bgcolor="#eeeeff">
      <thead id="crud">    
        <tr height="23"><th class="t4" colspan="2">App Engine Cloud SQL 部品情報管理</th></tr>
        <tr height="23">
                <th colspan="2">
                  <input type="radio" name="op" value="add" checked="checked" />登録
                  <input type="radio" name="op" value="rev" />参照
                <input type="radio" name="op" value="upd" />更新
                <input type="radio" name="op" value="del" />削除
                <input type="button" id="exe" value=" 実行 "/>  
              </th>
        </tr>
      </thead>
      <tbody id="data">
          <tr>
          <th width="150">部品番号</th>
              <td><input type="text" size="12" id="item_no"/></td>
        </tr>
       <tr><th>部品名</th><td><input type="text" id="item_name"/></td></tr>
       <tr><th>ファイナル</th><td><input type="text" size="2" id="final_flag"/></td></tr>
       <tr><th>ベンダNO</th><td><input type="text" size="24" id="vendor_no"/></td></tr>
        <tr><th>ベンダ名</th><td><input type="text" size="34" id="vendor_name"/></td></tr>
       <tr><th height="23">ステータス</th><td id="status">&nbsp;</td></tr>
      </tbody>
</table>
</body>
</html>

 リスト1のitemInfoCrud1.htmはCloud SQL用のCRUD処理画面ですが、サーバへの非同期通信などで、jQueryを使用しています。ラジオボタンから処理内容を指定した後、画面データを入力し、「実行」ボタンをクリックすると(1)の匿名関数が起動されます。匿名関数内では、(2)でCRUD処理モードを取得し、その値に従って(3)で参照、(4)で登録または更新、(5)で削除処理のリクエストをjQueryの非同期通信($.getおよび$.post)を使用してサーバに送信しています。

 Bigtableアクセス用の画面もこれとまったく同じものを使用していますが、サーブレット側で処理の切り分けを行うために、ラジオボタンのvalue値を、add_kv2、rev_kv、upd_kv2、del_kvのように変えてあります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Google App Engine for JavaでMySQLを使ってみる

著者プロフィール

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

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5