皆さん、ウェブアプリケーションの開発を想像すると、どんなイメージが浮かぶのでしょうか。規模や要件によって異なりますが、難しくてさまざまなスキルが必要で、かなりの費用がかかると感じる方も多いのではないでしょうか。
以下の図のように、Webアプリを開発するためには、さまざまなハードルがあります。
しかし、UiPath Platformを利用すれば、フロントエンドやバックエンドの知識も、DBサーバーやWebサーバーを用意する必要もありません。それにもかかわらず、簡単にウェブアプリケーションを開発し、デプロイすることが可能です。
本記事では、以下のウェブアプリケーションを開発します。
- コールセンターの従業員は特定の作業を開始する際に「開始」ボタンをクリックし、終了する際に「終了」ボタンをクリックすることで、作業の工数がデータベースに自動的に記録されます。
- コールセンターの管理者は従業員の工数記録をダウンロードし、分析することができます。これにより、個々の従業員や作業の実行状況、生産性の評価、効率改善の機会などを把握することが可能です。
イメージ図は以下の通りです。
-
従業員利用の時間計測
-
管理者利用のデータダウンロード及び閲覧
ウェブアプリケーションを通じて、コールセンターの作業工数を正確かつ効率的に記録し、管理者がデータを分析して生産性向上に役立てることができます。
利用製品
本記事では、UiPath Platformでの製品を利用して、ウェブアプリケーション開発やデプロイの方法を解説していきます。利用している製品及び役割は以下の通りです。
- UiPath Apps: ウェブアプリケーションの設計及び実行
- UiPath Dataservice: データの保存
- UiPath Studio: ワークフローの開発
- UiPath Assistant: プロセスの実行
- UiPath Orchestrator: プロセス及びAppsアプリのデプロイ
これらの製品はすべてクラウド上で利用できるため、ウェブアプリケーションの開発においては開発端末やホスティングサーバーの用意が不要です。
各製品の役割については、一般的なウェブアプリケーションの開発と比較して、以下に対比図を示します。
-
一般的なウェブアプリケーションの開発の場合
-
UiPath Platform製品を利用して開発の場合
UiPath DataServiceでエンティティの作成
各従業員の作業時間を保存するため、DataServiceで該当エンティティの定義が必要です。こちらで二つのエンティティを定義します。エンティティのスキーマは以下の通りです。
- エンティティ名：作業タイプマスタ(WorktypeMaster)
| 表示名 | 名前 | 型 | 必須 |
|---|---|---|---|
| 作業タイプ | Worktype | Text | はい |
このエンティティは、作業タイプ項目のマスターテーブルです。事前に追加する必要があります。例えば、購買登録、支払い処理、カスタマーサポート、請求書作成を追加してみてください。
- エンティティ名：作業時間(WorkingTimeRecords)
| 表示名 | 名前 | 型 | 必須 |
|---|---|---|---|
| 作業者 | Worker | Text | はい |
| 対象業務 | WorkType | Text | はい |
| 開始時刻 | StartTime | Date-Time | はい |
| 終了時刻 | EndTime | Date-Time | はい |
| 作業時間 | WorkTime | Number | はい |
UiPath DataServiceでエンティティの作成及びデータ追加は簡単です、不明な方は以下のドキュメントをご確認ください。
UiPath Appsを利用してアプリの開発(画面)
次に、アプリを使用して利用者向けの画面を作成します。利用者は、作業時間を登録する従業員と一括で作業時間を確認してダウンロードする管理者ですので、従業員と管理者向けの二つ画面を作成する必要があります。
最初に、新しいアプリを作成しますので、以下の手順で作ります。
手順：
- UiPath Appsへアクセスして、「新しいアプリを作成」ボタンをクリックします。
- 名前に「作業時間管理システム」を入力して、「作成」ボタンをクリックします。
- 次の画面で「空のページ」を選択します。
- 次のMainPageの編集画面で、「コントロール」→「表示」→「タブ」をドラッグして、右側のページにドロップします。属性を以下のように設定します。
- スタイル
- サイズの高さ：1000px
- フォントのサイズ：36px
- スタイル
- メインページに三つのタブがありますので、一つを消して、残りの二つのタブ名を以下のように修正してください。
- 作業工数登録
- 作業工数管理
- コントロールから二つのページを追加します。ページ名も以下のように修正してください。
- 作業工数登録
- 作業工数管理
- タブのページソースに、上記の二つページを追加します。
従業員向け画面の作成
次は、従業員向けの作業工数登録画面を作成します。作業工数登録のページを選択して、必要なコントロールを画面にドラッグアンドドロップをします。
手順：
- 「コントロール」→「入力」→「テキストボックス」をドラッグして、作業工数登録ページにドロップします。
- 「テキストボックス」の属性を以下のように変更します。
- 全般：
- ラベル：作業者
- 表示→無効化：true
- スタイル
- 「画面に合わせて伸縮」を選択
- ラベル配置：左
- ラベル幅：240px / 間隔：8px
- フォント：
- ラベルサイズ 36px
- 入力サイズ 36px
- 全般：
- 「コントロール」→「入力」→「ドロップダウン」をドラッグして、作業工数登録ページにドロップします。
- 「ドロップダウン」の属性を以下のようにに変更します。
- 全般：
- ラベル：作業タイプ
- 表示→無効化：true
- スタイル
- 「画面に合わせて伸縮」を選択
- ラベル配置：左
- ラベル幅：240px / 間隔：8px
- フォント：
- ラベルサイズ 36px
- 入力サイズ 36px
- 全般：
- 開始時刻と終了時刻を記録するので、上記作成した作業者の「テキストボックス」を二つ複製して、コントロールの順番を調整します。
- 次に、二つのボタンを追加します。テキストを「作業開始」と「作業終了」に変更します。属性を以下の通りで変更します。
- スタイル：「画面に合わせて伸縮」を選択
- フォントのサイズ：36px
- 「作業終了」ボタンの背景色：#df4300
- ここまでできた画面を確認しますので、右上の「プレビュー」ボタンをクリックして、以下のような画面が表示されます。以下のイメージになります。
管理者向け画面の作成
次は、管理者向けの作業工数管理画面を作成します。作業工数管理のページを選択して、必要なコントロールを画面にドラッグアンドドロップをします。
手順：
- 「コントロール」→「表示」→「ボタン」ドラッグして、作業工数管理ページにドロップします。
- 全員の作業記録を表示させるため、「表示」→「表」コントロールを追加します。
UiPath Appsを利用してアプリの開発(ロジック)
DataServiceでのエンティティの接続
UiPath Appsでは、DataServiceでのエンティティのデータを利用できるように、関連エンティティの追加が必要です。
手順：
- コントロールの右の▽ボタンをクリックして、「エンティティ」をクリックします。
- 次の「エンティティを追加」画面で、以下の二つエンティティを追加します。
- 作業タイプマスタ
- 作業時間
<参照画像>
従業員向け画面でのロジック作成
次は、従業員向け画面で動作できるように、ロジックを追加します。
選択した値のバインド
コントロールに入力や選択した値を変数にバインドします。
手順：
- 作業者のテキストボックスを選択して、右側の「全般」→「値のバインド」をクリックします。「リソース」→「ユーザー」の「メールアドレス」をドラッグアンドドロップします。
- 次に、作業者タイプのドロップダウンを選択して、右側の「全般」→「選択した値のバインド」をクリックします。
- 「リソース」→「アプリの変数」の「⁺」をクリックして、変数の「作業タイプ」を作成して、「選択した値のバインド」にドラッグアンドドロップします。
- 作業者タイプのドロップダウンの「リストのソース」をクリックして、エンティティの「作業タイプマスタ」を選定します。列が「作業タイプ」にします。
- 上記と同じように、開始時刻と終了時刻のテキストボックスにて、以下の変数を作って、値のバインドをします。
- 開始時刻
- 終了時刻
ボタンクリック時の動作
次は、ボタンがクリックされた際の動作ロジックを作成します。
手順：
- 作業開始のボタンを選択して、右側のイベントタブで、「ルールを作成」ボタンをクリックします。
- 以下の二つのルールを追加します。
- 値をリセット
- リセットする項目：「終了時刻」変数
- 値を設定
- 設定する項目：「開始時刻」変数
- 値：「今()」関数
- 値をリセット
- 作業終了ボタンも同様に、以下のルールを追加します。
- 値を設定
- 設定する項目：「終了時刻」変数
- 値：「今()」関数
- 値を設定
- 設定する項目：「作業時間」変数（※該当変数の作成が必要）
- 値：(終了時刻 - 開始時刻) / 1000
- エンティティレコードを作成/更新
- 以下の図のように、エンティティのリソースと値を設定します。
- 以下の図のように、エンティティのリソースと値を設定します。
- 値を設定
以上の設定が完了したら、「プレビュー」ボタンをクリックして、動作を確認してみてください。
管理者向け画面でのロジック作成
次に、管理者向け画面の動作ができるように、データソースの設定、及びプロセスの起動を説明します。
手順：
- 作業工数管理 ページをクリックして、データソースにエンティティの「作業時間」を選択します。
- 事前にOrchestratorにパブリッシュしたプロセスをAppsに追加します。（DataServiceのエンティティの追加と同様な方法）
- 作業レコードのダウンロード のボタンを選択して、イベントの「ルールを生成」をクリックします。次のルールの設定画面にて：
- 「プロセスを開始」をクリックして、パブリッシュしたプロセスをリソースとしてドラッグアンドドロップします。
- 入力の上書き
- 「in_mail = メールアドレス 」と設定
動作確認
ここまでで主な動作ロジックの作りが完了したので、再度プレビューをクリックして動作を確認します。
ここまでのサンプル実装で、主な動作ロジックができましたが、さらに使い勝手を向上させるために、以下の改善ポイントがありますので、ぜひご自身で取り込んでみてください。
- 「作業開始」と「作業終了」ボタンのお互いの有効化・無効化の制御
- 各ボタンの動作開始時および動作終了後のメッセージ表示など
最後に
この記事では、AppsやStudioを利用して、開発を解説しました。開発したアプリの権限設定や社内外のデプロイなどは、以下のオフィシャルページをご参照ください。