jQuery Mobileを使用したサンプル
リスト3 stock.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>営業状況報告</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
$(function(){
if(getCookie("staff_info") != ""){ //（1）
var staff_info = $.parseJSON(getCookie("staff_info"));
$("#staff_name").val(staff_info.staff_name);
$("#location").val(staff_info.location);
}
$("#setbaseinfo").click(function(){ //（2）
var staff_name_in = $("#staff_name_in").val();
var emp_no_in = $("#emp_no_in").val();
var location_in = $("#location_in").val();
setCookie("staff_info", "{\"staff_name\": \"" + staff_name_in
+ "\", \"emp_no\": \"" + emp_no_in + "\", \"location\": \""
+ location_in + "\"}"); //（3）
$("#staff_name").val(staff_name_in); //（4）
$("#location").val(location_in); //（5）
$("#stat2").text("担当者情報登録完了");
});
$("#invupdate").click(function(){ //（6）
var staff_info = $.parseJSON(getCookie("staff_info")); //（7）
var query = {};
query["mode"] = "stockop";
query["emp_no"] = staff_info.emp_no;
query["stock_op"] = $('[name=stock_op]:checked').val();
query["location"] = $("#location").val();
query["part_no"] = $("#part_no").val();
query["op_quant"] = $("#op_quant").val();
query["remark"] = $("#remark").val();
$.post("/stocksvlt", query, function(res){ //（8）
var r = $.parseJSON(res);
$("#stat1").text(r.stat);
});
});
$("#clr").click(function(){
$("#stat1").text("");
$("#stat2").text("");
$.each(["part_no","op_quant","remark"], function(){
$("#" + this).val("");
});
});
});
function getCookie(key){
var tmp = document.cookie + ";";
var index1 = tmp.indexOf(key, 0);
if(index1 != -1){
tmp = tmp.substring(index1,tmp.length);
var index2 = tmp.indexOf("=", 0) + 1;
var index3 = tmp.indexOf(";", index2);
return(unescape(tmp.substring(index2, index3)));
}
return("");
}
function setCookie(key, val){
document.cookie = key + "=" + escape(val) + ";expires=Fri, 31-Dec-2050 23:59:59;";
}
</script>
</head>
<body>
<!-- main page -->
<div data-role="page" id="menu" data-theme="c">
<div data-role="header" data-theme="b">
<h1>入出庫管理情報 </h1>
</div>
<div data-role="content" data-insert="true" data-theme="c">
<div>処理内容</div>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider" data-theme="c">在庫管理メニュー</li>
<li><a href="#base_info">
<h3>基本情報設定画面</h3></a>
<p> 担当者と在庫場所を指定</p>
</li>
<li><a href="#stock_op"><h3>入出庫処理実行画面</h3></a>
<p> 入庫または出庫数量更新</p>
</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h3>Copyright 2012, CyberSpace Co,Ltd</h3>
</div>
</div>
<!-- 入出庫基本情報 -->
<div data-role="page" id="base_info" data-title="入出庫基本情報">
<div data-role="header" data-theme="b">
<a href="#menu" data-icon="arrow-l" data-direction="reverse">メニュー</a>
<h1>入出庫基本情報設定</h1>
</div>
<div data-role="content" data-theme="c">
ステータス ： <span id="stat2"> </span>
<h3>入出庫担当者</h3>
<p>担当者名：<input id="staff_name_in" name="staff_name_in" type="text" size="25" style="width:95%" value="" placeholder="担当者名" /></p>
<p>カードNO：<input id="emp_no_in" name="emp_no_in" type="text" size="25" style="width:95%" value="" placeholder="担当者カードNO" /></p>
<h3>倉庫ロケーション</h3>
<select name="location_in" id="location_in">
<option value="">ロケーション</option>
<option value="大森工場第一">大森工場第一</option>
<option value="大森工場第二">大森工場第二</option>
<option value="大森工場第三">大森工場第三</option>
</select>
<p><input type="button" id="setbaseinfo" value=" 登録 " data-inline="true" /></p>
</div>
<div data-role="footer" data-theme="b">
<h3>Copyright 2012, CyberSpace Co,Ltd</h3>
</div>
</div>
<!-- 入出庫管理 -->
<div data-role="page" id="stock_op" data-title="入出庫管理">
<div data-role="header" data-theme="b">
<a href="#menu" data-icon="arrow-l" data-direction="reverse">メニュー</a>
<h1>入出庫管理</h1>
</div>
<div data-role="content" data-theme="c">
<div>ステータス ：<span id="stat1"> </span></div>
<div>担当者名：<input id="staff_name" name="staff_name" type="text" size="25" style="width:95%" value="" placeholder="担当者名" /></div>
<div>倉庫ロケーション：<input id="location" name="location" type="text" size="18" style="width:60%" value="" placeholder="倉庫" /></div>
<fieldset data-role="controlgroup" id="stock_op" data-inline="true" data-type="horizontal">
<input type="radio" name="stock_op" id="stock_in" value="stock_in" />
<label for="stock_in"> 入庫 </label>
<input type="radio" name="stock_op" id="stock_out" value="stock_out" />
<label for="stock_out"> 出庫 </label>
</fieldset>
<div>部品番号：<input id="part_no" name="part_no" type="text" size="18" style="width:60%" value="" placeholder="部品番号" /></div>
<div>数量：<input id="op_quant" name="op_quant" type="text" size="6" style="width:40%" value="" placeholder="数量" /></div>
<div data-role="fieldcontain" class="ui-hide-label">
コメント：<label for="remark">コメント：</label>
<textarea id="remark" name="remark" rows="8" cols="30" value="" placeholder="コメント"></textarea>
</div>
<input type="button" id="invupdate" value="在庫数量更新" data-inline="true" />
<input type="button" id="clr" value=" クリア " data-inline="true" />
</div>
<div data-role="footer" data-theme="b">
<h3>Copyright 2012, CyberSpace Co,Ltd</h3>
</div>
</div>
</body>
</html>
リスト3は在庫情報更新を行うjQuery Mobileを使用したスマートフォン用のクライアントコードです。入力フィールドやボタンなどタグ記述は長くなっていますが、基本的なタグ構成はリスト2と同じで、メニュー画面と2種類の処理画面（基本情報設定画面と入出庫処理実行画面）で構成されています。jQuery Mobileでの画面構成については前に見ているので、ここではJavaScriptでの処理について触れていきます。
画面ロード時の処理
画面ロード時には（1）のif文が評価され、評価が真の場合はクッキーにセットされている値を読み取って、図9入出庫管理画面の担当者名と倉庫ロケーションに値をセットして、担当者が都度入力を行わなくともいいようにしています。
基本情報設定画面の処理
入出庫基本情報設定の画面では、入出庫担当者の名前とカードNOと倉庫ロケーションを入力・指定後、「登録」ボタンにタッチすると、（2）の匿名関数が起動されます。匿名関数では、担当者名、従業員番号、それに倉庫ロケーションの値を画面から取得し、JSONフォーマットでクッキーに書き込みます（3）。また初回の場合は（1）からの処理が行われることはないため、（4）と（5）で出庫管理画面の担当者名と倉庫ロケーションの値をセットしています。
入出庫処理実行画面の処理
入出庫処理実行画面では、自動セット以外の項目を入力後、「在庫数量更新」のクリックで（6）の匿名関数が呼び出されます。関数内では、JSONフォーマットで書き込まれている値を読み取った後、$.parseJSONでJavaScriptオブジェクトに変換して変数staff_infoにセットしています。その後staff_infoの値（staff_info.emp_no）も含めて連想配列（query）にセットして（8）の$.postでGAEに送信します。
