UiPath Apps 開発の仕方 基本操作編

## 1. Appsとは

![71ca2a6-845aa5f-Apps_Samples.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/ee947950-4381-d8c2-8302-3cbddadca95b.png)

UiPath Appsは **クラウドベースのローコードアプリケーション開発プラットフォーム** です。
UiPath Robotの自動化プロセスと連携することで、あらゆるシステムやデータに接続するカスタムアプリを短期で構築することができます。またここがAppsの真骨頂なのですがAppsはUiPath Robotが実行する自動化プロセスと連携し入出力引数データの受け渡しすることができます。つまり **任意の自動化プロセスの「入力値データの指定」、「出力データのの描画」をブラウザー上で実行できるアプリにひとまとめ出来る** という事です！ 

さらにAppsの開発環境「UiPath App Studio」もクラウドベースであるため **PCには何もインストールすることなくアプリを開発できます** 。また開発したアプリもブラウザから実行されるため、PCはもちろん **モバイルからも実行** することができます。

Appsを利用することで一番メリットを享受できるようなケースは以下のような業務です

- 複数のアプリをアドホックに駆使して遂行するような業務（コンタクトセンター業務 等）
- 在宅勤務推奨の中、外部から社内環境にアクセスするすべがないため、社員に通勤を強いている社内環境システム周りの業務

上記のような業務を支援するUiPathの自動化プロセスを開発し、
**Appsを利用することで、業務担当者がどこにいてもインターネットさえつながっていれば**
**人間とのRobotのインタラクティブなデータのやり取りを介して効率的な業務を遂行することができるようになります！**

下記の動画はUiPath Appsのコンセプトムービーです！
[【YouTube】UiPath Apps: Build delightful low-code automation-powered apps (2分11秒)](https://youtu.be/y5rBwKXTDaM)
（動画音声は英語ですが字幕 & 自動翻訳機能を使って日本語字幕を表示できます！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/3b89398a-34e3-8664-146c-b36857f75950.png)

## 2. 開発方法

### 新規Apps作成

0. [UiPath Automation Cloud](https://cloud.uipath.com/) の画面左にある
[ Apps ]タブをクリック
![1144441-apps-home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/99bc6edd-fe48-df0b-d1cf-efd8c110c4af.png)

0. 画面右上にある[ Create new + ]をクリック ＞ 任意のアプリ名を入力 ＞ [ Create ]をクリック
![0cf74d3-create-new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/6ab3a1ab-3fc0-8a7c-baf7-52de3fb8c8d4.png)

0. Appの開発準備完了！（デフォルトで[ コンテナーレイアウト ]というコンポーネントが配置されています。）
![bc7096f-container-layout.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/3796d5a3-c9d4-3726-a69e-d785c1c7428d.png)


### コンポーネントの配置

任意のコンポーネントをドラックアンドドロップで画面中央のデザイナーパネルに配置してゆくことでアプリのUIを開発することができます。

また画面左にみえるエレメントツリーパネルはデザイナーパネル上の各コンポーネントのツリー構造を表現しております。
（下記の参考gifの場合だとMain PageというページのLayout>Containerというコンポーネントの中にボタンを配置しています。）

![d4909e6-add-control.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/a0b44020-a3e4-b468-7a98-55ec52519d86.gif)

### コンポーネントのスタイルの変更

もちろん配置したコンポーネントのスタイルも変更することができますよ！
スタイルを変更したいコンポーネントをデザイナーパネル上でクリックした後に、
画面右のプロパティパネル内のStyleをクリックすると各種スタイル設定を行う事ができます。

![b512931-Button_Style_Change_Latest.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/d0d8e4b7-44cd-6257-71fa-211bd9d4865e.gif)

### ページの追加

UiPath Appsでは一つのアプリに複数のページを設けることも可能です。
エレメントツリーパネル上部の+ボタンからPageを選択する事で新しいページを追加することができます！

![720293d-add-page.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/1a437b42-62f9-b1de-5416-270453355ab9.gif)

### 自動化プロセスとの連携

さてAppsの真骨頂の自動化プロセスとの連携方法です！
以下の手順で選択された自動化プロセスは、「Apps上でのユーザーからの任意の操作をトリガーに実行する時の選択候補」として後から利用することができるようになります。
（前提としてAppsと連携したい自動化プロセスは任意のUiPath Orchestrator上でデプロイされている必要があります）

0. キャンバスの左側にあるエレメントツリーパネル上部の[ + ]をクリック
0. [ Process ]を選択
0. アカウント内でアクセスできるOrchestratorテナントを選択
0. プロセスを公開したフォルダを選択
0. アプリに含めるプロセスを選択
0. [ Select ]をクリックします。

![ad6d76c-add-process.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/0e92df73-a4fc-69c9-5748-de6305a1bd14.gif)


さて「自動化プロセスとの連携（前準備）」で連携可能になったプロセスの入出力引数と、Apps上のコンポーネントを連携してみましょう！

0. 引数を連携したいコンポーネントをクリック
1. [ 値バインド ]から任意のプロセス、引数を選択（引数が選択肢に出現しない場合は、一度Robot側で該当プロセスを実行してみてください。）

![1649088-value-binding.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/f42ae813-b6fb-fe90-de8a-eb9d826748ef.gif)

どのタイミングでどの自動化プロセスを実行させるのかを定義しましょう。

0. イベントを実行するトリガーとしたいコンポーネントをクリック
0. プロパティの［イベント］タブをクリック
0. カスタマイズするイベントを選択、［ Create Rule ］をクリック
0. 利用可能なリストからルールを選択
0. そのほか詳細な設定を行う（今回の記事からは割愛。）

![066251a-events.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/8d1f0f8d-0fb3-af89-8e7b-0bb1e2fe442d.gif)

### プレビューとパブリッシュ

画面右上のプレビューボタンをクリックすると開発中のアプリの実行時の挙動を確認することができます。
問題なければ開発画面のパブリッシュボタンをクリックしてアプリを公開しましょう！（アプリを利用可能なユーザーは、Appsが作成されたUiPath Automation Cloud内のユーザーのみです。）

![21b767e-preview.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984349/b26dfd5c-c2b9-fd94-eea4-2f753856cb85.gif)


### チュートリアル

今回は基本編という事で基本的な操作の紹介のみをしました！
細かい開発方法に関しては動画の方がわかりやすいですので今回割愛させていただきます！
近日自分でも使い方動画を作ってみようと思っておりますが、
YouTubeに英語版の簡単なチュートリアルがあるので参考にしてみてください！

[UiPath Apps Tutorial (Public Preview) - Building your first app (6分36秒)](https://youtu.be/i_H3Bv4QkDk)
（動画音声は英語ですが字幕 & 自動翻訳機能を使って日本語字幕を表示できます！）