マニュアル

監視エリアの編集

2025-12-22025-12-2
...

Chromeのデベロッパーツールを使って、Webページ上の要素からCSSセレクターやXPathを取得する方法を初心者向けに解説。要素選択の操作、コピー手順、取得後の検証方法までをステップ形式で紹介し、SIGNAL WebAlertなどのツールで利用する安定したロケータを作るための注意点や使い分けのポイントもまとめています。

目次

CSSセレクター / XPath とは何か？

SIGNAL WebAlertでは監視エリアの指定に CSSセレクター / XPath と呼ばれるものを利用しています。

CSSセレクター と XPath は、Webページの中にある
 「どのボタンか」「どの入力欄か」「どの見出しか」
といった
特定の要素を正確に指定するための“住所”のようなものです。  

SIGNAL WebAlert などのweb自動化ツールでは、

  1. 「このボタンをクリックする」
  2. 「この入力欄に文字を入力する」
  3. 「この文字が表示されているか確認する」

といった操作を行うために、対象となる要素を CSSセレクター または XPath で指定します。

CSSセレクターとは？

  1. HTMLの class や id、親子関係などを使って要素を指定する方法
  2. 見やすく、壊れにくいため、基本的にはこちらを優先して使うのがおすすめ
（例）
.login-button
#email
.hero-section h1

XPathとは？

  1. HTMLの構造を「階層（道順）」で指定する方法
  2. 複雑な条件指定ができる反面、ページ構造が変わると壊れやすい
（例）
/html/body/main/div[3]/div/h1

CSSセレクター / XPathを取得する（SIGNAL WebAlert ページを例に）

SIGNAL WebAlert で登録後に監視エリアを変更する際、監視登録時と異なり、CSSセレクター / XPathを直接指定する必要があります。「CSSセレクター / XPathがなにか分からない」「どの CSS セレクター / XPath を指定すれば良いかわからない」という場合は、Google Chrome のデベロッパーツール（以下、デベロッパーツール）を使うことで、対象要素の CSS セレクター / XPath を簡単に調べることができます。

  ここでは、https://signal-webalert.com/ のページを例に、デベロッパーツールを使って要素の CSS セレクター / XPath を取得する方法を説明します。  

デベロッパーツールの起動方法

デベロッパーツールは、Google Chrome に組み込まれている Web 開発者向けツールです。起動方法はいくつかあります。

1. Chrome 右上メニューから起動する

  1. Chrome 右上の「︙」アイコンをクリックします。
  2. メニューから 「その他のツール」＞「デベロッパーツール」 を選択します。

2. 対象要素を右クリックして起動する

  1. https://signal-webalert.com/ を開きます。
  2. ページ上の任意の箇所（例：ヒーロー見出し「あなたに代わり更新を見逃さない」）の上で右クリックします。
  3. 表示されたメニューから 「検証」 をクリックします。

3. ショートカットキーから起動する

キーボードショートカットでも起動できます。

  1. Windows：Ctrl + Shift + I
  2. macOS：command + option + I

デベロッパーツールの表示位置（下・右など）は、デベロッパーツール右上の「︙」メニュー →固定サイド から変更できます。

対象要素の CSSセレクター / XPath を取得する

  ここでは、SIGNAL WebAlert トップページのメイン見出し「あなたに代わり更新を見逃さない」を例に、CSS セレクター / XPath を取得してみます。  

1. デベロッパーツールを「要素選択モード」にする

  1. デベロッパーツールの「Elements」タブが開いていることを確認します。
  2. デベロッパーツール左上のマウスカーソルと四角形のアイコン（要素選択）をクリックします。

2. ページ上で対象要素をクリックする

  1. 要素選択モードを有効にした状態で、ページ側にマウスカーソルを移動します。
  2. 見出し「あなたに代わり更新を見逃さない」の上にカーソルを重ねると、青くハイライトされます。
  3. そのままクリックすると、対応する HTML 要素が Elements パネルで選択されます。

3. CSS セレクター / XPath をコピーする

  1. Elements パネルで選択された状態の要素（行）の上で右クリックします。
  2. 表示されたメニューから、以下のいずれかを選びます。
    1. CSSセレクターをコピーする場合：「コピー」→「selectorをコピー」
    2. XPathをコピーする場合：「コピー」→「XPathをコピー」
  3. クリップボードにコピーされた値を、テキストエディタなどに貼り付けて確認します。

例えば、環境によっては以下のような値が取得されます（例）：

  1. CSS セレクター（例）
body > main > div:nth-child(3) > div > h1
  1. XPath（例）
/html/body/main/div[3]/div/h1

※実際の HTML 構造やデザイン変更により、取得される値は変わることがあります。

CSS セレクター / XPath を検証する

取得した CSS セレクター / XPath が、意図した要素を正しく指しているかどうかは、デベロッパーツール上で確認できます。

1. 検索ボックスを開く

Elements パネル内で、以下のショートカットを押します。

  1. Windows：Ctrl + F
  2. macOS：command + F

画面右上または下部に検索ボックスが表示されます。

2. CSS セレクターを入力して確認する

  1. 先ほどコピーした CSS セレクターを、検索ボックスに貼り付けます。
  2. Enter を押すと、そのセレクターにマッチする要素があれば、ページ上と Elements パネル両方でハイライトされます。
  1. 検索結果が 0 件の場合

　→ セレクターの書き方が誤っているか、ページ構造が変わった可能性があります。

  1. 複数の要素がヒットする場合

　→SIGNALでは一番最初の要素が監視対象となります。

3. セレクターをシンプルに書き換える例

自動生成された CSS セレクターは長くなりがちです。
例えば、

body > main > div:nth-child(3) > div > h1

を、HTML 構造とクラス名を確認しながら、次のように短くできる場合があります。

.hero-title

または、クラス名の組み合わせなど：

.hero-section h1

このように 「意図した要素を一意に指す」かつ「できるだけ壊れにくい」 セレクターになるよう調整していくのが理想です。

まとめ

  1. Chrome デベロッパーツールを使うと、任意の Web ページ上の要素から CSS セレクター / XPath を取得できます。
  1. 右クリックの「検証」やショートカットキーでデベロッパーツールを起動し、要素選択モードで対象要素をクリックするのが基本手順です。
  1. 取得したCSS セレクター / XPathは、検索機能を使って意図通りの要素を指しているか確認しつつ、できるだけ簡潔で壊れにくい形に調整しましょう。

SIGNALで設定する

編集したい監視サイトダッシュボード上で「設定を編集する」→「監視エリア設定」をクリックします。

1. CSS セレクター / XPath の種類を設定

Type入力欄に先ほどコピーした CSS セレクター / XPath の種類を指定してください。

  1. CSS セレクター：SELECTOR
  2. XPath: XPATH

2. CSS セレクター / XPath の設定

Element入力欄に先ほどコピーした CSS セレクター / XPath を貼り付けてください。

3. 変更を保存

「設定を更新する」をクリックして変更を保存してください。新しい設定での監視が自動的に始まります。

※監視エリア変更時は「設定をテストする」ボタンは機能しません。

関連記事