ワークフローサンプル: 第562話：経費精算クラウドを使わない理由(4)

業務：経費の申請と精算

クラウド型ワークフローで「経費申請フロー」のシステム化を実現した！（第559話参照）
多角的な「グルーピング」（クラスタリング分析）の仕組みも導入した！（第560話参照）
経費サマリーが Spreadsheet にリアルタイム追記される仕組みも導入した！（第561話参照）

今では、部長や社長は、暇さえあれば「最新の経費リスト」を眺めているらしい。スマホでも見やすい Google Sheets （Google スプレッドシート）は、管理職者たちを「24時間営業化」させてしまったのかも知れない？？

課題：意外と気づかない日付ミス

しかし「解決すべき課題」は、次々と現れる。。。

経費申請に慣れはじめた３か月目くらいから「入力ミス」が目立つようになってきた。過去データの再利用で申請するケースが多くなってきたからだろうか、特に「日付のミス」が目立つ。

課長が確認し、部長が確認し、経理が確認したハズなのに、、、ナンデ日付がズレているんだ？？（by 社長）

たしかに『立て替えた日』は非常に重要なデータ項目だ。月次試算表の集計月を決定するデータにもなる。とはいえ課長や部長にしてみれば、他にも沢山のチェック項目があるのだ。。。もし「2017-11-20」が「2016-11-20」になっていても、その間違いに気づかず「承認」してしまう。

一方で社長が眺め見る「経費リスト」はダイジェスト・サマリーだ。「６項目」しかない。だから、日付がズレていたらかなり目立つ。。。（困った！）

A. 立て替えた日
B. 計上月(YYYY-MM)
C. 勘定費目分類
D. 精算金額
E. 立替人所属組織
F. 稟議書ID

[経費精算フロー-入力チェック]

解決：JavaScript で忠告文

この申請フォームの『立て替えた日』の欄には「再利用時は入力ミスに注意」という注記があります。

そしてこの注記は、もし30日より前の過去データが入力されていた場合には「"2017-01-01" は 318 日前の日付です！入力ミスに注意して下さい。」のような赤文字の忠告表示に切り替わる仕組みになっています。申請者は『立て替えた日』に古い日付が入っていると、「日ごろと違う様子」に気づくことになります。

このような JavaScript による動的な注記メッセージは、数が多くなると「ユーザへのアピール度」が薄れてしまいます。また「ブラウザへの負荷」も気になってきます。メッセージ設定すべき量は業務によって異なってきますが、もし実運用において「入力ミス」が多発するようなら、その解決のための JavaScript メッセージは効果的だと言えます。

※＜日付入力フォームのデコレーション設定サンプル（HTML/JavaScript）＞は末尾

なお、このワークフローでは、申請・承認・決裁それぞれの画面で「ダイジェスト・サマリー」へのリンクもガイドパネル表示されています。社長らが閲覧する Spreadsheet を意識しながら、申請・承認・決裁を行う事も可能となっています。

＜ガイドパネルでのデコレーション設定サンプル（HTML/JavaScript）＞

<iframe height='240' width='98%' frameborder='0' src='https://docs.google.com/spreadsheets/d/e/2PACX-1vTEO5O4QLHaQQVB9z8w9xNrJocGTH07ReXQJhXTVA3YdDxdKCkVQID0if0fvvv_29iPe4otUo8mOJ5s/pubhtml?gid=0&single=true'></iframe>
<br/>
<a href="https://docs.google.com/spreadsheets/d/18hRh-L9ZjX5Giv50HkeUKNVkyugSW7FyfTh1Kkmc4Tk/edit#gid=0">ダイジェスト・サマリー（Google Spreadsheet）</a>

考察：JavaScript デコレーションの限界

JavaScript / jQuery を使った入力画面のデコレーションには、様々な制約があります。

クラウド型ワークフロー『Questetra BPM Suite』の場合、製品そのものが jQuery を多用しているため、全ての jQuery イベントを正確に取得できるわけではありません。特に「日付型フォーム」や「検索セレクト」などの複雑な構造となっている入力フォームの jQuery イベントも非常に複雑です。将来の仕様変更に完全対応することも容易ではありません。

この例では、比較的シンプルな構造となっているテキストフォーム「Title」の change イベントをトリガーにして『立て替えた日』をチェックしています。

▼日付入力フォームのデコレーション設定サンプル（HTML/JavaScript）

<span id='my5deco'><span style='color:#0000FF;'>再利用時は入力ミスに注意</span></span>
<script type="text/javascript">
jQuery("input[name='title']").on('change', function(){
  var formStr = jQuery("input[name='data\\[0\\].input']").val();
  if( formStr !== "" ){
    var formDate = new Date( formStr );
    var myToday  = new Date();
    var myDiff   = Math.ceil( ( myToday.getTime() - formDate.getTime() ) / 86400000);
    var myMsg = "";
    if( myDiff >= 30){
      myMsg = "<span style='color:#FF0000;'>\"";
      myMsg += formDate.toISOString().slice(0,10);
      myMsg += "\" は ";
      myMsg += myDiff;
      myMsg += " 日前の日付です！入力ミスに注意して下さい。";
      myMsg += "</span>";
      jQuery('#my5deco').html( myMsg );
    }else if( myDiff < 0){
      myMsg = "<span style='color:#FF0000;'>\"";
      myMsg += formDate.toISOString().slice(0,10);
      myMsg += "\" は、未来日付です！入力ミスに注意して下さい。";
      myMsg += "</span>";
      jQuery('#my5deco').html( myMsg );
    }
  }
});
</script>

＜経費精算フロー-入力チェック：「1.申請する」画面＞