※この記事はプログラマがPower Automate for Desktopを使うシリーズの一つです。

アクションの操作対象を整理して分かりやすいフローにするには

この記事では、アクションの操作対象であるブラウザ変数とUI要素を整理して分かりやすく方法を述べます。フローを分かりやすくするのは、作業効率を上げるためです。フローを分かりやすくする目的で、次の基準を使います。

自分にとって意味が通る名前をつける
ブラウザ変数の重複を避ける
UI要素の階層構造の冗長性を無くす

ブラウザ変数について

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

タブのライフ

ブラウザのタブとして現れその後消える単位を、ここでは単にタブと呼んでいます。タブにはライフがあります。
ブラウザに一時に最大3つのタブが現れる例を挙げます。

左タブ（ホームページ）
左タブ（ホームページ）｜中タブ（話題Aの概要ページ）
左タブ（ホームページ）｜中タブ（話題Aの概要ページ）｜右タブ（話題Aの詳細ページ）
左タブ（ホームページ）｜中タブ（話題Aの概要ページ）
左タブ（ホームページ）
左タブ（ホームページ）｜中タブ（話題Bの概要ページ）
左タブ（ホームページ）｜中タブ（話題Bの概要ページ）｜右タブ（話題Bの詳細ページ）
左タブ（ホームページ）｜中タブ（話題Bの概要ページ）
左タブ（ホームページ）

この例には次の5つのタブが登場しています。

左タブ（ホームページ）
中タブ（話題Aの概要ページ）
右タブ（話題Aの詳細ページ）
中タブ（話題Bの概要ページ）
右タブ（話題Bの詳細ページ）

ブラウザ変数は何を指すか

ブラウザ変数は

ページに複数のブラウザ変数
ページに1つのブラウザ変数
タブに1つのブラウザ変数

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

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

ブラウザ変数の命名

新しい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要素ペインについて

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つのタブを表す状態にできます。

シリーズの記事一覧へ