PuppeteerでHeadlessブラウザ入門

Monday, January 28, 2019

大好きなgoogle cloud functionsでheadlessブラウザを動かしてスクレイピングできると聞きつけたので早速入門。

APIのdocumentはこちら

Amazonにログインしてみる

いままでkindleでハイライトした箇所がAmazon Kindle で確認できることは知っていたのですが、いまいち有効活用できてなかったので、自分がkindleで読んだ本の情報をスクレイピングしてなにか作ろう!と思い立ち、まずはログイン処理を実装しました。コードは以下。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
const puppeteer = require('puppeteer');
const fs = require('fs');

const cookies_path = './cookies_amazon.json';
const AMAZON_EMAIL = process.env.AMAZON_EMAIL;
const AMAZON_PASSWORD = process.env.AMAZON_PASSWORD;
const amazon_kindle_url = 'https://read.amazon.co.jp/notebook?ref_=kcr_notebook_lib';

async function login(page) {
    await page.goto(amazon_kindle_url);
    await page.waitFor(2000);

    await page.type('#ap_password', AMAZON_PASSWORD);
    await page.type('#ap_email', AMAZON_EMAIL);

    await page.click('#signInSubmit');
    await page.waitFor(5000);
    await page.screenshot({path: 'images/amazon_logined.png'});
}

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
    });
    const pc = {
        'name': 'Chrome Mac',
        'userAgent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36',
        'viewport': {
            'width': 1024,
            'height': 820,
            'deviceScaleFactor': 1,
            'isMobile': false,
            'hasTouch': false,
            'isLandscape': false
        }
    };
    const page = await browser.newPage();
    await page.emulate(pc);

    await login(page);

    await page.screenshot({path: 'images/amazon_login.png'});

    const cookies = await page.cookies();
    fs.writeFileSync(cookies_path, JSON.stringify(cookies));

    browser.close();
})();

適当なpcの設定をemulateしたのち、Amazon Kindle のサイトに飛び、環境変数から読み込んだemailとpasswordを入力してログインしています。また、最後に確認のためのスクリーンショットを撮っています。

お気付きの方も多いと思いますが、実は今回headlessブラウザ機能を使用していません。理由はheadless状態だとamazonにロボット判定されて弾かれちゃうからです。情けない限り。。

次回からはcookieを利用してちゃんとheadlessブラウザでアクセスしたいと思います。

感想

いざChromeを自動で動かしてみるとPuppeteer(人形遣い)っていうネーミングは秀逸だなと思いました。

あと、スクレイピングに詳しい方、amazonにheadlessブラウザでログインする方法教えてください!

programmingpuppeteerheadless-browserchromescraping

Seita Uchimura

Software Engineer in Tokyo

Hugoにブログカード埋め込みshortcodeを実装する

英語病みからのエモいサイト作った話