More than 3 years have passed since last update.

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

Last updated at 2020-12-28Posted at 2020-12-28

1. Appsとは

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秒)
（動画音声は英語ですが字幕 & 自動翻訳機能を使って日本語字幕を表示できます！）

2. 開発方法

新規Apps作成

UiPath Automation Cloud の画面左にある
[ Apps ]タブをクリック
画面右上にある[ Create new + ]をクリック＞任意のアプリ名を入力＞ [ Create ]をクリック
Appの開発準備完了！（デフォルトで[ コンテナーレイアウト ]というコンポーネントが配置されています。）

コンポーネントの配置

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

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

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

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

ページの追加

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

自動化プロセスとの連携

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