プログラマがPower Automate for Desktopを使う(4)アクションの操作対象を整理して分かりやすいフローにするには

※この記事は [プログラマがPower Automate for Desktopを使う](https://qiita.com/jzephyr/items/3ba3b02bfdb3d6a32442) シリーズの一つです。

# アクションの操作対象を整理して分かりやすいフローにするには
この記事では、アクションの操作対象であるブラウザ変数とUI要素を整理して分かりやすく方法を述べます。フローを分かりやすくするのは、作業効率を上げるためです。フローを分かりやすくする目的で、次の基準を使います。
* 自分にとって意味が通る名前をつける
* ブラウザ変数の重複を避ける
* UI要素の階層構造の冗長性を無くす

## ブラウザ変数について
:::note
白状します。当初私は「ブラウザ変数はページを指す」と勘違いしていました。実は「ブラウザ変数はタブを指す」ものでした。
:::

### タブのライフ
ブラウザのタブとして現れその後消える単位を、ここでは単にタブと呼んでいます。タブにはライフがあります。
ブラウザに一時に最大3つのタブが現れる例を挙げます。
1. 左タブ（ホームページ）
1. 左タブ（ホームページ）｜中タブ（話題Aの概要ページ）
1. 左タブ（ホームページ）｜中タブ（話題Aの概要ページ）｜右タブ（話題Aの詳細ページ）
1. 左タブ（ホームページ）｜中タブ（話題Aの概要ページ）
1. 左タブ（ホームページ）
1. 左タブ（ホームページ）｜中タブ（話題Bの概要ページ）
1. 左タブ（ホームページ）｜中タブ（話題Bの概要ページ）｜右タブ（話題Bの詳細ページ）
1. 左タブ（ホームページ）｜中タブ（話題Bの概要ページ）
1. 左タブ（ホームページ）

この例には次の5つのタブが登場しています。
* 左タブ（ホームページ）
* 中タブ（話題Aの概要ページ）
* 右タブ（話題Aの詳細ページ）
* 中タブ（話題Bの概要ページ）
* 右タブ（話題Bの詳細ページ）

### ブラウザ変数は何を指すか
ブラウザ変数は
* ページに複数のブラウザ変数
* ページに1つのブラウザ変数
* タブに1つのブラウザ変数

を作ることが可能です。
先ず、ページに複数のブラウザ変数があるのは分かりにくいので、その状態は解消すべきだと思います。
次に、「ページに1つ」か「タブに1つ」かは分かりやすさの観点からは方針（好み）の問題ですが、実行速度の観点から「タブに1つ」にすべきです。

::::::note warn
余分なブラウザインスタンスを作るとフローの実行が遅くなります。
:::

### ブラウザ変数の命名
**新しいChromeを起動する**アクションをフローに追加すると、ブラウザ変数が出来ます。既定では、Browser,Browser 2,Browser 3,...といった変数名になりますが、自分にとって意味がある名前に変えておくべきです。

### ブラウザ変数のマージ
2つのブラウザ変数が同じタブを指す場合に、1つのブラウザ変数にまとめる方法を述べます。
~~~
{x} Br_FriendlyName　…これがあるタブを指す
{x} Browser2       　…これもそのタブを指す
~~~
この場合、**変数ペイン**で「Browser2」を「Br_FriendlyName」に変更すると**フローデザイナー**がブラウザ変数のマージを行ってくれ、次のことが生じます。
* 全ステップの参照箇所の「Browser2」の「Br_FriendlyName」が変わる。
~~~
{x} Br_FriendlyName　…これだけがあるタブを指す
~~~
この結果、1つのブラウザ変数が1つのタブを表すようになり、分かりやすくなります。

## UI要素ペインについて
<a id="ui要素ペインの中身"></a>
### UI要素ペインの中身
UI要素ペインの中身の例を挙げます。
~~~
ローカル コンピューター
　　Web Page 'テキスト'
　　　　Anchor 'テキスト'
　　　　image
　　Pane 'テキスト'
　　　　MenuItem: テキスト
　　　　Button 'テキスト'
　　Window 'テキスト'
　　　　List Item 'テキスト'
~~~
最上位は常に「ローカル コンピューター」であり、中間層のものは末端のものを括っており、末端のものはUI画面要素を指します。「'テキスト'」の部分には既定では**フローデザイナー**が画面から取得した文字列が入ります。
以下、中間層と末端の要素について、私が観察した結果を示します。

* Web Page 'テキスト'
この括りは、ブラウザのタブ内に表示されるページを表しています。
テキストはページのタイトル（htmlのtitleタグのテキスト）を採用するようです。

    * Anchor 'テキスト'
このUI要素は、リンク（htmlのaタグ）を指しています。
リンクがテキストを持つ場合はそれが採用されまるようです。

    * image
このUI要素は、リンクを指しています。
リンクが画像の場合は、image,image 2,...となります。

* Pane 'テキスト'
Pane型の括りは、一般にはデスクトップ上のウィンドウまたは内部の領域を表すものですが、ウィンドウがブラウザの場合は「タブ外のブラウザ全体」を表しています。
テキストは、 フロー作成時にフォアグラウンドなタブに表示中のページのタイトルが採用されるようです。

    * MenuItem: 'テキスト'
このUI要素は、拡張機能を指しています。
テキストは拡張機能名が採用されるようです。

    * Button 'テキスト'
このUI要素は、拡張機能がデスクトップにポップアップしたWindowsの「名前を付けて保存」ダイアログのボタンを指しています。
テキストはボタン名のようです。

* Window 'テキスト'
この括りは、ブラウザ以外の画面を表します。拡張機能のポップアップ画面はこれに該当します。

    * List Item 'テキスト'
このUI要素は、拡張機能のポップアップ画面内の要素を示します。
テキストは画面から採取されるようです。

### UI要素の括りは何を指すか
**UI要素ペイン**の中間層の「括り(造語)」は、UI要素を追加した段階では、ページを指しています。**レコーダー**の結果、同じページを指す2つの括りが生じる場合があります。なお括りは合併可能です。
従って
* 複数の括りが同じページを指す
* 1つの括りが1つのページを指す
* 1つの括りが1つのタブを指す

場合があり得ます。
先ず、複数の括りが同じページを指すのは分かりにくいので、若干の手間はかかりますが、解消すべきだと思います。
次に、「ページに1つ」か「タブに1つ」かは分かり易さの観点からは方針（好み）の問題ですが、手間と見易さのトレードオフがあります。
* 「ページに1つ」なら手間がかからないが、**UI要素ペイン**が長くなり、参照時に見にくい。
* 「タブに1つ」だと**UI要素ペイン**が短くて見やすいが、括りの合併にかなりの手間がかかる。

私は「ページに1つ」のままにしました。

### UI要素の命名
**UI要素ピッカー**で対象をしてした際に**UI要素ペイン**に自動的に登録される形の例を示します。
~~~
ローカルコンピューター
　　Web Page '長くて表示しきれないURLらしき文字列'
　　　　image 2
~~~
このままでは混乱するので、自分にとって分かりやすい名前に変えておくべきです。

### 括りをページ毎にまとめる方法
同じページを指す2つの括りを合併する方法を述べます。
~~~
ローカルコンピューター
　　Web Page ページ名A　…元々あった括り
　　　　要素名a
　　Web Page ページ名B　…新しくできたが、実は上と同じページを表す括り
　　　　要素名b
~~~
「要素名b」をドラッグして「Web Page ページ名A」の配下に移動できます。
~~~
ローカルコンピューター
　　Web Page ページ名A
　　　　要素名a
　　　　要素名b
　　Web Page ページ名B　…不要になった括り
~~~
不要になった「Web Page ページ名B」は削除可能です。
~~~
ローカルコンピューター
　　Web Page ページ名A
　　　　要素名a
　　　　要素名b
~~~
この方法で、1つの括りが1つのページを表す状態にできます。

なお**UI要素ペイン**のメニューから、一括して「使われていない要素を削除する」ことが可能です。

### 括りをタブ毎にまとめる方法
※これは実験したものの採用しなかった方法です。参考までに書いておきます。
同じタブに表示される2つのページを指す括りを合併する方法を述べます。
最初の**UI要素ペイン**が次の形だとします。
~~~
ローカルコンピューター
　　Web Page ページ名A　…合流先
　　　　要素名a
　　Web Page ページ名B　…合流元
　　　　要素名b
~~~
ここで、Web Pageの編集画面でセレクターを見ると次の形です。
~~~
Default Selector  　…URLあり
~~~
このままだと、URLが異なるため、要素名bをページ名Aの配下に移動できません。
このため、ぺーじ名Aの括りについて**UI要素ペイン**で括りの編集を行い、セレクターのダイアログを出し、「+再キャプチャーするセクター」をクリックして出る「UI要素ピッカー」にて、タブ内全域の矩形を選択します。するとDefault Selector 2が出来ます。
~~~
Default Selector    　…URLあり
Default Selector 2  　…URLなし
~~~
ここで新しいセレクターを上に移動します。
~~~
Default Selector 2  　…URLなし
Default Selector    　…URLあり
~~~
この手順で、ぺーじ名Aと同様にぺーじ名Bの括りのセレクターも編集します。
すると、URLの不一致がなくなって要素名bをページ名Aの配下に移動可能になるので、移動を行います。
~~~
ローカルコンピューター
　　Web Page ページ名A　…合流先
　　　　要素名a
　　　　要素名b
　　Web Page ページ名B　…合流元
~~~
その際に
> 合流元のUI要素を参照していたフローのステップが「参照先UI要素がないため」
>フ ロー作成時エラーになるので、そのアクションを編集して対象UI要素として移動先のUI要素を選択し直す

必要があります。
その結果、不要になったページ名Bの括りを削除します。
~~~
ローカルコンピューター
　　Web Page ページ名A　…合流先
　　　　要素名a
　　　　要素名b
~~~
すると、ぺーじ名1の括りは最早ページを指すものではく、タグを指すものなので、名称を変更します。
~~~
ローカルコンピューター
　　Web Page タブ名A
　　　　要素名a
　　　　要素名b
~~~
この方法で、1つの括りが1つのタブを表す状態にできます。

 [シリーズの記事一覧へ](https://qiita.com/jzephyr/items/3ba3b02bfdb3d6a32442#シリーズの記事一覧)