CSS、CSSセレクター

Webページを使った作業には、例えば「ブラウザを立ち上げて広告管理サイトにIDとパスワードを入れてログインし、キャンペーン名を選んで広告実績データをダウンロードする」、といった作業がありますね。
こうした作業を自動化するには、Webページでの操作をロボットに覚えてもらう必要があります。Coopelでは、「CSSセレクター」というものを使って、Webページでの操作をロボットに教えています。

03-03 css-css-selector 00_@@要差替@@

Webページでの操作をロボットに教える

ではいったい、CSSセレクターとは何でしょう?
まずは、その名前にも入っている「CSS」から説明します。

Tips 難しそうですよね…。でも大丈夫です!
Coopelでは、「要素の取得」という機能を使って、実際にWebページを操作するように設定できるんです。 ここでは、Coopelでブラウザ操作を設定するときに知っていると役立つよう、じつはどういう仕組みで動いているのかを少し掘り下げて説明しています。
「要素の取得」機能を使った設定方法については、「[ブラウザでの操作を記憶する(要素の取得)]」を参照してください。

CSSとは?

CSSは、HTMLと組み合わせてWebページの見た目を作るのに使われています。このWebページでも、HTMLとCSSとがセットで使われることで、ご覧の見た目になっています。
HTMLのみでWebページを作ることもできますが、CSSを使うことで、HTMLのタグで囲んだ範囲(要素)に対して、文字や背景の色などを設定することができます。
つまりCSSとは、Webページを見栄えよく設定するための情報のことです。
03-03 css-css-selector 02
03-03 css-css-selector 02 sub_@@要差替@@

実際のWebページでは、HTMLやCSSの構造は以下のようになっています。
03-03 css-css-selector 06_@@要差替@@

CSSセレクターとは?

CSSでは、Webページ上の「どの要素の」「どの項目に」「どんな設定を行うか」を指定します。「どの要素の」という部分は、Coopelを使ううえでも非常に大切です。
たとえば、以下の「CSSセレクターとは?」という要素をCSSで指定するには、「div要素の中のul要素の中にあるli要素の1番目」という情報が必要です。
03-03 css-css-selector 0503-03 css-css-selector 05 sub2_@@要差替@@
このように、どの要素を指定するかという情報のことを、CSSセレクターと呼びます。要素がWebページ上のどこにあるのかを示すので、Webページ上の住所のようなイメージです。
ロボットに正しい操作をさせるには、操作する要素を明確に教える必要があります。Webページ上の内容は、CSSと組み合わせて見栄えを実現するために、いろいろな要素に分けて書かれています。この仕組みをもとにCSSセレクターを指定することで、ボタンをクリックする、プルダウンから項目を選択する、ファイルをダウンロードするといった具体的な作業を、ロボットが操作できるようにしています。
03-03 css-css-selector 05 sub_@@要差替@@
Webサイト側でページのレイアウトなどが変更されてしまうことは防げませんが、CSSセレクターを使って要素を指定することで、位置が変わってしまっても、Webページでの操作を正しく行うことができるのです。

Tips 対象の要素のCSSセレクターは、Coopelにより自動的に読み取られますが、Google Chromeのデベロッパーツールを使って確認することもできます。
1. Google Chromeで任意のWebページを開き、右クリックして[検証]をクリックします。 画面右側にデベロッパーツールが表示されます。
2. CSSセレクタを確認したい要素のHTMLを右クリックし、[Copy]>[Copy selector]をクリックします。 クリップボードにCSSセレクタがコピーされます。

関連ヘルプ

ブラウザでの操作を記憶する(要素の取得)