次の画面キャプチャは、ベトナムの開発会社に依頼し開発した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"> </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; } */
