デスクワークを超絶快適にするおすすめギアたち詳しく見る

ブラウザ開発者ツールの使い方!

目次

スクレイピングする時はHTML構造を確認しよう。

Power Automate for desktopを使えばWebサイトのHTML構成を全く理解していなくてもスクレイピング目的のフローを簡単に作成することができます。

ですが、安定性を求めるときや、フローが動かなくなってしまったときのトラブルシューティングをするときに、WebサイトのHTML構成を調査する時があります。

じょじお

この記事ではWebページのHTMLを表示・分析する方法としてブラウザの開発者ツールを使う方法について解説します。

HTMLを確認する方法は?

じょじお

WebページのHTMLを表示して分析する方法は、ブラウザの開発者ツールを使う方法が一般的です。

ブラウザの開発者ツールを使おう!

開発者ツールはDevTools、デベロッパーツールと呼ぶこともあります。開発者ツールは、WebページのHTMLを表示するのにとても便利で高機能なツールです。名前のとおりWebエンジニアがWebサイトの開発に用いることが多いです。

じょじお

次の項からMicrosoft Edgeを使って開発者ツールの操作方法を学習します!

開発者ツール(DevTools)の使い方の基本

じょじお

開発者ツールを開いてみましょう。解説ではEdgeを使っていますがChrome・Firefoxも操作方法はほぼ同様です。

開発者ツールの開き方

STEP
Microsoft EdgeでターゲットのWebページを開きます。
ブラウザ開発者ツール

▲デモ用に上記のような簡易的なWebページを作りました。このWebページをもとに解説します。まずはこのターゲットページをEdgeで開きます。

STEP
開発者ツールを起動します。

下記のいずれかのショートカットキーで開発者ツールを開きます。

下記のどちらかのショートカットキーで開発者ツールを開きます。

  • Ctrl+Shift+I
  • F12キー

Chrome・Edge・Firefoxどれも共通です。

ブラウザ開発者ツール

▲するとブラウザの、表示しているWebページの右側に開発者ツールが起動します(図の赤枠の領域)。ブラウザの種類やバージョンによって若干見た目の違いがあるかもしれません。

開発者ツールの画面の見方

STEP
「要素」タブ(Elements)を選択するとHTMLが表示されます。
ブラウザ開発者ツール

▲開発者ツールの上部にはいくつかのタブメニューがあります。まずは「要素(Elements)」タブを開いてみてください。HTMLの内容確認するだけでしたら基本的に「要素」タブだけ覚えておけばよいかなと思います。

要素タブではHTMLを確認することができます。

STEP
閉じている要素はクリックして展開します。
ブラウザ開発者ツール

▲要素タブでは、デフォルトではタグごとに折りたたまれて非表示になっている部分があります。必要があればクリックで開閉できます。クリックしてみます。

ブラウザ開発者ツール

▲展開できました。このようにHTMLの内容を確認することができます。

特定の要素のHTMLタグをピンポイントで確認する方法

ぽこがみさま

例えばフォームのボタンの部分のところのHTMLを見たい場合はどうしたらいいの?

じょじお

特定の要素のHTMLを確認するには、簡単に目的の要素の部分のHTMLを一発で表示する方法があるよ。

STEP
左上の方にある「要素の選択」アイコンをクリックします。
ブラウザ開発者ツール

▲開発者ツールの左上の「要素の選択」アイコン(図の赤枠)をクリックして選択モードに移行します。Ctrl+Shift+Cでも選択モードに移行できます。

STEP
左側のWebページの画面で目的の要素をクリックします。
ブラウザ開発者ツール

▲左側のWebサイトの画面の中の目的の要素をクリックします。ここでは図のようにWebページの中のリスト表示のひとつ「melon」という文字列のHTMLタグをみてみたいと思います。

ブラウザ開発者ツール

▲「melon」というところにマウスカーソルを合わせると要素の色が変化して要素の簡易情報がカード表示でポップアップされます。これが要素の選択モードが有効になっている印です。色の変化を確認できたら要素をクリックします。

マウスの微妙な位置の違いによって取得できる情報が異なるので気を付けてください。

STEP
クリックした要素のHTMLタグがハイライト表示されます。
ブラウザ開発者ツール

▲要素をクリックすると、開発者ツールのHTMLの中の要素に該当する箇所がハイライト表示されます。

じょじお

このように実際のWebサイトをクリックして該当のHTMLの箇所を簡単に特定することができるので便利です。

開発者ツールを使って要素を特定しよう!

要素の特定とは?

スクレイピングするときは、要素を詳細に特定して表現する必要があります。なんでかというと、たとえばスクレイピングで<a>タグのリンクをクリックしたいとします。もし、Webページ上にaタグがひとつしかないページでしたら、Power AutomateやPythonなどのスクレイピングツールに「ページ上のaをクリックしてね」という指示を出すだけで済みます。ところが昨今のWebページは情報量も多く複雑です。ページ上にaタグがひとつしかないなんてことはほぼありません。

そこで「どこの」という情報をつけて「ここのdivタグの中のaタグ」というように階層や詳細な名前を含めたアドレス指定でスクレイピングツールに指示しなければいけないのです。

じょじお

HTML要素のアドレスの表現方法にはおもに下記2つの方法があるので覚えておきましょう。

ぽこがみさま

開発者ツールを使えばどちらも簡単に取得することができます。

要素の特定によく使われる方法

  • CSSセレクタ
  • XPath(エックスパス)

Power Automate for desktop(PAD)では要素の特定方法にCSSセレクタのみが採用されています。PADでは自分でCSSセレクタを書かなくても、追跡セッションウィンドウレコーダー機能で自動生成することができますが安定したフローを作成するには自分でCSSセレクタを使って書いた方がいいです。

開発者ツールでCSSセレクタを取得する方法

STEP

▲上述の「特定の要素のHTMLタグをピンポイントで確認する方法」で、特定の要素のHTMLを選択状態にします。

STEP

要素を選択した状態で右クリックメニューの中の「コピー(Copy)> セレクタをコピー(Copy selector)」をクリックします。図は英語表記になっていますが、環境によっては日本語になっているかもしれません。

この操作でクリップボードにCSSセレクタがコピーされました。Ctrl+Vを押すとメモ帳などに貼り付けることができます。

開発者ツールでXPathを取得する方法

STEP

▲上述の「特定の要素のHTMLタグをピンポイントで確認する方法」で、特定の要素のHTMLを選択状態にします。

STEP

▲要素を選択した状態で右クリックメニューの中の「コピー(Copy)> XPathをコピー(Copy XPath)」をクリックします。図は英語表記になっていますが、環境によっては日本語になっているかもしれません。

この操作でクリップボードにXPathがコピーされました。Ctrl+Vを押すとメモ帳などに貼り付けることができます。

特定の要素(タグ)のツリー構造を取得する方法

スクレイピングをするとき、目的の要素のツリー構造を知りたい時があります。

STEP
目的の要素のHTMLタグを選択状態にします。
ブラウザ開発者ツール

上述の「特定の要素のHTMLタグをピンポイントで確認する方法」の操作で目的の要素のHTMLタグを選択した状態にします。

STEP
画面の下の方にHTML階層構造が表示されます。
ブラウザ開発者ツール

▲目的の要素までのHTML階層が表示されます。

要素(HTMLタグ)のあとの記号の意味は、ドットがついていたらクラス名、シャープが付いていたらID名です。

要素のうしろのドットはクラス名を表します。(要素.クラス名

要素のうしろのシャープはID名を表します。(要素.ID名

例:html body div.content div.flex div.main-content div.section1 li.section1-list a#f-list3

▲この例の場合、目的の要素はf-list3というID名を持ったaタグであり、このaタグの階層は、クラス名やID名を省略するとhtml / body / div / div / div / div / li / aであることがわかります。

スクレイピングに必要なHTMLの知識

HTMLの用語

HTMLの用語

スクレイピングをするのであればHTMLの用語は覚えておくべきです。スクレイピングに用いるツールのマニュアルを読むときやネットで情報を求めるときに必要になります。

HTMLの主な用語説明
タグ<p>タグ、<a>タグなどたくさんのタグがあります。タグには開始タグと終了タグがあります。
コンテンツ
(テキスト)
開始タグと終了タグの間に挟まれた情報です。Webブラウザ上で実際にユーザに表示される部分になります。スクレイピングの多くは最終的にここの情報を取得することが目的になるかと思います。
属性(Attribute)タグの内側に含まれる情報です。タグによってはそのタグ専用の属性があります。
class属性、id属性、href属性などがあります。Webページを作成した
要素(Element)タグ・属性・コンテンツをすべてまとめて要素といいます。

HTMLをVSCodeに張り付けて分析する方法

要素やクラス名のコピペを行う時は、開発者ツール上ではやりにくいことがあるのでテキストエディタで行うと便利です。下記は開発者ツールからVS CodeにHTMLを貼り付ける方法です。

まとめ

じょじお

この記事ではブラウザの開発者ツールの使い方について学習しました。

ぽこがみさま

このブログではRPA・ノーコードツール・VBA/GAS/Pythonを使った業務効率化などについて発信しています。
参考になりましたらブックマーク登録お願いします!

Power Automate学習教材

Power AutomateをKindleで学びたい方はコチラ

▲Kindleと紙媒体両方提供されています。デスクトップフロー、クラウドフロー両方の解説がある書籍です。解説の割合としてはデスクトップフロー7割・クラウドフロー3割程度の比率となっています。両者の概要をざっくり理解するのにオススメです。

Power Automate for Desktopの基本をしっかり学習するのにオススメです。RPA界隈では有名なRPAエンジニア集団である『ロボ研』さんが監修されている解説書です。テスト用の業務Webシステム/デスクトップ業務アプリを使いながら実践形式で学習できる点が一番のメリットかなぁと思います。

Power Automate クラウドフローの入門書です。日本語の解説書は数少ないのでレアかと思います。変数の解説から代表的なアクションの解説がされているので初心者におすすめの本です。

Microsoft 365/ Power Automate / Power Platform / Google Apps Script…

Power Automateを動画で学びたい方はコチラ

▲Udemyで数少ないPower Automateクラウドフローを主題にした講座です。セール時は90%OFF(1200円~2000円弱)の価格になります頻繁にセールを実施しているので絶対にセール時に購入してくださいね。満足がいかなければ返金保証制度がありますので安心してご購入いただけます。

この記事が気に入ったら
フォローしてね!

シェアしてくれたらウレシイ(·:゚д゚:·)
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる