Webページのテーブル（表）からデータを取得

80 views

この記事では、「Webページのテーブル（表）からデータを取得する方法」について紹介します。

アクションは、ExtractDataFromTableアクション（テーブルデータを取得）を使用します。

　テーブルデータとは

Webページの中で、情報を見やすくまとめたいときに便利なのがテーブル（表）です。
たとえば、次のようなものを作りたいときに使います。

料金表
予定表
商品一覧
成績表

文章で並べるよりも、テーブルにすると「どれがいくらか」「どの日に何があるか」がすぐ分かります。
Webページのテーブルは、Excelと同じように縦（列）と横（行）で情報を並べて作ります。
たとえば「商品名」と「価格」を並べた以下のようなテーブルです。

商品名　価格
りんご　100円
バナナ　120円

Webページ作成の言語であるHTMLでテーブルを作るときは、主に次の3つのタグを組み合わせます。

表全体を作る　→　<table>
1行を作る　→　<tr>
1つのマス（セル）を作る　→　<td>

※最もシンプルなテーブルの例

<table>
  <tr>
    <td>りんご</td>
    <td>100円</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>120円</td>
  </tr>
</table>

このコードをWebページに入れると、以下のようなテーブルが表示されます。

1行目：りんご / 100円
2行目：バナナ / 120円

ExtractDataFromTableアクションでは、<table> </table>で作成されたテーブルから各セルのデータを取得できます。
そのため、テーブル形式ではあるものの、<table> </table>を使わずに作成されたテーブルのデータは、ExtractDataFromTableアクションでは取得できません。

この場合は、ScrapePageアクション（スクレイピング）を使用して各データを取得します。

参考：WebページをスクレイピングしてExcelに書き込む

参考：検索結果のスクレイピング

　今回のワークフローの概要

今回作成するワークフローの概要は以下の通りです。

AUTOROドキュメントのOpenBrowserアクションの説明ページにアクセス
パラメータ情報を取得
取得した情報をスプレッドシートに貼り付ける

　ワークフローの設定例

下記手順にてワークフローを設定します。

　1.スプレッドシートの取得

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

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

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

　2.テーブルデータの確認

今回は以下Webページ内の「パラメータ」のテーブルを取得します。

https://docs.autoro.io/actions/browser#openbrowser

しかし、前述したように、このテーブルが<table> </table>で作成されていなければ、ExtractDataFromTableアクションでデータ取得できません。
まずは、このテーブルが<table> </table>で作成されていることを、Chromeの検証ツールを使用して確認します。

サイトを開きます　https://docs.autoro.io/actions/browser#openbrowser
テーブルにカーソルを合わせ、右クリック→検証を選択します
検証画面上のコード部分で、テーブル全体が選択される箇所を探します

確認をすると、このテーブルは<table>で作成されているようです。

テーブルのCSSセレクタを取得します。

■方法１：検証画面上での取得

■方法２：AUTORO Assistantでの取得

本記事内では、AUTORO Assistantで取得した以下のCSSセレクタを使用します。

table:nth-of-type(1)

※セルを特定する<tr>や<td>などがついたCSSセレクタを、ExtractDataFromTableアクションで使用しても、<table>全体のデータを取得可能です。

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

　3.ExtractDataFromTableアクションの設定

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

OpenBrowserアクション（ブラウザを開く）を設定します。
- URLの欄には、「https://docs.autoro.io/actions/browser#openbrowser」を入力します。
ExtractDataFromTableアクション（テーブルデータを取得）を設定します。
- CSSセレクタには、「table:nth-of-type(1)」を入力します。

　4.取得したテーブルデータをスプレッドシートへ貼り付け

取得したテーブルデータをスプレッドシートへ貼り付けます。

UpdateCellsアクション（セルの値を更新）を設定します。
- スプレッドシート欄には、「1」で取得したGetSpreadsheetアクションのアウトプットを指定します。
- 範囲欄には、見出し情報を書き込む範囲を指定します。右側の表のマークをクリック、もしくはシート名!貼り付け開始セルの指定が可能です。
- 値にはExtractDataFromTableアクションのアウトプットを指定します。

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

ワークフロー実行結果
ワークフロー設定内容

# 既存のスプレッドシートを取得
+get_spreadsheet_1:
  action>: GetSpreadsheet
  display_name>: '既存のスプレッドシートを取得'
  provider: ''
  spreadsheet_id: ''
  private: false
  meta:
    display:
    action:
      disabled: false

# ブラウザを開く
+open_browser_1:
  action>: OpenBrowser
  display_name>: 'ブラウザを開く'
  url: 'https://docs.autoro.io/actions/browser#openbrowser'
  lang: 'ja-JP'
  headless: true
  confirm: true
  windowSize: '1920 x 1080'
  useShadowDomSelector: false
  private: false
  meta:
    action:
      disabled: false

# テーブルデータを取得
+extract_data_from_table_1:
  action>: ExtractDataFromTable
  display_name>: 'テーブルデータを取得'
  browser: +open_browser_1
  selector: 'table:nth-of-type(1)'
  ignoreError: false
  private: false
  meta:
    action:
      disabled: false

# セルの値を更新
+update_cells_1:
  action>: UpdateCells
  display_name>: 'セルの値を更新'
  spreadsheet: +get_spreadsheet_1
  range: 'シート1!A1'
  values: +extract_data_from_table_1
  private: false
  meta:
    action:
      disabled: false

［参考記事］

＜GoogleSpreadsheet＞スプレッドシート/スプシ
テーブル

このページは役に立ちましたか？

サイトを見て解決しない場合はAUTOROにログインし、チャットよりお問い合わせください。