UI要素を動的に利用する

UI要素を
動的に利用する

自己紹介
株式会社アイシーソフト
https://www.icsoft.jp/
@MiTo60448639
https://qiita.com/MiyakeMito

目標
WEB画面の UI要素を
自力で作り
仕組みを理解し動的に利用する

UI要素って
どうなってるの？

html > body > div:eq(0) > div:eq(1) > div:eq(0) > div:eq(1) > div > ul > li:eq(0) > a
UI要素はこうなってる
Webレコーダーで記録すると、こういう値になっている
・・・これ自分で作れそう？？

UI要素を作る為の
『私流』ルール

まずは、
HTMLを整形する
Visual Studio Code がおすすめ
https://azure.microsoft.com/ja-
jp/products/visual-studio-code/
推奨設定
表示 - 外観 - サイドリンクバーを表示
＋アウトラインを表示
＋カーソルに追従
■サイドリンクバーで
すべてを折りたたんで表示した後に、
対象のWebパーツの記載部分をクリック

UI要素作成の３つのルール
① <html>(最上層) から、階層ごとにタグを記述しながら、
目的の部品までたどる
② 階層と階層は『 > 』で繋ぐ
③ ひとつの階層に同一タグが複数ある場合は、
『:eq(添え字)』をつけて、
選択するタグが上から何番目に存在するかを指定する
※ 添え字は0からスタート
ひとつめを指定する場合は『:eq(0)』不要

html >
body >
div >
div:eq(1) >
div >
div:eq(1) >
div >
ul >
li >
a
０
１
html > body > div > div:eq(1) > div >
div:eq(1) > div > ul > li > a
Yahoo!路線情報
「乗換案内」リンク

応用というか本題？
添え字に変数を設定すると何かと便利！
Yahoo!路線情報－乗換案内の検索結果
html > body > div > div:eq(1) > div:eq(1) > div > div
> div:eq(1) > div > ul:eq(1) > li:eq( )
> dl > dd > ul > li:eq( )
%LoopIndex2%
%LoopIndex1%

まとめ
Web画面のUI要素は自作できます。
そして、
変数を埋め込み、動的に利用可能です。

注意
今回利用しましたYahoo路線案内は問題ありませんが
（2021年3月現在）
利用規約で自動化を禁止しているサイトも存在します。
ご注意ください。

本日の内容
■ Power Automate Desktop のWebUI要素を自作し、
動的に活用する
https://qiita.com/MiyakeMito/items/cb2d193bb64152ce26be

ありがとうございました

UI要素を動的に利用する

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Similar to UI要素を動的に利用する

Similar to UI要素を動的に利用する (20)

Recently uploaded

Recently uploaded (12)

UI要素を動的に利用する