スクレイピングでCSSセレクタを取得して、繰り返しクリックする

スクレイピング結果を書き込むためのスプレッドシートを準備します。

• GetSperadsheetアクション（既存のスプレッドシートを取得）を設定します。
  • プロバイダID欄には、使用するアカウントを選択します。
    • アカウントは設定欄横のマークから設定が可能です。
  • スプレッドシートIDには、書き込むスプレッドシートを選択します。
    • 書き込みたいスプレッドシートのURL、もしくは、設定欄横のスプレッドシートのマークから設定が可能です。

参考：CSVを表計算ソフトに転記する

今回のクリック対象は、以下Webページの中程にあります。
https://autoro.io/blogs/

各記事をクリックするためには、複数のCSSセレクタが必要です。

しかしながら、クリックアクションを何十個も設定し、何十回とCSSセレクタを指定することは現実的ではありません。

そこで、ScrapePageアクションと繰り返し処理(ForEach)を組み合わせることで、同様のことが実現できます。

ScrapePageアクションで複数のCSSセレクタを取得できます。これを繰り返し処理の対象とすれば、記事をクリックするアクションは1つで済みます。

今回クリックさせたい対象の各記事のCSSセレクタは、それぞれ共通する部位を持っています。

この「共通する部位」をScrapePageのCSSセレクタに指定することで、共通する部位を持つ全ての要素とCSSセレクタを取得できます。

参考:同じことをやっている例：検索結果をスクレイピングする。

よって、まずはCSSセレクタの共通する部位を探してみます。方法は以下となります。

• クリックしたい各記事が共通で持っているCSSセレクタを確認する。

共通のCSSセレクタを確認するには、Chromeの検証ツールを使用します。

•  サイトを開きます　https://autoro.io/blogs/
• スクレイピングしたい箇所、今回は各記事のリンクのあたりにカーソルを合わせます。
• 右クリック→検証と押すと、検証画面が開き、右クリックを押した箇所のコード部分がハイライトされます。

検証画面では、カーソルを合わせた部分が実際の画面で、どの位置にあたるのかを調べることが出来ます。

これを参考に、共通したCSSセレクタを調査します。

確認をすると、以下のCSSセレクタが共通で持っていそうでした。

.c-list-blog__item > a

要素が共通しているのか、検証画面で検索を使用して確認する。

• 検証画面でCtrl+Fを入力します。（macの場合は⌘+F）
• 検証画面下部分にテキストを入力する欄が出現します。
• 調べたいCSSセレクタを入力すると、CSSセレクタの検索が可能です。

検索がヒットすると、Web画面と検証画面でどの部分がヒットしているかをハイライトします。

今回取得したCSSセレクタを検索してみると、9件ヒットし、内容も各記事のクリックで間違いなさそうでした。

CSSセレクタの作成方法については下記ページが便利です。

参考：CSSセレクタの取得方法

参考：CSSセレクタの取得・確認方法（応用編

調べたCSSセレクタをScrapePageアクションへ設定します。

• OpenBrowserアクション（ブラウザを開く）を設定します
  • URLの欄には、「https://autoro.io/blogs/」を入力します。
• ScrapePageアクション（スクレイピング）を設定します。
  • CSSセレクタには、「.c-list-blog__item > a」を入力します。

ここまでで一度実行して、スクレイピングの結果を確認します。

共通する要素が取得できたことが確認できます。

項目「selector」の値がCSSセレクタとなります。

ScrapePageアクションの実行結果はリスト形式になっているので、ForEachの繰り返しを利用して、各要素を取り出していきます。

• ForEachアクション（各要素について繰り返す）の繰り返しを設定します。
  • 「繰り返すリスト」には、ScrapePageのアウトプットを紐づけます
  • 「要素を格納する変数名」には、「SeminarList」と入力します。

ForEachアクションで囲むようにし、以下のように設定をします。

• Clickアクション（クリック）を設定します。
  • ブラウザの欄には、OpenBrowserアクションのアウトプットを設定します。
  • CSSセレクタの欄には、${SeminarList.selector}と指定します。
    • ${SeminarList.selector}は、スクレイピングで取得したCSSセレクタです。
  • 詳細設定を開き、記事ページに遷移するまでの待機時間として、実行後待機の欄に、4000(4秒)設定します。

•  ScrapePageアクションを設定します。
  • ブラウザ欄には、Clickアクションのアウトプットを設定します。
  • CSSセレクタ欄には、h3,h2を設定します。
  • 詳細設定を開き、「文字情報のみ抽出」を有効にします。

CSSセレクタに設定したh3,h2は見出しを表すものになります。

設定方法については下記ページをご覧ください。

CSSセレクタの取得方法

「ScrapePageアクションの文字情報のみ取得」の設定を有効にすると、スクレイピングの結果が文字情報のみが配列で出力されます。

この形であれば、スプレッドシートなどに、そのまま書き込む値として設定が可能です。

見出しをスプレッドシートへ貼り付けます。スプレッドシートへの書き込みはAppendValuesアクション（末尾に値を追加）を使用して行います。

• AppendValuesアクションを設定します。
  • スプレッドシート欄には、1で取得したGetSpreadsheetアクションのアウトプットを指定します。
  • 範囲欄には、見出し情報を書き込む範囲を指定します。右側の表のマークをクリック、もしくはシート名!範囲の指定が可能です。
  • 値にはScrapePageアクションのアウトプットを指定します。

スプレッドシートへ書き込む際の範囲指定の方法については、こちらのページをご覧ください。

スプレッドシート/ワークブックの範囲指定

スプレッドシートへの転記が終了したため、次の記事に移動する必要があります。

ロボットはシートへの転記が終了した時点では記事の詳細ページを開いています。

しかし6の記事のクリックで設定したCSSセレクタは、記事の一覧ページ（冒頭の画像のページ）のものになっています。

そのため、記事の一覧ページに戻るアクションを追加する必要があります。

ここでは単純化のため、GoToアクション（URLへ遷移）を使用します。

• GoToアクション（URLへ遷移）を設定します。
  • ブラウザ欄には、Clickアクションのアウトプットを設定します。
  • URL欄には、繰り返しの起点であるトップページのURLhttps://autoro.io/blogs/を設定します。
  • ページが遷移する時間として、詳細設定を開き、実行後待機を4000（4秒）設定します。