はじめてのPuppetter - kktworks diary

さて先日買ったPuppeteer入門スクレイピング+Web操作自動処理プログラミングだが、最初のプログラムをプログラムを動かすまでの手順も...。P.95に

Puppeteerに付属のscreenshot.jsがあります。

ってあるけど、そんなもんついてねーし（笑。少なくとも自分がインストールした1.9.0には無い（キッパリ。この本、最初のプログラムを実行できるようになるまでが長い。どういう層をターゲットにしてるのかわからないけど、１本目は「Hello, world」並にサクッと実行できた方がいいんじゃないのかね。とりあえず自分が試した最小手順を書いておく。
まずNode.jsのインストール。これはこの本の手順でOKだろう。インストール結果の確認を兼ねてnodeとrpmのversionを表示させてみる。

C:\workspace>node --version
v8.12.0

C:\workspace>npm --version
6.4.1

次はPuppeteerを動かすプログラムを格納するプロジェクト(=ファルダ）の作成。ここでは C:\workspace\pupp とする。作成したらそこをカレントにする。

C:\workspace>mkdir pupp

C:\workspace>cd pupp

そしてプロジェクトをnpm initで初期化。コマンドプロンプトが表示されるまで[Enter]を入力していくと、デフォルトのpackeage.jsonを作ってくれる。

C:\workspace\pupp>npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (pupp)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\workspace\pupp\package.json:

{
"name": "pupp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}


Is this OK? (yes)

そしてこの状態でPuppeteerをインストール。

C:\workspace\pupp>npm install puppeteer

> puppeteer@1.9.0 install C:\workspace\pupp\node_modules\puppeteer
> node install.js

Downloading Chromium r594312 - 131.6 Mb [====================] 99% 0.0s
Chromium downloaded to C:\workspace\pupp\node_modules\puppeteer\.local-chromium\win64-594312
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN pupp@1.0.0 No description
npm WARN pupp@1.0.0 No repository field.

+ puppeteer@1.9.0
added 42 packages from 22 contributors and audited 50 packages in 43.844s
found 0 vulnerabilities

デフォルトで作成されたpackage.jsonにdependenciesが追加されたことがわかる。

C:\workspace\pupp>type package.json
{
"name": "pupp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
　"puppeteer": "^1.9.0"
　}
}

ココ重要。この本ではここら辺が非常にわかりずらい、というか経験者じゃないと読み解けないのでは？

そしてプログラムを作る。ファイル名はindex.js。なぜなら↑の"main"でデフォルトで設定されているから。それに合わせる。内容は本書のP.95掲載のscreenshot.jsと同じにしよう。

const puppeteer = require('puppeteer');

(async () => {
    const TARGET_URL = 'https://yahoo.co.jp';
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto(TARGET_URL);
    await page.screenshot({path: 'example.png'});
    await browser.close();
})();

ここまででプロジェクトは以下のようになっている。

C:\workspace\pupp>dir
2018/10/21 19:29 <DIR> .
2018/10/21 19:29 <DIR> ..
2018/10/21 19:29 316 index.js
2018/10/21 19:28 <DIR> node_modules
2018/10/21 19:28 11,404 package-lock.json
2018/10/21 19:28 251 package.json

では実行。

C:\workspace\pupp>node index.js

プロジェクトにexample.pngが追加された。

C:\workspace\pupp>dir
2018/10/21 19:31 <DIR> .
2018/10/21 19:31 <DIR> ..
2018/10/21 19:31 105,473 example.png
2018/10/21 19:31 306 index.js
2018/10/21 19:28 <DIR> node_modules
2018/10/21 19:28 11,404 package-lock.json
2018/10/21 19:28 251 package.json

内容はこんな感じ。
f:id:standish77:20181021205202p:plain

以上。
とにかく最初の１本を実行するまでが長い本。VS CodeとかESLintは本質的な話じゃないから、付録にでもしたほうがもうちょっと見通しが良くなったと思う。そういうところからも「自分の知ってることを書きたかっただけの本」という匂いがするんだよね。