セレクタの仕組み（Power Automate for desktop）

240718
セレクタの仕組みを学ぶための学習資料です
# Power Automate for desktop

Transcript

1. セレクタの仕組みを学ぼう！ （講義資料） @Toba 2024/07/18 #3 LIVEセミナー ©ユースフル株式会社
2. 01 02 03　 04　 　PADがWebページを操作する仕組み 　HTMLとは タグ、属性について セレクターとは 資料の目次 ©ユースフル株式会社
3. 01 PADがWebページを 操作する仕組み ©ユースフル株式会社
4. 人が見ているモノ、PADが見ているモノ 画面上の部品を見て操作 ©ユースフル株式会社
5. 人が見ているモノ、PADが見ているモノ HTMLのコードを見て操作 ©ユースフル株式会社
6. 人が見ているモノ、PADが見ているモノ ➀Webページを構成する 裏側のコード ＝HTML ➁画面上の部品を 指定するための仕組み ＝セレクター ©ユースフル株式会社
7. 01：まとめ PADはHTMLのコードを見て画面を操作 Webページの操作には、
 HTMLとセレクターの2つが大切 HTML = Webページのコード セレクタ = 画面上の部品を指定する仕組み ©ユースフル株式会社
8. 02 HTMLとは ©ユースフル株式会社
9. HTML：Webページの裏側のコード ©ユースフル株式会社
10. HTMLってどんな言語？ タグで囲って、変身させちゃう言語 （ただの文字を、Webページ上の部品に変身させる！） ©ユースフル株式会社
11. HTML：タグで囲って変身 <h1> </h1> タイトル タグを貼り付けると ただの文字が.. おっきなタイトルに！ ©ユースフル株式会社
12. <button> </button> ボタン タグを貼り付けると ただの文字が.. 本当のボタンになっちゃう！ ©ユースフル株式会社 HTML：タグで囲って変身
13. <a href=”http://www..”> </a> リンク タグを貼り付けると ただの文字に.. リンクの機能が 付与されちゃった！ ©ユースフル株式会社 HTML：タグで囲って変身
14. タグを入れ子にしながら何個も使うことで、Webページを形作っている Webページはタグの集まり ©ユースフル株式会社
15. 02：まとめ HTMLはタグを貼り付ける言語 タグはただの文字をWeb上の部品に変身させる ボタン, リンクなど、タグには色々な種類がある Webページは入れ子になったタグの集まり ©ユースフル株式会社
16. 03 タグ、属性について ©ユースフル株式会社
17. <a >リンク</a> href=”http://www..” Webページ内に リンクを作成する <a>タグ = タグ：Webページ内の部品を構成 ©ユースフル株式会社
18. <a >リンク</a> href=”http://www..” タグ（ここでは作成されたリンク）に関する 具体的な追加情報を表している 属性 = タグ内で名前の後に直接記述される 属性：タグの補足となる追加情報 ©ユースフル株式会社
19. 頻出のタグ <a> <button> <input> <div> 機能 使われ方 Webでの見え方 Tobaからのコメント 文字をリンク付きにする <a href=”http..”>リンク</a> <button>ボタン</button> <input> <div>..</div> なし（見えない）
 → HTMLのコードで確認 リンクをクリックする際には この<a>タグを探すことになります！ ボタンは名前でも探せるので、 button[Text=”ボタン”] とセレクタで記述するのもおすすめ！ Web上のフォームは全て、 この<input>タグを探すことに！ Webページの裏側は<div>タグで それぞれのブロックを分けています。 表側から見えるワケではありませんが、 セレクタを記述する際のキーになります！ 文字をボタンにする 値を入力する フォームを作る Webページ内で 要素をまとめる ©ユースフル株式会社
20. 頻出の属性 id class name
 (value) Text 機能 使われ方 Tobaからのコメント Webページ内で 要素を一意に識別 <input > id=”◦◦” <div >..</div> calss=”◦◦” <input > name=”◦◦” <span>中身の要素</span> ※）左記の例では span[Text=”中身の要素”] と記述して取得できます id属性はWebページ内に1つしか存在しないので、 こちらを使えば必ず要素を指定できることになります。 ただランダムに変更される場合も多いので、 取り扱いには注意をしてください。 Webページ内で最もよく見かける属性です。 id属性のように特殊ではないので、使い勝手も◎ 要素を正確に指定したい場合にちょい足ししてみてください。 主にフォームやボタンに使われます。 上記2つを指定する際、便利に使えます。 似た属性でvalueもあるのでセットで覚えておきましょう。 属性ではありませんが、とっても便利なのでご紹介します。 タグとタグの間に記述されたテキストを元に、 要素を取得できちゃうのがTextのすごさです。 画面上の名前を元に取得できるので積極的に使ってみてください。 同じような要素を グループ化する 主にフォーム要素を 識別するために使用 タグ内に記述された文字を元に 要素を指定できる ©ユースフル株式会社
21. 03：まとめ HTMLはタグと属性の2つから構成 タグ：Webページを構成する部品 属性：タグの補足となる追加情報 頻出のタグと属性は操作しながら覚える ©ユースフル株式会社
22. 04 セレクターとは ©ユースフル株式会社
23. セレクタ：画面上の部品を指定する仕組み <button>タグを探す場合、
 と記述 body > div > button 階層構造で要素を指定する ©ユースフル株式会社
24. body > div > button 階層構造で要素を指定 階層構造を表す記号 要素（HTMLタグ） ©ユースフル株式会社