UI要素を動的に利用する

UI要素を動的に利用する

Transcript

1. UI要素を 動的に利用する
2. 自己紹介 株式会社アイシーソフト https://www.icsoft.jp/ @MiTo60448639 https://qiita.com/MiyakeMito
3. 目標 WEB画面の UI要素 を 自力で 作り 仕組みを理解し 動的に利用する
4. UI要素って どうなってるの？
5. html > body > div:eq(0) > div:eq(1) > div:eq(0) > div:eq(1) > div > ul > li:eq(0) > a UI要素はこうなってる Webレコーダーで記録すると、こういう値になっている ・・・これ自分で作れそう？？
6. UI要素を作る為の 『私流』ルール
7. まずは、 HTMLを整形する Visual Studio Code がおすすめ https://azure.microsoft.com/ja- jp/products/visual-studio-code/ 推奨設定 表示 - 外観 - サイドリンクバーを表示 ＋アウトラインを表示 ＋カーソルに追従 ▪サイドリンクバーで すべてを折りたたんで表示した後に、 対象のWebパーツの記載部分をクリック
8. UI要素作成の３つのルール ① <html>(最上層) から、階層ごとにタグを記述しながら、 目的の部品までたどる ② 階層と階層は『 > 』で繋ぐ ③ ひとつの階層に同一タグが複数ある場合は、 『:eq(添え字)』をつけて、 選択するタグが上から何番目に存在するかを指定する ※ 添え字は0からスタート ひとつめを指定する場合は『:eq(0)』不要
9. 実践
10. 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!路線情報 「乗換案内」リンク
11. 応用 というか本題？ 添え字に変数を設定すると何かと便利！ 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%
12. まとめ Web画面のUI要素は自作できます。 そして、 変数を埋め込み、動的に利用可能です。
13. 注意 今回利用しましたYahoo路線案内は問題ありませんが （2021年3月現在） 利用規約で自動化を禁止しているサイトも存在します。 ご注意ください。
14. 本日の内容 ▪ Power Automate Desktop のWebUI要素を自作し、 動的に活用する https://qiita.com/MiyakeMito/items/cb2d193bb64152ce26be
15. ありがとうございました