【UiPath】UiPathAppsを使ってみた！

# はじめに
本記事は、UiPath Appsのはじめの一歩的な使い方を説明したものになります。
UiPath Advent Calendar 18日目の記事です。

https://qiita.com/advent-calendar/2022/uipath

# UiPath Appsとは
UiPath Appsとは、一言でいうとローコード アプリケーション開発プラットフォームになります。
Apps内では、UiPathで作成したロボットを呼び出したり、コネクタを利用してAPIを実行したりすることが出来ます。

# UiPath Appsの利用方法
UiPath Appsの利用方法は以下のとおりです。
１．Automation Cloudにアクセスし、Appsを押下します。
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/a28821b4-0288-4e9c-cc12-b5f99c97eb75.png">
２．Apps上で、「新しいアプリを作成」を押下します。
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/b3a2ec23-7058-a751-c137-75c5fc721795.png">
３．作成するアプリの名前を入力し、「作成」を押下します。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/d3f4d2ab-d150-aa87-f7a9-260ca818eeaf.png">
４．テンプレートを利用する場合はここでテンプレートを選択します。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/90addd3a-d3d3-e6bc-061a-eb5250c63e93.png">
５. Appsの画面が起動します。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/a22ba0e4-e3d3-b0af-003f-22868ea06751.png">

## 今回作るアプリの説明
今回作るアプリは簡単なアラートを表示するアプリです。
テキストボックスには、必須入力チェック及び文字数チェックの処理を入れます。
１．テキストボックスにテキストを入力
２．「実行」を押下すると、テキストボックスに入力されたアラートが表示される

## UiPath Appsでのプロジェクトの作り方
プロジェクトの作り方に関しては、前段の「UiPath Appsの利用方法」をご確認下さい。
今回はテンプレート等は使用せず、空の状態から作ってみます。

## コントロール配置（テキストボックス）
１. 「コントロール」を押下。もしない場合は、「▼」押下でコントロールボタンが出てきます。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/25e2f639-a651-d373-8a7f-b1d5a4cae9a7.png">
２. 入力の中から、「テキストボックス」をページ上にドラック＆ドロップします。
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/6c2dc4db-ab94-3c27-1dec-41bd84c68049.png">
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/0bda1abe-8426-8007-2a3c-5a492cec6cd7.png">

## コントロール全般設定（テキストボックス）
テキストボックスに対して設定を行います。
ラベル：ここにテキストを入力
必須：true
最大長：20
カスタムエラーメッセージ：=(IF(空白(Text)),"必須項目です。","20文字以内で入力して下さい")
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/95669570-f5ca-45e1-0692-df1fcbe7f317.png">

:::note info
* 関数や値のバインドを行う際は、「=」を入力後に表示されるリソースウィンドウから必要なものをクリックして追加して下さい。（直接入力とかは出来ないみたいです（2022/12/18現在））
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/dce90bf1-b196-bff3-0bca-d19e3a581dd2.png">

* 必須：true及び、最小最大長を指定した場合、カスタムエラーメッセージに関数を設定せずとも、エラーを自動に表示することは出来ます。但し、英語の文言となってしまっている為、今回はカスタムエラーメッセージを記載しています。
※この部分は別途、日本語化出来ないか調べてみたいと思っています。
:::

## コントロール配置（ボタン）
ボタンもコントロール配置（テキストボックス）と同じく、ドラック＆ドロップで配置することが出来ます。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/d783cd5b-5d8e-291f-47ea-414dfa32e4bb.png">

## コントロール全般設定（ボタン）
ボタンに対しても、設定を行うことが出来ます。
テキストボックスにバリデーションが働いている間は、
ボタンを押下させないように非活性の設定を行いたいと思います。

無効化の部分に「=」を入力して、リソースからテキストボックス＞有効かどうかを設定します。
有効の場合、Trueとなってボタンが非活性になってしまうので、手前に「！」を入力しています。
<img width="90%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/6b4ae6f2-eead-6620-7ebb-4ca07a75d0d4.png">

## コントロールイベント（ボタン）
ボタンに対してイベントを設定します。
今回は、アラートを表示させたいので、その部分を設定します。

１. イベントのルールを作成を押下します。
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/3934fac7-d818-677e-ff04-6a08939d9580.png">
２. ルールの設定画面で、「メッセージを表示」を押下します。
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/f1942ddc-f07a-1de6-1b0f-56f9aae6d54c.png">

:::note info
 「メッセージを表示」の他にも、ロボットを呼び出したり、コネクタを使ってAPIを呼び出すことも出来ます。
:::

３. 追加されたルールの設定を行います。
タイトル：メッセージタイトル
メッセージ：=を入力して、リソースからText.値を選択します。
種類：情報
位置：上
指定秒後に自動解除：5
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/1b6f2b08-0edb-d3a1-cccc-abd1fdebfadc.png">
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/205716e8-4661-fc39-0245-51e70f00e367.png">

## 実行してみた
「プレビュー」を押下して画面を表示してみます。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/3328d934-2dc3-7f33-2265-944203edb07b.png">

無事にテキストボックスに入力した文字のアラートが表示されました。
<img width="100%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/45811603-071b-1380-2009-0fc1ec9b1ae5.png">

未入力時のメッセージ
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/5b8577a1-2af8-9dd2-7e9b-2fe789e3e744.png">

21文字以上の場合のエラー
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/7733a626-c251-00f2-8ab9-87eb720c24c7.png">

:::note info
プレビューで確認が完了したあとは、パブリッシュを行って利用可能な状態にして下さい。
<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638718/3f0d24e2-8480-af77-0e10-9b1249480adb.png">
:::

# まとめ
今回はUiPath Appsにて簡単な画面を作ってみました。
プレビューの機能等もあり、まだまだこれからなイメージですが、
最低限のことは出来ると言った印象でした。
個人的には、使う前は公式のドキュメント周りを一読したほうがいいと思いました。
関数等の説明も日本語でしっかり載っているので、わかりやすいと思います。
今度は、実際にロボットのプロセスを呼び出したり、コネクタを使ってAPIを実行してみたりしたいと思います。

# 参考サイト
https://docs.uipath.com/apps/lang-ja