[前の投稿] ホーム / 開発試行 /

GASを使ったWebスクレイピング（POST対応）

2024/04/28

cloud 開発試行

GAS（Google Apps Script）とPhantomJsCloudを使用して、AWSのHealthDashBoardの全世界Eventをスクレイピングしてみました。
ヘッドレスブラウザを利用したスクレイピングの試行となります。取得した情報に対してAIによる解説ができることを最終目標としています。

以下サイトを参考にさせていただいております。


目次[非表示]

GAS（Google Apps Script）の基本

>GAS（Google Apps Script）とは

Googleのさまざまなサービスと連携して自動化や拡張機能の開発を行うためのJavaScriptベースのプラットフォームです。GmailやGoogleスプレッドシートの作業を自動化したり、ウェブアプリを開発したりすることができます。Googleアカウントさえあれば定期的な運用実行もできるため、ローコストでのWebサイト運用ができる可能性があります。

ヘッドレスブラウザとは

ヘッドレスブラウザは、通常のウェブブラウザと同様の環境で自動制御機能を提供するものの、グラフィカルユーザインタフェース（GUI）を持たないウェブブラウザを指します。ユーザーがサイトをテストしたり、JavaScriptライブラリを評価したりする際に有用です。ヘッドレスブラウザはコマンドラインまたはネットワーク通信を通じて実行され、HTMLを解釈し描画できます。代表的なヘッドレスブラウザには、FirefoxのヘッドレスモードやヘッドレスChrome、PhantomJSなどがあります。


GASでの実装方法

GoogleDrive上でgsheetを作成し、Apps Script上で処理を実行していきます。AppScriptの準備などは参考サイトをご覧ください。

AWS Health DashBoardの全世界イベントのタグ情報を確認します

細かい点は説明は省略しますが、Webサイト上でユニークと判断できるタグと属性の情報を取得します。Chromeの開発ツールがおススメです。
リンクボタン２つとイベント一覧の部分を確認しておきます。

Parserのインストール

スクレイピング関数の準備

Phantomjscloudに、受け渡すブラウザ操作の情報を定義します。overseerScriptを入力にしたほうが良かったような気がします。


  
  // phantomjscloud.comのヘッドレススクレイピング（POST）
  function scrapingPost(target_url) {

    // スクレイピングの操作に関するペイロードを返す関数
    const payload = () => (
      {
        url: target_url,
        renderType: 'html',
        outputAsJson: true,
        overseerScript: (` \
        await page.waitForSelector('button[class="awsui_segment_8cbea_1od01_103"]'); \
        page.click('button[class="awsui_segment_8cbea_1od01_103"]'); \
        await page.waitForNavigation(); \
        await page.waitForSelector('a[data-testid="status-history-tab-ALL"]'); \
        page.click('a[data-testid="status-history-tab-ALL"]'); \
        await page.waitForNavigation(); \
        `)
      }
    );

    // PhantomJsCloudAPIを呼ぶUrlFetchApp.fetch()で使用するオプション（上記ペイロードを伴うpostメソッド）を返す関数
    const options = payload => ({
    'method' : 'post',
    'payload' : JSON.stringify(payload)
    });

    // API_KEYの呼び出し
    const API_KEY = ""; #API_KEYを取得して設定
    // リクエストを行うURLを設定
    var api_url = "https://phantomjscloud.com/api/browser/v2/"+ API_KEY +"/";

    const response = UrlFetchApp.fetch(api_url, options(payload()));
    const data = JSON.parse(response.getContentText())["content"]["data"];

    return data;
  }

Webスクレイピングの実行

  
  function myFunction() {
    // AWSのHealthDashBoardステータスよりイベントを取得する。
    var url = 'https://health.aws.amazon.com/health/status';

    // Postを実行し、クリックイベントを起こし、イベントを取得する
    var html = scrapingPost(url);

    // Parserで要素間のテキストを抽出する。イベントのテーブルをすべて。
    var venues = Parser.data(html).from("
").to('
').build();

    // 抽出結果をファイルに書き出す。
    const folder = DriveApp.getFolderById(""); # GoogleDriveのフォルダIDを設定
    const blob = Utilities.newBlob('', 'text/csv', "test.txt").setDataFromString(venues, 'UTF-8');   // Blob を作成する
    folder.createFile(blob);  // ファイルに保存
  }

結果としては以下の通りになります。


まとめ

ヘッドレスブラウザの操作はコツがいりますが、フォーマットがあれば比較的簡単に作成できます。Puppeteerとコマンドが共有されているとのことです。ご活用ください。