Power Automate UI フローのセットアップ

米国時間2019年11月4日からフロリダ州オーランドで開催された「[Microsoft Ignite 2019](https://www.microsoft.com/en-us/ignite)」にて、[iPaaS](https://qiita.com/tags/ipaas)の一種である「Microsoft Flow」が「Power Automate」と名前を変え、その機能カバー範囲が拡張され、新たにRPAの分野もカバーするようになりました。つまり、**デスクトップアプリケーションとWebアプリケーションをユーザーインターフェイスの操作により自動化する機能**がプレビューとして公開されました。

この機能はすでにプレビューとしてドキュメントも日本語で公開され、機能も英語ですがプレビューを利用できるようになっているため、さっそく触ってみることにしました。なお、利用するにあたってはMicrosoft Flow が使えるいずれかのライセンスを持っている必要があります(体験版含む)。以下では、それを前提にサインインしていることとして進めます。

**参考記事**

* [UI フローの概要](https://docs.microsoft.com/ja-jp/power-automate/ui-flows/overview)

# 最初に: 使い分け
Power Automateは元々はクラウドベースのiPaaSとして、クラウド上で簡単にクラウドAPI同士の連携ができる仕組みを提供していました。今回の機能追加により、デスクトップPC上で画面操作によりアプリケーション間連携ができるRPAの機能も追加されました。機能名でいうと以下の通りです。

* **コネクタ**: 従来からある、サービスのAPIに接続するための部品。コネクタを組み合わせて**テンプレート**を作成することもでき、これによりサービスAPI同士の典型的な連携設定をテンプレート化できる。
* **デスクトップUIフロー**:デスクトップアプリケーションのRPA機能。今回の新機能。
* **Web UIフロー**:WebページやWebアプリケーションのRPA機能。今回の新機能。

また、製品ドキュメントによると、これらの使い分けは以下が意図されています。今回はAPIがないアプリとの連携を実施できるようにUIフローを新設したことがわかります。

|アプリケーションの種類|機能|利点|
|:--|:--|:--|
|APIがあるモダンアプリ|コネクタ|ソフトウェアのUIが変更されても信頼性高く実行される。[コネクタが用意](https://flow.microsoft.com/ja-jp/connectors/)されている場合はこちらの利用推奨。|
|レガシーアプリ (APIなし)|UIフロー|簡単に作成できる。APIがなくても動作する。|

# システム要件

* 有料または体験版のPower Automateサブスクリプション
* Windowsデバイスに管理者権限としてログインでき、かつ上記サブスクリプションが紐づいている組織ID (Azure AD)アカウント
* OS: Windows 10、Windows Server 2016/2019デバイス
* ブラウザー: Google Chromeまたは次世代Edge

### 現在の制限事項

⚠️デスクトップUIフロー

* マルチモニター環境、仮想マシン環境
* ダブルクリック、マウスホーバー、タッチ/ペン入力の記録
* Windowsエクスプローラ/スタートメニュー/タスクバーの操作の記録
* UIは英語のみ
* **OSのシステム言語を既定の日本語から英語に変更する必要あり** (公式ドキュメントに記載がないが日本語だと動作しない。@myoshidan さんの記事『[Power Automate UiFlow for Desktopレコーダー起動時エラーの解消方法
](https://qiita.com/myoshidan/items/e60af5485653435e4288)』を参照)

⚠️Web UI フロー

* 右クリック
* 操作再生時にユーザーセッション情報がクッキー情報に入っている場合は再利用されない
* UIは英語のみ

# UIフローへのアクセス
今回は、Google ChromeとWindows 10の環境でUIフローを使ってみます。まずは、Power Automateのトップ画面から。(ちなみに、この画面もChromeで表示しないと正しく表示されないです。Edgeなどではアイコンの背景の絵が表示されません)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/767d0357-9d20-0021-5d19-3ccf3dfd933d.png)

左のナビゲーションから「マイフロー」をクリック、そして「UIフロー (プレビュー)」をクリックするとUIフローへアクセスできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/c2c29615-ee4f-e707-e190-41a55ad759d7.png)

「UIフローの作成」ボタンをクリックすると、デスクトップアプリかWebアプリのフローを作成するダイアログボックスが表示されます。いずれかのアイコンをクリックして選択すると「次へ」ボタンが押せるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/c69193fe-8b98-a6ac-b0ab-0cb960b6a940.png)

# UIフロー環境の準備

[**このセクション以下は、新しい記事「Power Automate UIフローで現在できることを検証してみた」をご覧ください。今のビルドではいくつか改善されている点もあります**](https://qiita.com/RPAbot/items/5db4150989cb68318c66)

ところで、このまま進んでいってもいいのですが、デスクトップUIフローもWeb UIフローも実行には追加のアプリやアドインのインストールが必要です。

UIフローを使うには以下のインストールが必要です。

* [UIフローインストーラ](https://go.microsoft.com/fwlink/?linkid=2102613)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/9be14f48-b3ac-2cf6-a1b9-6aa38458d8e8.png) (7MBくらいのサイズ)
    * 含まれているMicrosoft Flowブラウザー拡張機能を次世代Edge or Chromeで有効にする ([ここ](https://chrome.google.com/webstore/detail/microsoft-flow-preview/jcajipieipkmjpfakbdhmjidmhidogoo)からもダウンロードできます)
* (オプション) [Selenium IDE](https://go.microsoft.com/fwlink/?linkid=2107665) - Web UI フローを使う場合
* (オプション) [オンプレミスデータゲートウェイ](https://go.microsoft.com/fwlink/?LinkId=820925&clcid=0x409) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/df1dccfd-b9b0-2821-0929-f8a1f4e301a3.png) (520KB)- UIフローのトリガーをイベント、スケジュール、ボタンフローから行うときにのみ必要

### UIフローインストーラの実行
あらかじめ次世代EdgeやChromeは閉じておいてください。
ウィザードを進めていきます。<font color="Red">赤く</font>囲ったところをクリックしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/90ab5959-3a4a-16bb-fdc0-79fbc3b74b7f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/fa687cad-965a-6519-155f-ef3d639f65a3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/b32b7b48-b000-dfb6-b8a6-071c455dab95.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/0ce145b3-d6a2-4429-9a36-3bf702dc7fe2.png)

インストールが正常に完了すると、以下のようなアイコンがデスクトップに作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/705fe40f-0e18-8b3a-e208-c7e47493afec.png)

実行中はタスクバーにアイコンが表示されます。UIフロー実行時はアイコンがあるかどうかを確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/d03fce05-f7b9-53ea-d967-1793dc87788b.png)


### Microsoft Flow ブラウザー拡張機能の有効化
現在のバージョンでは、Chrome向けにはブラウザー拡張機能がインストールされないようなので、Chromeを開いて、[Chromeストア](https://chrome.google.com/webstore/detail/microsoft-flow-preview/jcajipieipkmjpfakbdhmjidmhidogoo)から持ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/04177471-a1b2-d25a-db4b-9c7f7800e923.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/473f02df-611c-2336-ad49-d7b9e715354d.png)

これでChromeに拡張機能が追加され有効化されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/a5a99cab-a54d-f243-0450-6f56990d83e5.png)

### Selenium IDE ブラウザー拡張機能のダウンロードと有効化
Chromeを開いて、[Chromeストア](https://go.microsoft.com/fwlink/?linkid=2107665)から持ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/27b08150-7a43-70cc-7f5f-b52f9fb0a93c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/c5b97463-b423-2929-c035-f261e6713923.png)

これでChromeに拡張機能が追加され有効化されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/9d7daa14-b368-b163-493a-9b48c460c166.png)

Chromeで`chrome://extentions` (次世代Edgeでは`edge://extentions`)を開くと、拡張機能がインストールされていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/f8cacc1d-17e5-73a5-e1cb-01604109c4de.png)

# デスクトップUIフローの作成と実行
では、この画面に戻り、「デスクトップアプリ」をクリックして「次へ」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/c69193fe-8b98-a6ac-b0ab-0cb960b6a940.png)

### 初期設定
フロー名に名前を付けて次に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/db249fd0-526d-9f55-2220-4ce9303ed8a9.png)

初期値を入力できますが、飛ばして次に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/fdd9c298-0bc8-026a-2794-84001b7925f4.png)

ステップとして開始 (Start your flow)と記録 (Recording)の2つが追加された状態で開きますので、Recordingのステップをクリックして展開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/00a902a7-8863-689c-6d48-bc50a038ba06.png)

「レコーダーの起動」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/858778de-6586-c6c5-a0ce-b45627e51c49.png)

>**注**: ここで「記録中にエラーが発生しました。もう一度お試しください」と出る場合はOSのシステム言語を日本語から英語に設定してOSを再起動して再度試す必要あり。

### 記録の開始
正常に記録が開始されると、画面上部に記録ツールバーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/a5c9eb13-f731-4fe4-1ef7-6e2f4c6a6aba.png)

「Record」ボタンをクリックすると記録が開始され、ツールバーが以下のように変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/4a29a19a-b5bd-1240-185f-53f92397e449.png)

>いまのところ、エクスプローラやWindowsスタートメニューのRecordingはすべての動作が記録されるわけではなく、Chrome自身はRecordingできません。Recording可能なアプリ上にマウスカーソルを載せると、ウィンドウやコントロールに赤や青の枠が表示されます。

下記はペイントを起動して「塗りつぶし」アイコンの上にマウスカーソルをもっていった例。ペイントアプリのウィンドウ全体が赤く囲われ、「塗りつぶし」アイコンが青く囲われて、記録対象のウィンドウやコントロールが認識されているのがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/d456d35c-2e8f-940c-73e8-4737744ebc19.png)

今回は、「Record」ボタンをクリックしてから、Windowsタスクバーの検索ボックスで「mspaint」とキーボードでタイプして`ENTER`を押し、ペイントを起動させ、「塗りつぶし」アイコンをクリックしてキャンバス上でクリック、その後「Done」ボタンを押して終了、というステップを記録してみました。

### 記録結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/f9d9bea1-8244-95d8-cce0-f8f9d3b34ee7.png)

「無題 - ペイント スクリプトの実行」を展開したところ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/8fb80b1a-cc2d-6eb1-c806-8a051b289a70.png)

さらに「無題 - ペイントを起動」を展開。タスクバーに文字を打ち込んでスタートメニューにアイコンを表示させ起動したことまでは記録されていないが、アプリケーションが(何らかの方法で)起動したことは記録されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/cba25161-4bb7-88bf-ec73-e7524577be5b.png)

「Left Click 1」を展開。スクリーンショットも含めて記録されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/b28c68de-a984-9506-f33d-79b5ab837d77.png)

詳細には、セレクターに関する情報が保存されている。

```
{
  "type": "WinUIA",
  "parameters": {
    "elementStack": [
      {
        "automationId": "",
        "boundingRectangle": "283,61,24,22",
        "className": "",
        "controlType": "50000",
        "frameworkId": "",
        "name": "塗りつぶし",
        "localizedControlType": "Button",
        "xOffset": 8,
        "yOffset": 17
      },
      {
        "automationId": "",
        "boundingRectangle": "258,50,78,94",
        "className": "",
        "controlType": "50021",
        "frameworkId": "",
        "name": "ツール\n",
        "localizedControlType": "ToolBar"
      },
      {
        "automationId": "",
        "boundingRectangle": "0,47,1366,98",
        "className": "",
        "controlType": "50025",
        "frameworkId": "",
        "name": "ホーム",
        "localizedControlType": "Custom"
      },
      {
        "automationId": "",
        "boundingRectangle": "0,47,1366,98",
        "className": "",
        "controlType": "50025",
        "frameworkId": "",
        "name": "",
        "localizedControlType": "Custom"
      },
      {
        "automationId": "",
        "boundingRectangle": "0,47,1366,98",
        "className": "",
        "controlType": "50033",
        "frameworkId": "",
        "name": "下リボン",
        "localizedControlType": "Pane"
      },
      {
        "automationId": "",
        "boundingRectangle": "0,-8,1366,153",
        "className": "NetUIHWND",
        "controlType": "50033",
        "frameworkId": "Win32",
        "name": "Ribbon",
        "localizedControlType": "Pane"
      },
      {
        "automationId": "",
        "boundingRectangle": "0,23,1366,153",
        "className": "NUIPane",
        "controlType": "50033",
        "frameworkId": "Win32",
        "name": "",
        "localizedControlType": "Pane"
      },
      {
        "automationId": "",
        "boundingRectangle": "0,23,1366,122",
        "className": "UIRibbonWorkPane",
        "controlType": "50033",
        "frameworkId": "Win32",
        "name": "Ribbon",
        "localizedControlType": "Pane"
      },
      {
        "automationId": "",
        "boundingRectangle": "0,23,1366,122",
        "className": "UIRibbonCommandBar",
        "controlType": "50033",
        "frameworkId": "Win32",
        "name": "Ribbon",
        "localizedControlType": "Pane"
      },
      {
        "automationId": "",
        "boundingRectangle": "0,23,1366,122",
        "className": "UIRibbonCommandBarDock",
        "controlType": "50033",
        "frameworkId": "Win32",
        "name": "UIRibbonDockTop",
        "localizedControlType": "Pane"
      },
      {
        "automationId": "",
        "boundingRectangle": "-8,-8,1382,744",
        "className": "MSPaintApp",
        "controlType": "50032",
        "frameworkId": "Win32",
        "name": "無題 - ペイント",
        "localizedControlType": "Window"
      }
    ],
    "elementXPath": "/Window[@ClassName=\"MSPaintApp\"][@Name=\"無題 - ペイント\"]/Pane[@ClassName=\"UIRibbonCommandBarDock\"][@Name=\"UIRibbonDockTop\"]/Pane[@ClassName=\"UIRibbonCommandBar\"][@Name=\"Ribbon\"]/Pane[@ClassName=\"UIRibbonWorkPane\"][@Name=\"Ribbon\"]/Pane[@ClassName=\"NUIPane\"]/Pane[@ClassName=\"NetUIHWND\"][@Name=\"Ribbon\"]/Pane[@Name=\"下リボン\"]/Custom[@Name=\"ホーム\"]/ToolBar[@Name=\"ツール\n\"]/Button[@Name=\"塗りつぶし\"]",
    "desktopNodeXPath": "/Pane[@ClassName=\"#32769\"][@Name=\"デスクトップ 1\"]",
    "applicationInfo": {
      "applicationId": "7M9VkYx1GkKA02RwkFx7uQ=="
    }
  }
}
```
「Left Click 2」を展開。こちらも同様。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/bd25a45d-6bb2-5854-e001-89c51bab37e9.png)

### 記録結果のテストとデバッグ
操作が記録されていることが確認出来たら、「次へ」ボタンを押して先に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/2c978260-b670-9203-6f0f-0f09e85f8832.png)

出力値の画面で「次へ」ボタンを押して先に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/4fc57c6b-4ec2-4635-fcdd-87c3e12befac.png)

「保存して終了」ボタンを押す前に、「テスト」ボタンを押して、動作をテストしてみましょう。操作したアプリケーションはあらかじめ終了しておくことをお勧めします。テストが開始されると、記録した操作がゆっくり開始されます。(かなりゆっくりしています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/793c62d8-ed04-4375-498b-a3461179439c.png)

以下の画面に切り替わるのでしばらく待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/8b93be2c-e92c-f697-1f3d-f96ee0e9761e.png)

テストの実行結果が表示されます。(以下はエラーになった場合)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/4b37115a-0e84-e64f-0053-4b683a4b38f9.png)

エラーが出た場合、ステップを分解していくとどのステップは何秒かかって、どこが成功してどこで失敗して、どういう原因か、というこを追求することができます。今回は、2回目の左クリック (Left Click 2)のステップで、クリック対象のコントロールが見つからないというエラーが出ました。修正すべき点がわかったら「戻る」ボタンでステップの編集画面に戻り、操作を行った後、再びテスト画面まで戻ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/12457964-53f5-8951-d5df-45516c12673b.png)

テストの結果、正常に完了すると以下のような表示となります。「保存して終了」ボタンを押すと完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/ea067480-0c59-dbfe-a9cd-2dc1b16ec34d.png)

これでフローが保存されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/ca54cfc6-d68f-a748-62a6-4a042c28bd1d.png)



# Web UI フローの作成と実行
今度は、この画面に戻り、「Webアプリ」をクリックして「次へ」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/c69193fe-8b98-a6ac-b0ab-0cb960b6a940.png)

フロー名を付けて、操作をするWebページのURLを入力して「レコーダーの起動」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/91bc98d2-93dd-0aa8-e8bc-0bb670ca2f55.png)

Selenium IDEが起動します。「このページを翻訳しますか？」が立ち上がる場合は消して、必要に応じてウィンドウを横に広げてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/2da213c4-8e15-1df7-bcfd-b12107e4bd3d.png)

ツールバー右側の「`REC`」ボタンを押すとChromeの別ウィンドウで対象となるWebページが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/f735ecc3-a767-1711-e35f-21c67a1fb4dd.png)

記録対象のウィンドウには、右下に「Selenium IDE is recording...」という表示が出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/12c1ee46-b5a7-0008-b478-e1d4cc318be4.png)

このウィンドウ上で必要な操作を行ったら、Selenium IDEに戻って、ツールバー右側の終了ボタン (「`■`」ボタン)を押すと、操作が記録されていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/9d6e0b42-30bb-9ae2-a044-7e616a01452e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/fbcd135d-6cb1-4c9c-9b27-3b8ae8f45b32.png)

ツールバー上の「Run all tests」ボタン (「`▶`」ボタン)を押すと、再生することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/ba3577db-ae24-601b-e958-40b94b337c12.png)

最後は「Save Project」ボタン(「`💾`」ボタン)をクリックすると、フローが保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479715/9bfaa063-4d27-e915-3892-61702c389ba5.png)


# 触ってみての感想
さすがマイクロソフトが純正で出すツールだけあって、細かい操作性は行き届いていると思いました。ただし、まだコントロールがきちんと認識されていなかったり、記録がスキップされてしまうステップがあったりとプレビューであることも否めません。2020年4月に正式リリースとのことですが、正式リリースされれば、WinActorやUiPathが「アテンデッド型」と呼ばれるユーザーがログインした状態で自分のデスクトップで使うRDAのシナリオにはかなり食い込んでくると思われます。一方、「アンアテンデッド型」と呼ばれるログインなしで稼働する使い方、ロボットの稼働管理やログイン情報の管理など、サーバー型のRPAの領域は今回のリリースでは見受けられませんでした。Power Automate UI フローはOffice 365サブスクリプションを持っている企業で気軽にアドオンできるため、今後ローエンドのRPA、自動化シナリオはOffice 365に取り込まれていくかもしれません。

**2020/3/3更新**
やはりRPAの世界の価格破壊的なアプローチで来ましたね！ユーザ単位の課金とプロセスフロー数ベースの課金があるようですが、10数人、もしくはプロセスフロー5つくらいまでであれば、かなりお安く利用できそうです！

* 『[日本一わかりやすい、非公式な Power AutomateとRPA機能UI flowsのライセンス表](https://memo.tyoshida.me/power-platform/power-automate/power-automate-ui-flows-rpa-license-price/)』- 吉田の備忘録

# 報道資料
* [［速報］マイクロソフト、RPA機能を搭載した「Power Automate」発表。ユーザーの操作を記録、再現実行で自動化。Ignite 2019](https://www.publickey1.jp/blog/19/rpapower_automateignite_2019.html)