「Puppeteer 입문 스크래핑＋Web 조작 자동 처리 프로그래밍」이 움직이지 않는 샘플 코드①

「Puppeteer 입문 스크래핑＋Web 조작 자동 처리 프로그래밍」을 구입해, 지금 공부중입니다.
이것 ↓
Puppeteer 입문 스크래핑 + 웹 조작 자동 처리 프로그래밍
예로서 사용하고 있는 히데와 시스템의 웹 사이트가, 본서 집필시와는 크게 바뀌어 버린 것 같아 움직이지 않는 샘플 코드가 있을까요? 나중에 사용할 수있는 코드는 모처럼이므로 수정하고 남겨두려고 생각했습니다. 우선 puppeteer에 대해 puppeteer는 Google의 Chrome DevTools Team이 2017년에 개발했습니다. node.js의 라이브러리로 작동합니다. htps : // 트리 푸페테에 r. 아 ps포 t. 코m/
가서 6 줄의 간단한 데모를 경험할 수 있습니다.

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://qiita.com');

console.log(await page.content());
await page.screenshot({path: 'screenshot.png'});

await browser.close();

https://qiita.com 를 브라우저에서 열고 스크린 샷을 PNG 파일로 캡처하는 코드입니다.
※ 데모 코드는 await page.goto(https://example.com) 로 되어 있으므로 await page.goto(https://qiita.com) 로 다시 썼습니다.


7장의 2, 「히데와 시스템의 신간 일람의 상세를 취득한다」

이 샘플은 다용도가 높다고 생각합니다.
책이 없는 분들을 위해 해설하면
히데와 시스템의 신간 안내( https://www.shuwasystem.co.jp/newbook.html )에 있는 신간 일람으로부터, 각각의 신간을 클릭해 그 상세 페이지를 열고, 그 타이틀과 상세 정보를 CSV에 일람으로 해 출력한다. 라는 코드입니다.

히데와 시스템의 신간 안내 페이지( https://www.shuwasystem.co.jp/newbook.html )는 지금은 없어져 버려, 신간 일람은 톱 페이지( https://www.shuwasystem.co.jp )에 옮겨, 태그등도 꽤 바뀌고 있습니다. 히데와 시스템 사이트가 메이저 업데이트 해 버린 것 같습니다.

그에 따라 다음과 같이 코드를 변경했습니다.

/// 修正日（2019年2月7日）修正箇所は'///--修正--///'の行です
/// 注１：headlessはfalseにしてある。そのほうが動きが目に見えて素敵
/// 注２：当方ubuntu環境なのでCSVへの保存はUTF-8にしてある

const puppeteer = require('puppeteer');
const stringify = require('csv-stringify');
const iconv = require('iconv-lite');
const fs = require('fs');
const path = require('path');
const delay = require('delay');

const getInfoFromChildPage = async (browser, url) => {
  const childPage = await browser.newPage();
  await childPage.goto(url);
 ///--修正--/// const h1Title = await childPage.evaluate(() => document.querySelector('h1.syoseki').textContent);　＞'h1.shoseki'はなくて、h1.titleType1になってる
  const h1Title = await childPage.evaluate(() => document.querySelector('h1.titleType1').textContent);
 ///--修正--/// const result = await childPage.evaluate(() => Array.from(document.querySelectorAll('.norm td')).map(td => td.textContent));　＞.norm tdもなくて、div id='bookSample'になってる
  const result = await childPage.evaluate(() => Array.from(document.querySelectorAll('#bookSample')).map(bookSample => bookSample.textContent));
  await childPage.close();
  result.unshift(h1Title);
  return result;
};

/**
 * メインロジック.
 */
(async () => {
  // Puppeteerの起動.
  const browser = await puppeteer.launch({
    headless: false, // Headlessモードで起動するかどうか.
    slowMo: 50, // 指定のミリ秒スローモーションで実行する.
  });

  // 新しい空のページを開く.
  const page = await browser.newPage();

  // view portの設定.
  await page.setViewport({ width: 1200, height: 800 });

  // 一覧ページである 新刊案内 ページを開く.
  ///--修正--///await page.goto('http://www.shuwasystem.co.jp/newbook.html'); >このURLはもうない
  await page.goto('http://www.shuwasystem.co.jp');


  // 新刊案内の各ページへのリンク先を取得.
///--修正--///const results = await page.evaluate(() => Array.from(document.querySelectorAll('#sinkan dt a')).map(a => a.href));　＞#sinkanはもうない。
///--修正--///　トップページに#main_column > div.listType1 > ul > li:nth-child(1) > div.tool_tip > div > a というセレクタで新刊がブロックで並んでいる
  const results = await page.evaluate(() => Array.from(document.querySelectorAll('div.tool_tip > div > a')).map(a => a.href));

  // それぞれの新刊の詳細情報ページの情報を取得する.

  const csvData = []; // CSVに保存するための情報を保持する.
  for (const result of results) {
    await delay(1000); // スクレイピングする際にはアクセス間隔を1秒あける.
    // console.log(result);
    const texts = await getInfoFromChildPage(browser, result);
    csvData.push(texts);
  }

  // この実装だと同時多発的なアクセスとなり、相手先のサーバーに負荷がかかりすぎるため推奨しない.
  // const csvData = await Promise.all(results.map(m => getInfoFromChildPage(browser, m)));

  // ここからはCSVに出力するためだけの処理.
  // csvDataを文字列化する.
  stringify(csvData, (error, csvString) => {
    // ファイルシステムに対してファイル名を指定し、ファイルストリームを生成する.
    const writableStream = fs.createWriteStream(path.join(__dirname, '秀和システム新刊案内.csv'));
    // csvStringをShift_JISで書き出す.
    writableStream.write(iconv.encode(csvString, 'UTF-8'));
  });

  // ブラウザの終了.
  await browser.close();
})();

별로 수정 개소는 많지 않지만, 초보자나, 경험자라도 오랜만에 보고 움직이지 않으면 「아아응

기초편에도 히데와 시스템 사이트를 이용한 코드가 조금 있었지만 싱크대 읽기이므로 확인하지 않았습니다. 요청이 있으면 수정합니다.

아직 도중입니다만, 뒤쪽을 파라파라 넘기면 테스트 구동 개발의 프레임워크의 실장등도 있어 재미있을 것 같다.
책의 외형이나 입문이라는 타이틀로는 좀처럼 수비 범위가 넓은 책입니다.

「Puppeteer 입문 스크래핑＋Web 조작 자동 처리 프로그래밍」이 움직이지 않는 샘플 코드②