このページの概要
Webスクレイピングをするとき、Webシステム上のボタンを押したり、テキストボックスに値を入力したり、テキストを取得したりすとき、必ず操作の対象となる要素(Element)を指定する必要があります。このページでは要素を特定するための「ClassName」(以下クラス名)という文字列をGoogleChrome(以下chrome)で取得する方法を説明します。
ClassNameの使いどころ
「ClassName」はHTMLやCSSを自分で書いたことある人にとっては馴染みのある「class」の名称のことです。「id」や「name」以上に要素に指定されていることが多く「id」や「name」が指定されていない場合に代替として使用できます。「name」同様、それ単独では要素を特定することができないため、あわせて何番目の要素であるかを指定する必要があります。
操作対象のページをchromeで開く
このページの解説では操作対象の例として当サイトのトップページにある関数リファレンスを使用します(https://funcref.com/)。
「検証」画面を開きます
開き方は2つあります。Webシステムでは右クリック禁止という場合もありますが、基本どちらかで検証画面を開くことはできるかと思います。
①「右クリック」⇒「検証」
②「Ctrl」+「Shift」+「I」
開くと下記のような画面になります。ウインドウの幅によって見た目が違うことはあると思いますが、ページ右側に「検証」画面が表示されます。
要素(Element)選択モードにします
下記ボタンをクリックし表示が青くなっていれば要素選択モードになっています。ショートカットキー「Ctrl」+「Shift」+「C」でもモード変更可能です。赤枠部分が青くなります。
調べたい要素をクリックする
上記ボタンが青くなっている状態のまま、サイトの任意の場所をクリックします。このページの解説では、関数選択のプルダウンを選択後に関数のコードが表示されるエリアをクリックしました。すると「検証」画面の表示が変化し、クリックした場所を示すHTMLの該当箇所が青背景で強調表示されます。
↓
強調表示された中から「class」をコピーする
「class=”〇〇”」となってる部分にカーソルを合わせダブルクリックします。すると下記のような表示となるためそのままコピーします。
クラス名の指定方法について
クラス名は「name」と同じく、それだけでは要素を特定することができません。同じクラス名をもつ要素の中の何番目かを指定する必要があります。さらにクラス名の場合「name」と異なる特性が1つあります。上記サンプルコードの例では「note note-vba」のようにクラス名がスペースで区切られています。これは「note」と「note-vba」という2つのクラス名が割り当てられていることを示しています。そのため、この要素は「note」「note-vba」「note note-vba」の3つのクラス名で指定することができます。
【結果】「ClassName」を取得することができました
上記の例では「note note-vba」というクラス名を取得できました
業務用PCでスクレイピングするなら「LesserScraping」
業務用PCでExcelVBA(マクロ)からWebスクレイピングをしようとすると「Selenium Basic」の導入でつまずく方は多いです。当サイトでは劣化版Selenium Basicと呼べる「Lesser Scraping」を開発し無償で公開しています。
Comment