2.3 従業員マスタ登録の画面操作
2.1で見たように、基幹系システムではマスタ・テーブルが数多くあり、それらのテーブルにはシステム可動の前に、必要とされるデータをすべて準備しておく必要があります。このあたりがマスタデータの準備があまり必要でないソーシャル系との違いであり、また大変なところでもあるのですが、連載ではCloud SQLでのマスタデータ登録から見ていきます。
初期表示
図5は従業員マスタ情報の初期表示画面で、この画面から従業員情報の登録・参照・更新・削除処理を行うことができます。
登録処理
登録処理では画面上の入力/選択項目をセット後、「登録」ボタンをクリックすることによって実行されます。
図6は登録処理実行後の画面ですが、初期表示画面にはなかった資格のフィールドに、「基本情報処理技術者」などのチェックボックスの選択項目が表示されており、そのいくつかが選択されています。
このフィールドの表示は「職種」でSEを選択した場合に表示されるようになっており、この他職種で「経理」を選択した場合にも対応した選択項目が表示され、営業、人事、総務を選択した場合は資格フィールドがクリアされます。
参照処理
参照処理では、図5の初期表示画面でキー項目（この場合は従業員番号になるでしょう）を入力して「参照」ボタンをクリックします。この場合も職種に対応する資格フィールドが、登録時にチェックされた状態で自動表示されます。
更新処理
更新処理では、参照表示した内容を更新した後、「更新」ボタンをクリックします。図8では職種を営業に変更しているため、資格フィールドの表示はクリアされています。
削除処理
削除処理は参照表示で内容確認後、「削除」ボタンのクリックで実行されます。
2.4 Cloud SQLで テーブル作成
以上見てきた画面操作のCloud SQLのプログラムをここから作成していきます。最初に行うのは、従業員情報を格納するテーブルの作成です。テーブル作成は図10のApp Engine Consoleで作成済みのデータベース（business）を選択して、SQL PromptからDDL（CREATE TABLE）文を入力して行います。
なお、データベースbusinessはSQL Promptから次の構文で簡単に作成できます。
CREATE DATABASE business
従業員マスタのCRUD処理ではemp_masとlicenseの2つのテーブルを使用しています。それぞれのテーブルは次のCREATE TABLE文で作成しています。
CREATE TABLE emp_mas ( emp_no varchar(8) NOT NULL , name varchar(20) default NULL, job varchar(10) default NULL, assign varchar(30) default NULL, PRIMARY KEY (emp_no) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE license ( emp_no varchar(8) NOT NULL , qua varchar(50) default NULL, KEY (emp_no) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
licenseテーブルでは同じemp_noに対して任意数のレコード登録が行われます。従ってキー値重複のエントリを許さないPRIMARY KEYの使用は不可で、KEYにしてあります。
2.5 Webクライアント側プログラムの作成
Cloud SQLでのマスタ登録サンプルは「Google Cloud SQLとBigtableのコード記述と処理スピードを比較・検討してみる」でも紹介しており、基本的な画面構成とプログラム処理は同じです。ただし今回のサンプルでは資格のフィールドでライセンス項目をセットするため、これまでに比べてその部分だけプログラム処理が追加されます。
リスト3はこのサンプルのWebクライアントプログラムです。（A）～（D）でそれぞれ登録、参照、更新、削除処理を行っていますがポイントとなる処理にはコメントを入れてあります。jQueryを使用した一般的な非同期通信処理なので基本的に問題はないと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>従業員マスタ情報</title>
<script type="text/javascript" src="/jslib/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
///////////////////////////////////////////
// （A) 登録処理
$("#add").click(function(){
var query = {};
query["mode"] = "add";
query["emp_no"] = $("#emp_no").val();
query["name"] = $("#name").val();
//ラジオボタン値読み取り
query["job"] = $("input[name='jobitem']:checked").val();
//セレクトメニュー値読み取り
query["assign"] = $("#assign").val();
//チェックボックス値読み取り
var license= "";
$("[name='qua[]']:checked").each(function(){
license += this.value + ",";
});
license = license.substr(0, license.length -1);
query["license"] = license;
//非同期通信で登録リクエスト送信
$.post("/hrsvlt", query, function(res){
var r = $.parseJSON(res)
$("#stat").text(r.stat);
});
});
/////////////////////////////////////////////////
// （B) 参照処理
$("#rev").click(function(){
var query = {};
query["mode"] = "rev";
query["emp_no"] = $("#emp_no").val();
//非同期通信から参照処理実行
$.get("/hrsvlt", query, function(res){
var r = $.parseJSON(res);
$("#stat").text(r.stat);
$("#name").val(r.name);
//ラジオボタン値セット
$("input[name='jobitem']").val(new Array(r.job));
//セレクトメニュー値セット
$("#assign").val(r.assign);
if (r.job == "SE"){
set_se();
}else if(r.job == "経理"){
set_ac();
}
//チェックボックス値セット
license = new Array();
for(var i = 0; i < r.license.length; i++){
license.push(r.license[i].qua);
}
$("input[name='qua[]']").val(license);
});
});
///////////////////////////////////////////////
// （C) 更新処理
$("#upd").click(function(){
var query = {};
query["mode"] = "upd";
query["emp_no"] = $("#emp_no").val();
query["name"] = $("#name").val();
//ラジオボタン値ゲット
query["job"] = $("input[name='jobitem']:checked").val();
//セレクトメニュー値ゲット
query["assign"] = $("#assign").val();
//チェックボックス値ゲット
var license= "";
$("[name='qua[]']:checked").each(function(){
license += this.value + ",";
});
license = license.substr(0, license.length -1);
query["license"] = license;
//非同期通信で更新リクエスト送信
$.post("/hrsvlt", query, function(res){
var r = $.parseJSON(res)
$("#stat").text(r.stat);
});
});
////////////////////////////////////////////////
// （D) 削除処理
$("#del").click(function(){
var query = {};
query["mode"] = "del";
query["emp_no"] = $("#emp_no").val();
//非同期通信で削除リクエスト送信
$.post("/hrsvlt", query, function(res){
var r = $.parseJSON(res)
$("#stat").text(r.stat);
});
});
////////////////////////////////////////////////////
// 職種選択から資格項目表示
$("#job").click(function(e){
var job = e.target.id;
if (job=="job1" || job=="job4" || job=="job5"){
$("#license").html("");
}else if (job == "job2"){
set_se();
}else if(job == "job3"){
set_ac();
}
});
});
function set_se(){
var tags = '<span>';
tags += '<input type="checkbox" name="qua[]" value="基本情報技術者">基本情報技術者 ';
tags += '<input type="checkbox" name="qua[]" value="システムアナリスト">システムアナリスト ';
tags += '<input type="checkbox" name="qua[]" value="ソフトウェア開発技術者">ソフトウェア開発技術者<br/>';
tags += '<input type="checkbox" name="qua[]" value="アプリケーションエンジニア">アプリケーションエンジニア ';
tags += '<input type="checkbox" name="qua[]" value="プロジェクトマネージャー">プロジェクトマネージャ ';
tags += '<input type="checkbox" name="qua[]" value="オラクルマスター">オラクルマスタ ';
tags += '</span><hr/>';
$("#license").html(tags);
}
function set_ac(){
var tags = '<span>';
tags += '<input type="checkbox" name="qua[]" value="簿記1級">簿記1級 ';
tags += '<input type="checkbox" name="qua[]" value="簿記2級">簿記2級 ';
tags += '<input type="checkbox" name="qua[]" value="簿記3級">簿記3級<br/>';
tags += '<input type="checkbox" name="qua[]" value="公認会計士">公認会計士';
tags += '<input type="checkbox" name="qua[]" value="税理士">税理士 ';
tags += '</span><hr/>';
$("#license").html(tags);
}
</script>
</head>
<body bgcolor="#f8f8f8">
<span style="color:#aa0022;font-weight:bold" >従業員マスタ情報
<input type="button" id="add" value=" 登録 "/></span>
<input type="button" id="rev" value=" 参照 "/></span>
<input type="button" id="upd" value=" 更新 "/></span>
<input type="button" id="del" value=" 削除 "/></span>
<hr/>ステータス: <nobr id="stat"></nobr><hr/>
キー：<input type="text" id="emp_no" size="12"/><br/>
名前：<input type="text" id="name"/><hr/>
<!-- ラジオボタン -->
職種：<span id="job">
<input type="radio" name="jobitem" id="job1" value="営業"/>営業
<input type="radio" name="jobitem" id="job2" value="SE"/>SE
<input type="radio" name="jobitem" id="job3" value="経理"/>経理
<input type="radio" name="jobitem" id="job4" value="人事"/>人事
<input type="radio" name="jobitem" id="job5" value="総務"/>総務
</span><hr/>
<!-- セレクトメニュー -->
所属：<select id="assign">
<option value="">所属</option>
<option value="東京本社">東京本社</option>
<option value="新宿支店">新宿支店</option>
<option value="新橋支店">新橋支店</option>
<option value="横浜支社">横浜支社</option>
<option value="横浜支社">大阪支社</option>
</select><hr/>
<!-- チェックボックス -->
資格:<div id="license"></div>
</body>
</html>
このWeb画面では3種類のコントロール（ラジオボタン、セレクトメニュー、チェックボックス）を使用していますが、jQueryでセットされた値を読み取る方法については、（A）登録処理でのコードサンプル、サーバから受信したデータからコントロールに値をセットする方法については、（B）の参照処理でのコードサンプルが参考になるはずです。
