Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UI要素を動的に利用する
Search
MiyakeMito
March 28, 2021
0
460
UI要素を動的に利用する
UI要素を動的に利用する
MiyakeMito
March 28, 2021
Tweet
Share
More Decks by MiyakeMito
See All by MiyakeMito
ガンダムBotを1分でつくってみせろよ
miyakemito
1
220
Microsoft Copilot Studio について
miyakemito
0
4.2k
承認コネクタについて
miyakemito
2
470
Power Platform の Microsoft 365 Copilot について
miyakemito
0
1.5k
Graph API の基本とPower Automateでの利用方法について
miyakemito
2
3.7k
Microsoft Graph の SharePoint pages API について
miyakemito
0
740
Teamsコネクタについて
miyakemito
5
3.1k
Power Automateの子フローについて
miyakemito
2
2.2k
Power Automate for desktopの例外処理について
miyakemito
0
740
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
36
2k
What's new in Ruby 2.0
geeforr
335
31k
The Cult of Friendly URLs
andyhume
73
5.6k
GitHub's CSS Performance
jonrohan
1023
450k
Become a Pro
speakerdeck
PRO
8
4.4k
The Invisible Customer
myddelton
114
12k
GraphQLとの向き合い方2022年版
quramy
28
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Music & Morning Musume
bryan
39
5.5k
Building an army of robots
kneath
300
41k
A designer walks into a library…
pauljervisheath
199
23k
Navigating Team Friction
lara
177
13k
Transcript
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要素作成の3つのルール ① <html>(最上層) から、階層ごとにタグを記述しながら、 目的の部品までたどる ② 階層と階層は『 > 』で繋ぐ ③
ひとつの階層に同一タグが複数ある場合は、 『:eq(添え字)』をつけて、 選択するタグが上から何番目に存在するかを指定する ※ 添え字は0からスタート ひとつめを指定する場合は『:eq(0)』不要
実践
html > body > div > div :eq(1) > div
> div:eq(1) > div > ul > li > a 0 1 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
ありがとうございました