end0tknr's kipple - 新web写経開発

http://d.hatena.ne.jp/end0tknr/ から移転します

ベトナム人プログラマの書くコードが普通(今風?)で驚いた

次の画面キャプチャは、ベトナムの開発会社に依頼し開発したwebアプリのものです。このアプリは10個程度の条件を入力すると、それに応じた品番のようなものを出力する単純なもので、サーバ側をjava(jsp?)、クライアント側をhtml+jqueryで実装しています。

ベトナム人の書くsrcは、10年近く遅れているんだろうなぁ...

なんて思っていましたが、とんでもない。
javascriptこそclassを定義せずグローバル(window object)な関数を定義しているが、ajaxしているし、htmlのDOMも整理されている。

しかも、ここのベトナム人は日本語を話せるスタッフが多いらしいが、それでも人月単価は日本人プログラマの数分の1(具体的な金額は書けませんが)。また、この開発会社は、日本人駐在スタッフがプロジェクトマネージャとして入り、プログラマも数百人を抱えているので、開発期間の融通もききやすいという。

やはり日本国内で、単純な受託開発をやっている場合ではない気がします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Choose category screen</title>

<base href="http://XXX.XXX.XXX.XXX:80/sexy/" />
<script type="text/javascript">
var CONTEXT_PATH = "/sexy";
var ignore = false;
</script>
<link rel="stylesheet" href="stylesheet/main.css" type="text/css" media="screen,print" />
<link rel="stylesheet" href="stylesheet/common.css" type="text/css" media="screen,print" />

<link rel="stylesheet" type="text/css" href="stylesheet/menu-base.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="stylesheet/menu-topbar.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="stylesheet/menu-sidebar.css" media="screen,print" />

<script type="text/javascript" src="javascript/common.js"></script>
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/message.jsp"></script>
<script language="javascript" type="text/javascript" src="javascript/jquery.min.js"></script>
</head>
<body>

<!-- Start root panel -->
<div class="com-root-panel">
<!-- Start header info --> 

<!-- Start header info -->
<div class="com-header-info-panel">
<!-- Start logo panel -->
<div class="com-header-logo-panel">
<div class="com-header-logo-panel">
<a href="/sexy/FN_COM01/RP_COM01_03_01_01BL.do">
 <img src="image/xxx_home_logo.jpg" border="0px" style="width:62px;height:42px;" /></a>
</div>

</div>
<!-- End logo panel -->

<!-- Start header button -->
<div class="com-header-button-panel">

<a href="/sexy/FN_COM01/RP_COM01_03_01_01BL.do">Top page</a>
<a href="/sexy/FN_COM01/RP_COM01_02_01_01BL.do">Logout</a>
<br/>
<span style="color:white;padding-right:5px">Welcome,
  <a href="/sexy/FN_COM01/RP_COM01_05_01_01BL.do"><strong>administrator</strong></a>
</span>

</div>
<!-- End header button -->
</div>
<!-- End header info -->

<!-- End header info --> <!-- Start body container -->
<div class="body-container">
<!-- Start left container --> 

<!-- Start left container -->
<div class="com-left-container-panel">
<!-- Start menu panel -->
<div class="com-main-menu-panel">


<ul class="menu">
<li class="menu-item">
  <div class="menu-item-1">Administration</div>
  <ul class="menu-1">
  <li class="menu-item-1"><a href="/sexy/FN_COM01/RP_COM01_04_01_01BL.do">Change password</a></li>
  <li class="menu-item-1"><a href="/sexy/FN_ADM01/RP_ADM01_01_01_01BL.do">User management</a></li>
  <li class="menu-item-1"><a href="/sexy/FN_ADM02/RP_ADM02_01_01_01BL.do">Role management</a></li>
  </ul>
</li>

<li class="menu-item">
  <div class="menu-item-1"> Master Maintenance</div>
  <ul class="menu-1">
  <li class="menu-item-1">
  <a href="/sexy/FN_HMM01/RP_HMM01_01_01_01BL.do"> master maintenance</a>
</li>
  
  <li class="menu-item-1">
  <a href="/sexy/FN_HMM01/RP_HMM01_06_01_01BL.do">HIM maintenance</a>
</li>
  <li class="menu-item-1">
  <a href="/sexy/FN_HMM01/RP_HMM01_07_01_01BL.do">Copy house data</a>
</li>
  <li class="menu-item-1">
  <a href="/sexy/FN_IMP01/RP_IMP01_01_01_01BL.do"> master import</a>
</li>

  <li class="menu-item-1">
  <a href="/sexy/FN_EXP01/RP_EXP01_01_01_01BL.do"> master export</a>
</li>
</ul>
</li>

<li class="menu-item">
<div class="menu-item-1">Data Master Maintenance</div>
<ul class="menu-1">

<li class="menu-item-1">
<a href="/sexy/FN_DMM01/RP_DMM01_01_01_01BL.do">Data master maintenance</a>
</li>

<li class="menu-item-1">
<a href="/sexy/FN_DMM01/RP_DMM01_06_01_01BL.do">Data master mass update</a>
</li>

<li class="menu-item-1">
<a href="/sexy/FN_IMP01/RP_IMP01_02_01_01BL.do">Data master import</a>
</li>

<li class="menu-item-1">
<a href="/sexy/FN_EXP01/RP_EXP01_02_01_01BL.do">Data master export</a>
</li>

</ul>
</li>

<div class="menu-item-1">Material Order Maintenance</div>
<ul class="menu-1">
<li class="menu-item-1"><a href="/sexy/FN_MOM01/RP_MOM01_01_01_01BL.do">Generate Order</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MOM02/RP_MOM02_initBL.do">Search & List Order</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MOM06/RP_MOM06_initBL.do">Search & Export Picking List</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MOM01/RP_MOM01_04_01_01BL.do">Create Manual Order</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MOM05/RP_MOM05_initBL.do">Export Pre-Order</a></li>
</ul>

<div class="menu-item-1">Material Stock Control</div>

<ul class="menu-1">
<li class="menu-item-1"><a href="/sexy/FN_MSC01/RP_MSC01_initBL.do">Input Material Receive</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MSC02/RP_MSC02_initBL.do">Input  Completion</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MSC04/RP_MSC04_initBL.do">Stock Issue</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MSC05/RP_MSC05_initBL.do">Inventory Adjustment</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MSC06/RP_MSC06_initBL.do">Stock Status</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MSC07/RP_MSC07_initBL.do">Month End Process</a></li>
<li class="menu-item-1"><a href="/sexy/FN_MSC08/RP_MSC08_initBL.do">Search Stock Log</a></li>
</ul>

<div class="menu-item-1">Interface with SAP</div>
<ul class="menu-1">
<li class="menu-item-1"><a href="/sexy/FN_SAP01/RP_SAP01_initBL.do">Daily Batch</a></li>
</ul>


<div class="menu-item-1">Production Order</div>
<ul class="menu-1">

<li class="menu-item-1">
<a href="/sexy/FN_POM01/RP_POM01_initBL.do">Search & Export Prod.PS List</a>
</li>
<li class="menu-item-1">
<a href="/sexy/FN_WIM01/RP_WIM01_01_01_01BL.do">Search & Export Prod.CD List</a>
</li>
</ul>

</ul>

</div>
<!-- End menu panel -->
</div>
<!-- End left container -->

<!-- End left container -->
<div class="com-right-container-panel">
<!-- Start function name -->
<div class="com-header-function-panel">
<div class="com-header-function-text">Choose category</div>
</div>
<!-- End function name --> 

<!-- Start toolbar --->
<div class="com-header-toolbar-panel">
<div class="com-header-toolbar-text">


</div>
</div>
<!-- End toolbar--> 
<!-- Start message -->
<div class="com-message-panel">
<div class="com-info-message-text" >
<center><div id="sexyMsg"></div></center>
</div>
<div id="warns" class="com-warn-message-text"></div>
<div id="errors" class="com-error-message-text">
<center></center>
</div>
</div>
<!-- End message --> 
<!-- Start content -->
<div class="com-body-panel">

<form name="fn_hip01_03Form" method="post"
 action="/sexy/FN_HIP01/RP_HIP01_03_01_02BL.do?r=6799501752848586476" id="fn_hip01_03Form">
<div><input type="hidden" name="org.apache.struts.taglib.html.TOKEN" value="a4ae36d7076d29bd453e0d3805efafb8"></div>
<div id="showError" align="center"> 
&nbsp;
</div>

<input type="hidden" name="houseId" value="0000001" id="houseId">
<input type="hidden" name="actionType" value="save" id="actionType">
<input type="hidden" name="checkChangeCategoryId" value="02" id="checkChangeCategoryId">
<input type="hidden" name="totalUnitNo" value="" id="totalUnitNo">
<input type="hidden" name="categoryId" value="02" id="categoryId">

<!-- End hidden field -->
<!-- Start message -->
<div id="errors" class="com-error-message-text"></div>
<!-- End message -->
<!-- Start content -->
<div class="com-body-panel">

<table width="100%" class="com-visible-table">
  <tr>
    <th width="16%" class="com-visible-table-right-field">
     ID</th>
    <td width="29%" class="com-visible-table-left-field plain-text">
    0000001</td>
    <th width="10%" class="com-visible-table-right-field">
     name</th>
    <td width="45%" class="com-visible-table-left-field">Exterior wall sample for sale </td>
  </tr>
  <tr>
    <th width="16%" class="com-visible-table-right-field">
    Old Free Input Select</th>
    <td colspan="3" class="com-visible-table-left-field">
    <select name="categoryIdOld" id="categoryIdOld">
      <option value="" selected="selected">------Select------</option>
      <option value="01">Sub Structure</option>
      <option value="05">IW Panel [SB] (AHA~)</option>
      <option value="10">Party 2010 (AOA~)</option>
      <option value="11">PT Panel [SB](AIA~)</option>
      <option value="17">Void [SB] (ALB~)</option>
      <option value="18">Handrail [SB] (ALBB~)</option>
      <option value="19">Floor Support [SB] (ALBE~)</option></select></td>
</tr>
<tr>
  <th width="16%" class="com-visible-table-right-field">
  New Free Input Select</th>
  <td colspan="3" class="com-visible-table-left-field">
  <select name="categoryIdNew" id="categoryIdNew">
    <option value="">------Select------</option>
    <option value="02" selected="selected">Reef Single</option>
    <option value="03">Reef Double</option>
    <option value="04">Bay</option>
    <option value="20">IW Panel [GB] (AHB~) 0311</option>
    <option value="22">Void [GB] (ALB~) 0311</option>
    <option value="25">PT Panel [GB] (AIB~) 0311</option>
    <option value="27">Sub Structure 201105V</option>
    <option value="28">Party 2011 (AOB~) 0311</option>
    <option value="90">Free</option>
  </select>
</td>
</tr>
</table>
function showPopup(){
    var p=window.createPopup();
    var pbody=p.document.body;
    pbody.style.backgroundColor="lime";
    pbody.style.border="solid black 1px";
    pbody.innerHTML="View shipping plan pop-up! Click outside to close.";
    p.show(150,150,200,50,document.body);
}

function newWinM(url){ 
    window.open(url, "_blank", "width=850,height=600,scrollbars=yes"); 
}

function showConfirmDelete(message, currentPath){
    var r=confirm(message);
    if (r==true) {
	this.close();	
    } else {
	window.location.href=currentPath;		
    }
}

function clsWin(){
    window.opener = window;
    var win = window.open(location.href,"_self");
    win.close();
}

function closeWin() {
    this.close();	
}

function confirmGoBack(){
    var check;
    check = confirm('Are you sure to go back screen ?');
    
    if(check)
    {
	window.history.back(-1);
    }
}

/*open each screen for each category in free input module*/
function openFreeInputScreen(freeInputType)
{
    //name of screen will be display
    var screenName;
    screenName = "";
    
    //determine screen display
    if(freeInputType == "Sub Structure")
    {
	screenName = "(SC_HIP01_03_02) Edit  item - free input - input data by sub structure category screen.html";
    }
    else if(freeInputType == 'Reef Single')
    {
	screenName = "(SC_HIP01_03_03) Edit  item - free input - input data by roof single category screen.html";
    }
    else if(freeInputType == 'Reef Double')
    {
	screenName = "(SC_HIP01_03_04) Edit  item - free input - input data by roof double category screen.html";
    }
    else if(freeInputType == 'Free')
    {
	screenName = "(SC_HIP01_03_05) Edit  item - free input - input data by free category screen.html";
    }
    else if(freeInputType == 'Bay')
    {
	screenName = "(SC_HIP01_03_06) Edit  item - free input - input data by XXXXXX screen.html";
    }
    else if(freeInputType == 'XXXXX')
    {
	screenName = "(SC_HIP01_03_07) Edit  item - free input - input data by XXXXXX screen.html";
    }
    
    //display screen
    if(screenName != "")
    {
	window.location.href = screenName;
    }
    else
    {
	alert("Please choose [Free Input Select]");
    }
}

/*open each screen for each master in master data maintenance module*/
function openMasterScreen(masterType)
{
    //name of screen will be display
    var screenName;
    screenName = "";
	
    //determine screen display
    if(masterType == "m_mim")
    {
	screenName = "(SC_DMM01_02_01) Menu item master - list screen.html";
    }
    else if(masterType == 'm_free_input_list')
    {
	screenName = "(SC_DMM01_03_01) Free input list master - list screen.html";
    }
    else if(masterType == 'm_free_input_validation')
    {
	screenName = "(SC_DMM01_04_01) Free input validation - list screen.html";
    }
    else if(masterType == 'm_free_input_expand')
    {
	screenName = "(SC_DMM01_05_01) Free input expand master - list screen.html";
    }
    else if(masterType == 'm_mps')
    {
	screenName = "(SC_DMM01_06_01) Menu part structure master - list screen.html";
    }
    else if(masterType == 'm_ps')
    {
	screenName = "(SC_DMM01_07_01) Part structure master - list screen.html";
    }
    else if(masterType == 'm_im')
    {
	screenName = "(SC_DMM01_08_01) Parts master - list screen.html";
    }
    
    //display screen
    if(screenName != "")
    {
	window.location.href = screenName;
    }
    else
    {
	alert("Please choose [Master data]");
    }
}
/*************************************************************
	Style of header, footer, menu, body frame, message
*************************************************************/

/*************************************************************
	Common styles
*************************************************************/
a,b,input,label,p,div,button,td,th,li,span,select,option, textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}
body{
	margin:0px;
	height:100%;
}
form {
  margin: 0px;
  padding: 0px;
}
textarea{
	overflow:auto;
}
/*
h1 {
  font-size: medium;
  font-weight: normal;
  margin: 0px;
}*/


a{
	color:#0033CC;
	text-decoration:none;	
}

a:visited{
	color:#0033CC;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

/*************************************************************
Root panel region
*************************************************************/
.com-root-panel {
	width:1004px;
	padding: 0px 0px 0px 0px;
	background-color:#FFFFFF;  
	margin:10px auto 0px auto;
}

.com-root-panel-popup {
	width:820px;
	padding: 0px 0px 0px 0px;
	background-color:#FFFFFF;  
	margin:10px auto 0px auto;
}

.body-container{
	margin:15px 0px 15px 0px;
}

.com-left-container-panel{
	float: left;
	width:190px;
}

.com-right-container-panel{
	float:left;
	width:808px;
	margin-left:5px;
}

/*************************************************************
Header info region
*************************************************************/
.com-header-info-panel {
  height: 42px;
  padding: 6px;
  background-color: #B6001D;
}

.com-header-logo-panel{
	float:left;
	text-align:left;
}

.com-header-button-panel{
	float:right;
	text-align:right;
}

.com-header-button-panel a{
	padding-right:5px;
	color:#FFFFFF;
}

.com-header-button-panel a:visited{
	color:#FFFFFF;
}

.com-header-button-panel a:hover{
	color:#FFFFFF;
	text-decoration:underline;
}


/*************************************************************
Main menu region
*************************************************************/
.com-main-menu-panel{
}

ul.menu{
	margin:0px 0px 0px 0px;
	padding:0px;
	list-style:none;	
	border: #cbcfed 1px solid;
	border-top:0px;
}
div.menu{
	margin:0px 0px 0px 0px;
	padding:0px;
	list-style:none;	
	border: #cbcfed 1px solid;
	border-top:0px;
}
ul.menu ul{
	padding:0px;
	margin:0px;
	list-style-type:none;
}
div.menu li.menu-item-1{
	list-style:none;
	margin:0px;
	padding-top:5px;
	border-top: #cbcfed 1px solid;
}

ul.menu li.menu-item-1  {
border-top:1px solid #CBCFED;
list-style:none outside none;
margin:0;
padding-bottom:5px;
padding-top:5px;
}

li.menu-item-1 {
padding:0 0 0 5px;
}
div.menu-item-1{
	font-size:13px;
	font-weight:bold;
	background-color:#7799DD;
	padding:0px 0px 0px 5px;
	height:24px;
	line-height:24px;
}
/*
.com-main-menu-title{
	font-size:13px;
	font-weight:bold;
	background-color:#cbcfed;
	padding-bottom:0px;
}
*/