ワークフローサンプル: 第481話：入力フォームに「ボタン de 入力」の工夫

「もっとスムーズに入力できたら、、、」

業務システムは、多かれ少なかれ「入力画面」で評価される。たとえば「出退勤の報告」「稟議の申請」「受注の報告」「問合に対する回答」などなど、、、日々の業務を思い返してほしい。そこで発生する遅延や手戻りは、その多くは『上流工程における誤入力や不適切入力』が原因となっている。

以下のワークフロー・サンプルは、「入力例ボタン」のクリックで入力できる様に工夫されている。

ボタンがあるだけで、入力者の集中力は持続され、延いてはケアレスミスの発生も減少する。そんな「入力例ボタン」の良さは、実際に体験してもらわなければ伝わらないのだが、、、選択肢を選ばせる手法、データ初期値を設定しておく手法、などとは少し違った入力支援だ。ボタンとは言え、自ら入力しているので「やった感」を積み上げて行けるのだ！？？　そして、入力者の脳にあたえる「CPU負荷」（みたいなもの）が大幅に下がる。

[入力フォームのテストフロー]

[入力フォームのテストフロー：「1.入力テスト」画面]

人間の脳は、実に貧弱だ。

たとえば、誰かから「今日はイイ服だね」と声をかけられただけで、脳内で作成途中だった文章はあっさりと消えてしまう。

人間の脳は、実に浮気っぽい。

たとえば、稟議書の「書き方」を調べていたはずなのに、気がついたら「稟議で大トラブル！」というBlog記事などを読みふけっている。

もちろん、パソコンワーカー達の「業務効率」を考える際には、まずは「業務の流れ」（業務プロセス）全体についての「あるべき姿」を考えるべきなのだろう。ただそれと並行して、個別の工程での入力画面についても、（特に上流工程での入力画面について）、コダワリを持って設計・改善したいところだ。

なお、Questetra の［入力ヒント］には任意の HTML／JavaScript を設定できる。しかし、場合によっては「入力フォームの全体レイアウトを崩してしまう」等のトラブルになる可能性もある。HTML／JavaScript の知識や経験のあるスタッフ自身が、自己責任においてメンテナンス可能な範囲で設定する必要があると言える。

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『サービス名』

例：<button type="button" id="btnConsultant_1">月額顧問料（月単位）</button>、 
<button type="button" id="btnInstruct_1">講習会講師料（日単位）</button>、 
<button type="button" id="btnDoc_1">ドキュメント作成費</button> 

<script type="text/javascript"> 
jQuery('#btnConsultant_1').on('click',function(){  
  jQuery('input[name="data\\[1\\].input"]').val( "月額顧問料（月単位）" ); 
});  
jQuery('#btnInstruct_1').on('click',function(){  
  jQuery('input[name="data\\[1\\].input"]').val( "講習会講師料（日単位）" ); 
});  
jQuery('#btnDoc_1').on('click',function(){  
  jQuery('input[name="data\\[1\\].input"]').val( "ドキュメント作成費" ); 
});  
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『見積価格』

例：<button type="button" id="btnS_2">（15年キャリア）820,000</button>、 
<button type="button" id="btnA_2">（5年キャリア）452,000</button>、 
<button type="button" id="btnB_2">（5年未満）339,000</button> 

<script type="text/javascript"> 
jQuery('#btnS_2').on('click',function(){  
  jQuery('input[name="data\\[2\\].input"]').val( "820000" ); 
});  
jQuery('#btnA_2').on('click',function(){  
  jQuery('input[name="data\\[2\\].input"]').val( "452000" ); 
});  
jQuery('#btnB_2').on('click',function(){  
  jQuery('input[name="data\\[2\\].input"]').val( "339000" ); 
});  
jQuery('input[name="data\\[2\\].input"]').parent().parent().css("background-color","#FFC0CB"); 
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『欠勤理由』

例：<button type="button" id="btn1_5">レジャーや家庭の都合など：私用（プライベート）</button>、 
<button type="button" id="btn2_5">地域のイベントに参加する場合：私用（地域行事参加）</button>、 
<button type="button" id="btn3_5">朝起きて腹痛だった場合：体調不良（腹痛）</button>、 
<button type="button" id="btn4_5">子供発熱の場合：看病（子供）</button> 

<script type="text/javascript"> 
jQuery('#btn1_5').on('click',function(){  
  jQuery('input[name="data\\[5\\].input"]').val( "私用（プライベート）" ); 
});  
jQuery('#btn2_5').on('click',function(){  
  jQuery('input[name="data\\[5\\].input"]').val( "私用（地域行事参加）" ); 
});  
jQuery('#btn3_5').on('click',function(){  
  jQuery('input[name="data\\[5\\].input"]').val( "体調不良（腹痛）" ); 
});  
jQuery('#btn4_5').on('click',function(){  
  jQuery('input[name="data\\[5\\].input"]').val( "看病（子供）" ); 
});  
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『稟議概要』『予算区分』

頻出：<button type="button" id="btnExhibit_78">（予算内の展示会出展）</button>、 
<button type="button" id="btnProcurement_78">（想定外の備品調達）</button> 

<script type="text/javascript"> 
jQuery('#btnExhibit_78').on('click',function(){  
  jQuery('input[name="data\\[7\\].input"]').val( "Cloudエキスポ出展に関連する外注" ); 
  jQuery('input[name="data\\[8\\].selects"][value="1"]').prop('checked', true); 
});  
jQuery('#btnProcurement_78').on('click',function(){  
  jQuery('input[name="data\\[7\\].input"]').val( "故障に伴うパソコンの購入" ); 
  jQuery('input[name="data\\[8\\].selects"][value="3"]').prop('checked', true); 
});  
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『稟議理由』

<span style='color:#ff0000;'>※要点を押さえ、箇条書きで記入すること</span><br> 
文例：<button type="button" id="btnReasonA_9">（パソコンの故障）</button>、 
<button type="button" id="btnReasonB_9">（人員増に伴う急な追加）</button>、 

<script type="text/javascript"> 
jQuery('#btnReasonA_9').on('click',function(){  
  var myReason = ""; 
  myReason += "運搬中の落下(2015年12月)によりモニタ外部出力が破損している\n"; 
  myReason += "2013年1月の購入から3年以上が経ち最新OSの動作に支障がある\n"; 
  myReason += "D社は最安値とはなっていないが、他社の差額は小さく、使い慣れた従来シリーズ機とする"; 
  jQuery('textarea[name="data\\[9\\].input"]').val( myReason ); 
});  
jQuery('#btnReasonB_9').on('click',function(){  
  var myReason = ""; 
  myReason += "想定を超える注文を受け、対応アルバイトを30人増員する\n"; 
  myReason += "予備パソコンは20台しかなく、10台の追加が必要となった\n"; 
  myReason += "（D社は最安値かつ最短納期となっている）"; 
  jQuery('textarea[name="data\\[9\\].input"]').val( myReason ); 
});  
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『契約開始月』

<button type="button" id="btnThisMon_11">今月</button>、 
<button type="button" id="btnNextMon_11">来月</button> 

<script type="text/javascript"> 
jQuery('#btnThisMon_11').on('click',function(){  
  var myToday = new Date(); 
  var y = myToday.getFullYear(); 
  var m = myToday.getMonth() + 1; // Jan: 0 
  if (m < 10) { m = '0' + m; } 
  jQuery('input[name="data\\[11\\].input"]').val( y + "-" + m ); 
});  
jQuery('#btnNextMon_11').on('click',function(){  
  var myToday2 = new Date();
  myToday2.setDate(1);
  myToday2.setMonth(myToday2.getMonth() + 1); 
  var y2 = myToday2.getFullYear(); 
  var m2 = myToday2.getMonth() + 1; // Jan: 0 
  if (m2 < 10) { m2 = '0' + m2; } 
  jQuery('input[name="data\\[11\\].input"]').val( y2 + "-" + m2 ); 
});  
</script>

▼［入力ヒント］設定サンプル（HTML/JavaScript）：『契約終了月』

<button type="button" id="btnOneYear_12">→１年契約</button>、 
<button type="button" id="btnTwoYear_12">→２年契約</button> 

<script type="text/javascript"> 
jQuery('#btnOneYear_12').on('click',function(){  
  var myDateStr = jQuery('input[name="data\\[11\\].input"]').val();  
  var myStartMon = new Date( myDateStr + "-01"); 
  var myEndMon = new Date(); 
  myEndMon.setMonth( myStartMon.getMonth() + 11 ); 
  var y = myEndMon.getFullYear(); 
  var m = myEndMon.getMonth() + 1; // Jan: 0 
  if (m < 10) { m = '0' + m; } 
  jQuery('input[name="data\\[12\\].input"]').val( y + "-" + m ); 
});  
jQuery('#btnTwoYear_12').on('click',function(){  
  var myDateStr = jQuery('input[name="data\\[11\\].input"]').val();  
  var myStartMon = new Date( myDateStr + "-01"); 
  var myEndMon = new Date(); 
  myEndMon.setMonth( myStartMon.getMonth() + 23 ); 
  var y = myEndMon.getFullYear(); 
  var m = myEndMon.getMonth() + 1; // Jan: 0 
  if (m < 10) { m = '0' + m; } 
  jQuery('input[name="data\\[12\\].input"]').val( y + "-" + m ); 
});  
</script>

＜データ項目一覧画面＞