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要素を動的に利用する

UI要素を動的に利用する

MiyakeMito

More Decks by MiyakeMito

Featured

Transcript