Action Center(フォームとタスク)

action-center

こんにちは、UiPath株式会社の大下です。

今回は、Action Center(タスクとフォーム、参考: https://www.uipath.com/ja/product/rpa-management-apps)を活用し、簡単にロボットの作業と人間の作業を連携させるワークフロー(Human in The Loop)を作成していきます。 Action Centerによってロボットと人間の”協働”が容易に可能となり、自動化できるビジネス領域が格段に広がります。

Action Centerのサービス概要

Action Centerはジョブの実行中に人間を介在させるためジョブを中断したり再開したりする仕組みを作る機能群です。タスクとフォームの二つの機能によって構成させています。

action-center1

実際にAction Centerを活用したロボット、データの流れは以下のイメージです。

Unattendedロボットでワークフロー実行しオーケストレーター上で人間が介在作業します。

 

action-center2

事前環境準備

Studio及びOrchestrator

  • Studio:19.10以上

  • Orchestrator:19.10以上

以下のアクティビティパッケージと該当するバージョンをインストールしてください。

  • UiPath.Form.Activities

  • UiPath.Form.ActivityLibrary

  • UiPath.Persistence.Activities 

ワークフローシナリオ(OCR業務)

それではAction Centerを使って実施にワークフローを作成していきます。今回はロボット作業とロボット作業の間に人間が介在するケースが多いOCR×RPAの業務を例に作成します。例えば請求書データをOCRし、人間がデータチェック・追加、最後に基幹システム登録というシナリオです。

action-center3

フォームタスクを作成アクテビティ

  • まずはオーケストレーションプロセステンプレートを利用して新規プロジェクトを作成します。

action-center4
  • フォームタスクを作成アクティビティを使用します。

action-center5
  • 次にフォームタスクを作成アクティビティ内の必要パラメータを入力します。

タスクタイトル:後に作成されるオーケストレーター上のタスクとして表示されるタイトル名です。

action-center6

フォームデータ:フォームで使用する引数です。

今回はOCR業務ということで、請求書イメージデータ、合計金額、支払期限、勘定科目コードの4つを設定します。

action-center7
  • 次にフォームデザイナーでフォームのレイアウトをします。

完成するとこのようなフォームが作成できます。左側のペインに請求書元画像、左側にOCR読みとり結果を表示できます。

action-center8

まず、フォームタスクを作成アクティビティ内のフォームデザイナーを開くをクリックします。

action-center9

先ほど設定した引数をラベルタイトルにすでにテキストフィールドとして表示されています。

action-center10

任意の場所にドラッグ&ドロップでフォームデザインが簡単にできます。

まず、TotalAmount, DueDate, AccountCodをフォーム上部に動かします。

action-center11

次にラベルタイトルをわかりやすく変更します。カーソルをフィールドに合わせ、Editボタンをクリックします。

action-center12

ラベルの箇所のテキストがフォームに表示されるタイトルになりますので、わかりやすい表示名に変更します。

action-center13
  • 次に出力引数(フォーム上から返却されるデータ)として設定したout_AccountCode(勘定科目コード)はテキストフィールドで人間が手入力できるようにします。

action-center14

最後に請求書のイメージデータをフォーム画面上にイメージとして表示させます。

フォームに表示する画像イメージはBase64エンコードした文字列をHTMLへ渡します。

後のHTMLとして表示するための文字列を以下のように作成します。

imgSrcText  = "data:image/png;base64," + img.Base64

イメージを表示させるには詳細設定→HTML要素を使います。

action-center15

 バインド設定で先ほどの文字列を設定し、

action-center16

HTMLの<img>タグ内に{{ data.imgSrc}}として設定します。

また、「更新時に更新」にチェックを入れます。

action-center17

参考までにテキストインプット以外にもドロップダウン、チェックボックス、ラジオボタンなどいろいろとデザインツールがフォームデザイナーには備わっています。

action-center18

FormTaskData型の変数をタスクフォームを作成アクティビティのタスクオブジェクト(出力)プロパティにセットします。

action-center19

そして同じ変数をフォームタスク完了まで待機し再開アクティビティのタスクオブジェクト(入力)プロパティにセットします。

action-center20

これにより、ジョブがフォームタスク完了まで待機し再開アクティビティのステップにまで達すると、ジョブはとなり一時停止となり、ロボットはジョブが実行されているセッションからログアウトします。

action-center21

タスク

それではオーケストレーター上に作成されたタスクを見てみましょう。オーケストレーターログイン後、タスクメニューへ遷移すると、

action-center22

新しくタスクが「未割り当て」の状態で作成されています。

action-center23

オーケストレーター上でのタスクのアサイン

各タスクの操作パネルで、どの担当者(オーケストレーターログイン)へこのタスクをアサインするかを選択できます。

action-center24
action-center25

割り当てられたタスクに紐づけられたフォームを開き、ここで人間の目でのデータチェック、追加データを入力などの作業を行います。

action-center26

フォームの「送信」ボタンを押すとタスクが完了となります。

後続ロボット作業の実行

フォームタスク完了まで待機し再開アクティビティにより、一時停止されていたジョブはタスクが完了すると再開されます。またジョブ一時停止中はUnattendedロボットは別のジョブの実行に利用することができます。

action-center27

Studioでジョブを再開する場合は再開ボタンをクリックしてください

action-center28

この際、先ほどフォーム画面上で追加したデータや、修正したデータなどはフォームデータに設定した出力変数に格納されます。

action-center29

今回はAction Centerの動作・仕様がわかりやすいようにStudio/Attended実行でご説明しましたが、Action Centerとしての公式サポートはUnattendedロボットによる実行となります。

(参考)サンプルワークフロー

上記で作成したAction Centerサンプルワークフローです。

オーケストレーションプロセス.zip

ぜひみなさまもAction Centerで単一のプロセスだけでなくビジネスプロセス全体まで自動化領域を広げていただきたいと思います。

 

Avatar Placeholder Big
Kaoru Oshita

Principal Sales Engineer, UiPath