【UiPath Apps】 Autopilotを使ってワンプロンプトでデータ収集フォームとデータエンティティを作成する

<sub>※記事の内容は、個人の見解または確認結果であり、UiPath の公式見解ではありません。</sub>


UiPath Appsは、[直近の更新で様々な新機能が追加され、既存機能も改善されました](https://docs.uipath.com/ja/apps/automation-cloud/latest/release-notes/june-2023)。

その中でも、最近話題の生成AIを応用したAutopilot機能がリリースされました。この機能の使い方と、アプリ開発が楽になるユースケースをご紹介します。

業務アプリケーションの中で、業務担当者であるエンドユーザーが情報を入力する**フォームアプリケーション**が代表的な例として挙げられるでしょう。今回のデモでは、UiPath Apps Autopilotのフォーム自動生成機能を使ってフォームアプリケーションを作成する例で、その新機能によって**本来アプリ開発には必要な作業がどれほど省かれるか**を感じていただければと思います。

# 作成するもの

### UiPath Appsとは

一言でまとめると、**UiPathでローコードで開発できるWebアプリ**です。
特徴として、
 - マウス操作と最低限のキーボード入力で画面表示と操作を定義できます。
 - UiPath内及び外部サービスのデータへのアクセスができます。
 - UiPath Apps Studioという開発プラットフォーム(Web IDE)で開発できます。
 - UiPath組織内での公開、そして外部への公開ができます。

[Apps ユーザー ガイド - UiPathドキュメント](https://docs.uipath.com/ja/apps/automation-suite/2023.4/user-guide/introduction)より
<details><summary>抜粋</summary>

>UiPath Apps は、ユーザー エクスペリエンスに優れたエンタープライズ レベルのカスタム アプリケーションを構築・共有できる、**ローコード アプリケーション開発プラットフォームです**。UiPath Apps を使用すると、オートメーションの機能を活用してカスタム ビジネス アプリケーションをすばやく構築し、その基盤になるクラウドやオンプレミスのシステムのデータに接続できます。
>
>UiPath App Studio で構築するアプリでは、データへのアクセスや更新に対応する豊富なコントロールや、複雑なビジネス ニーズに対応する条件ロジックを使用できます。Apps の基盤となる UiPath RPA プラットフォームでは、高度なワークフローやビジネス ロジックの機能を使用できるため、エンド ツー エンドの業務プロセス全体を自動化できます。

</details>

### 作成するアプリ
今回は、フォームを自動生成するUiPath Apps Autopilot機能のデモを行うために、**従業員の詳細情報を収集するフォームアプリケーション**を作成します。
見た目は以下のような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/042fc23a-450c-78ad-7b4c-ccaed16e3a7e.png)


:::note
デモするために一般的な設計にしていますが、もちろんプロンプトを調整して生成される項目や詳細をカスタマイズできます。
:::

# 前提条件・準備
前提条件として、Apps・DataServiceが有効化されているテナントで、利用権限があるユーザーアカウントが必要になります。

有効化方法については[こちら](https://docs.uipath.com/ja/data-service/automation-cloud/latest/user-guide/enabling-the-data-service)をご参考いただければと思います。

# 作成手順

さて、作っていきましょう。

#### アプリを新規作成します。
※または、既存アプリを編集し、ページを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/d0186d97-979f-474f-e796-460b98b1af01.png)

#### プロンプトでページとエンティティを自動生成します。
アプリの新規作成の場合、1ページ目のテンプレートを選択するウィザードが表示されます。
既存アプリの編集の場合、ページを追加する際に同じ画面が表示されます。
`Autopilotを使用`セクションで、`エンティティを作成`にチェックを入れ、プロンプトを入力して`送信`ボタンをクリックすると、Autopilotがページを自動作成してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/91fa396d-592e-d1eb-ff0f-30e4f33a3a03.png)


今回のデモでは、以下のプロンプトを利用します。
>従業員の姓、名、姓のフリガナ、名のフリガナ、性別、年齢、生年月日、出身地、居住地、電話番号、メールアドレス、入社日、部署名、タイトルを収集する。ただし性別には「男性」「女性」「その他」が選べるとする。出身地と居住地は日本の47都道府県または「海外」を選べる。任意ファイルをアップロードするコントロールを追加し、公開するオプションを設定する。

:::note
デモするために一般的な設計にしていますが、もちろんプロンプトを調整して生成される項目や詳細をカスタマイズできます。
:::

`送信`ボタンをクリックすると、画面が変わります。生成が完了したら、エンティティが表示されます。
（表示される画像は次節にも掲載しています。）

#### Autopilotが作成してくれたものを確認しましょう。
##### エンティティ
- 適切な名称とデータ型が設定されています。

　生成完了後に最初にエンティティが表示されるので内容を確認してみましょう。最初のIdと最後の4つほどの`システム組み込みフィールド`以外は、プロンプトの中で指定された項目に対応したフィールドが設定されることが確認できます。
 　エンティティ名は *camelCase* 、フィールド名は *ProperCase* で、どちらも英語で命名されています。
  　また、それぞれのフィールドの型も適切に設定されています。例えば、Age（年齢）は`Number`型、BirthDate（生年月日）とJoiningDate（入社日）は`Date`型、PublishOption（公開オプション）は`Yes/No`型、それ以外は`Text`型になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/ef823c90-4440-8d7f-5f76-bbe8e7196e1c.png)


- 生成されたエンティティと`System Users`エンティティがアプリに追加されています。
:::note 
これを手動で作成しようとした場合、**エンティティの作成・フィールドのデータ型の選択・追加・フィールド名の指定**にどれほど作業量が必要か想像していただきたいと思います。
:::

##### コントロール・コンテナ 
  　さて、自動生成されたページを見てみましょう。プロンプト通りの情報を収集するフォームアプリが作成されているかと思います。


  - 適切な種類・命名
    追加されているコントロールとコンテナを確認すると、それぞれの種類と名称が適切に設定されていることが確認できます。例えば、Gender（性別）は`ドロップダウン`、BirthDate（生年月日）とJoiningDate（入社日）は`日付の選択`コントロールになっています。ほかに、`テキストボックス`も、適切に`数`や`Email`にしてくれています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/2458675b-e8b0-afa3-4254-3e79ec582a09.png)

:::note 
これを手動で作成しようとした場合、**コンテナの追加・コントロールの種類の選択・追加・ラベルの編集・コントロールの改名**にどれほど作業量があるか想像していただきたいと思います。
:::
- ボタンにはルール（アクション）は設定済み
  `送信`ボタンに対応する`field1`コントロールには、イナズマアイコンがついているのに気づいていただけたでしょうか。ボタンに紐づくルール（即ちアクション）が設定されているという意味です。コントロールを選択して、右側のプロパティパネルにて`イベント`タブに切り替え、`クリック時`配下の`ルールの編集`をクリックするとそのルールが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/78b2224c-dce5-719b-3026-895746d5860a.png)
設定されているのは、`CreateEntityRecord`のルールです。内容は、（ボタンがクリックされた際に）入力欄の内容からデータを取ってきてエンティティレコードを追加するものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/6f174f7b-e0b3-2f40-8fc6-b63b368f9540.png)

:::note
   これを手動で作成しようとした場合、**すべての項目に一つ一つ入力するのに**どれほど作業量があるか想像していただきたいと思います。
:::

 - ドロップダウンには選択肢が設定済み
    ドロップダウンコントロールを確認しましょう。プロパティパネルの`全般`タブの`リストのソース`からも確認できますが、もっと直観的に確認するには、アプリをプレビュー実行しましょう。その前に、開始ページが未設定の場合は、必ずページの`・・・`メニューにクリックし、「開始ページとして設定」を選ぶことで設定しましょう。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/349cf919-bc86-c0a2-e0bd-e305d1ce6c43.png)

:::note warn
開始ページが未設定の場合、アプリのプレビュー・実行ができないことがあります。
:::

プレビュー実行時のドロップダウンが以下のようになっていますでしょうか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/a706cd38-894a-e809-9498-d9306c134895.png)
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/f814e5ea-aab9-3e4f-3e1d-c20540041a1a.png)
    
:::note
   これを手動で作成しようとした場合、・・・どれほど作業量があるか想像していただきたいと思います。
:::

#### 仕上げ
以上の手順で、Autopilotの能力を十分確認していただけたかと思います。しかしデモアプリとしては中途半端なところになっているので、アプリとして完成となるまでの手順を案内します。実施は任意です。
 - 外観
Autopilotによって作成されたものは、一般的には完成品というより枠組みになります。必要・好みに応じて、外観やレイアウト（配置・書式など）を変更する場合は簡単にできます。（もちろんこだわりがなければ不要ですが）
 - アップロードボタン
生成されたアプリでは、選択される添付ファイルがエンティティのフィールドデータとして登録されますが、そこからファイルの中身を確認することが難しいです。ファイルをストレージバケットにアップロードするボタンを追加ことで、添付ファイルをストレージバケットから確認することができます。
<details><Summary>実装手順の一例を示します。</summary>

  - テナント・フォルダにストレージバケットを作成します。
    
  - 作成したストレージバケットをアプリに追加します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/528855ba-7de0-0193-b88a-36c7d53b1033.png)

  - `送信`ボタンの`クリック時`のルールを編集します。
  - 一番下に、新規ルールとして`UploadFileToStorageBucket`を追加します。
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/852cced2-1ad0-c22e-3517-9c9c67145c47.png)

  - `アップロードするファイル`にコントロールの`Value`フィールドを指定し、`ストレージバケット`にアプリに追加されているストレージバケットを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/c01ea074-c4f1-1b47-cde7-72e38ad0cd1f.png)

極に簡単な実装ですが、これで`送信`ボタンがクリックされた際、エンティティレコードの追加が終わった後に、`ファイルアップローダー`に参照されているファイルがストレージバケットにアップロードされます。

別の実装方法として、`送信`ボタンとは別で、`アップロード`ボタンを設置し、それに上記と同様に`UploadFileToStorageBucket`ルールを追加する、といった設計も考えられます。

</details>


 - 公開オプション
 デモ目的で設定したのですが、特に決まったデザインがないので、ご自身でデザインした仕様に沿って実装していただいて構いません。

# 使ってみます。
プレビュー実行で、またはパブリッシュして[フォルダーにデプロイし](https://docs.uipath.com/ja/orchestrator/automation-cloud/latest/user-guide/managing-apps#deploying-apps)実行することで、動作確認ができます。

各項目に情報を入力し`送信`ボタンをクリックすることで、情報が登録されます。
登録されたものは、Automation Cloud > Data Service > 該当エンティティ > データ で[確認できます](https://docs.uipath.com/ja/data-service/automation-cloud/latest/user-guide/managing-the-data-for-an-entity)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3843343/3bc93aaa-0f6d-8c8e-2a56-93ff46f8ef6e.png)

# 終わりに

以上、プロンプトからAppsを自動生成性するAutopilot機能を検証するためのアプリ作成手順をご紹介させていただきました。

#### めんどくさいことをやってくれるのは自動化の頼りどころ
アプリ開発の経験のある方ならわかるかと思いますが、最初にアウトライン（枠組み）を作成するのは、技術的な難易度が高くないものの、ゼロから始めると意外と時間がかかってしまうのは、アプリ開発のあるあるですね。

特に項目が多いフォームの場合、エンティティの作成・フィールドの命名・データ型の設定から、ページ上にコントロールを追加・命名・コンテナでグルーピングする・・・などなどあって、地味に退屈な作業が多いですね。

そんな本質的でもないところに時間を費やしてしまうのがもったいないのに、一番最初にやらないと本質的なところまでたどりつかないのは、市民開発者のアプリ開発のハードルの一つです。

そういうのをプロンプト1本で、Autopilotが全部やってくれるのは、非常にありがたさを感じるものでした。

やはり自動化に期待されるのは、全部やってくれることというより、めんどくさいところだけやってくれるところですね。（逆に勝手に全部やろうとしてくるのは不安になりますよね）

#### Autopilotのほかのユースケースを一緒に発見しましょう
本記事のデモ例ではAutopilotの「データ収集ページ」の自動生成の動作を確認しました。
Autopilotは、それだけではなくほかのこともできるので、「こんなこともできるよ！」など有用な機能を発見されたら共有してください！一緒に見つけていきましょう。