ワークフローサンプル: 第489話：作業時間を自動計測するボタンを配置する

ストップウォッチを使って、翻訳作業の時間を計測してるんデス！

素晴らしい！。素晴らしスギル！！。しかも「秒単位」で記録するだなんて。。。しかも「離席時間」や「中断時間」はストップウォッチを一時停止させるだなんて。。。うんうん。「正確な業務実態の記録」は業務改善に欠かせない！

そんな貴方の為に、入力画面の中に「Startボタン」「Stopボタン」「Clearボタン」が表示される設定を提案したい。この設定があれば、リアルなストップウォッチ（スマートフォン？）が無くても、簡単に時間計測できるようになる。

何と言っても、いままで手入力していた「作業時間」（文字列型／hh:mm:ss）のフォーム上で動作する点が秀逸だ。すなわち、計測結果を転記する手間すら必要ない。

[翻訳フロー]

[翻訳フロー：「2.翻訳作業」画面]

このワークフロー定義では、翻訳結果を入力する画面において『ストップウォッチ・ボタン』が表示されるようになっている。画面を見れば直観的に分かるため、もはや説明する必要もない。

ただ注意すべきは、この様な「ちょっとした業務効率のカイゼン」には、どうしても HTML/JavaScript の知識が必要になる点だ。たとえばクラウド型ワークフロー『Questetra BPM Suite』でこれらのボタンを表示させる場合、［データ項目］を設定する画面に40行程の HTML/JavaScript を書く必要がある。（文字列型フォームの説明部分：入力のヒント部分）

＜参考マニュアル＞
M213 入力画面: 処理フォーム画面に “入力ヒント” が表示されるように設定する（HTML/JavaScript）

しかし、Excel で関数を使いこなせると「できる事」が一気に増えるのと同様、もし HTML/JavaScript が使いこなせれば「カイゼンの幅」が一気に増えるだろう。業務プロセスの改善担当者は、入力画面をよりリッチにするためのスキルとして HTML/JavaScript の知識を持つべきかもしれない。

ちなみに、ここで使われている HTML/JavaScript においては、Webデザイナに絶大な人気を誇る「jQueryライブラリ」が利用されている。短いコードで様々な表現ができるライブラリだ。２・３時間の研修を受けるだけでも、様々な便利ボタンを設置できるようにあるだろう。

▼『ストップウォッチ』の設定サンプル（HTML/JavaScript）

<button type="button" id="myStart">Start</button> 
<button type="button" id="myStop">Stop</button> 
<button type="button" id="myClear">Clear</button> 
<script type="text/javascript">
var myInterval = null;
jQuery('#myStart').on('click',function(){
  if (myInterval == null) {
    myInterval = setInterval("countUp()", 1000 );
  }
});

jQuery('#myStop').on('click',function(){
  clearInterval( myInterval );
  myInterval = null;
});

jQuery('#myClear').on('click',function(){
  clearInterval( myInterval );
  myInterval = null;
  jQuery('input[name="data\\[9\\].input"]').val( "00:00:00" );
  // 100 hrs, also 0 reset
});

function countUp(){
  if(jQuery('input[name="data\\[9\\].input"]').length == 0){
    clearInterval( myInterval );
    myInterval = null;
  } else {
    var timerStr = jQuery('input[name="data\\[9\\].input"]').val();
    // "01:23:45"

    var myRegex = /^[0-9][0-9]:[0-9][0-9]:[0-9][0-9]$/;
    if( myRegex.test( timerStr ) == false){ timerStr = "00:00:00"; }
    // 100hrs, also reset

    var mySec = timerStr.substring(6, 8) - 0; // JavaScript number
    var myMin = timerStr.substring(3, 5) - 0;
    var myHour = timerStr.substring(0, 2) - 0;

    mySec += 1;
    if(mySec > 59){ mySec = 0; myMin += 1; }
    if(myMin > 59){ myMin = 0; myHour += 1; }

    if(mySec > 9){ secStr = mySec; }
    else { secStr = '0' + mySec; }
    if(myMin > 9){ minStr = myMin; }
    else { minStr = '0' + myMin; }
    if(myHour > 9){ hourStr = myHour; }
    else { hourStr = '0' + myHour; }

    jQuery('input[name="data\\[9\\].input"]').val( hourStr + ":" + minStr + ":" + secStr );
  }
}

</script>

▼『文字数カウンタ』の設定サンプル（HTML/JavaScript）

<script type="text/javascript">
jQuery('textarea[name="data[0].input"]').bind('keyup change',function(){
  var myTextLength = jQuery(this).val().length;
  jQuery('input[name="data\\[8\\].input"]').val( myTextLength );
});
</script>

＜データ項目一覧画面＞