そういう、モデルなんです。

ビジネスモデル、設計図、模型などの現状と動向を考察、関連書籍の紹介

画面操作を自動化するツール Puppeteer (パペティア)グローバルインストールは失敗に終わる

パペティア Puppeteer はセレニウム Selenium よりも環境設定が楽らしい。
React(リアクト)などのSPAアプリにも向いているそうな。

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

 

上記書籍ではグローバルインストールではうまくいかなかったとのことだが、ダメモトでやってみたら入ったので、まずはヨシとする。

ここから悲劇が始まった…

puppeteer パッケージをインストール

npm install -g --save puppeteer

> puppeteer@1.15.0 install C:\Users\tombi\AppData\Roaming\npm\node_modules\puppeteer
> node install.js

Downloading Chromium r650583 - 144.8 Mb [====================] 100% 0.0s
Chromium downloaded to C:\Users\tombi\AppData\Roaming\npm\node_modules\puppeteer\.local-chromium\win64-650583
+ puppeteer@1.15.0
added 43 packages from 22 contributors in 28.838s

一見、全く問題なし

Chromiumと puppeteer がまとめてインストールされたようだ。

Node.js および VS Code のプロジェクト新規作成

npm init

ドキュメントフォルダ配下に projects、さらにその下にpuppeteer フォルダを作成した後、npm init 。その後、VS Codeワークスペースにフォルダを追加した。

puppeteer 公式サンプルプログラム screenshot.js で動作確認(ポカミス)

サンプルの最新版をぐぐったら、以下のサイトに紹介があった。

qiita.com

ここから公式のサンプルプログラムの GitHub へ行けたので、screenshot.js を右クリックし、VIsual Studio CodeVS Codeワークスペース配下のフォルダへとダウンロード。

f:id:tombi-aburage:20190428090221p:plain

screenshot.js

VS Code のターミナル TERMINAL からさっそく起動

node .\screenshot.js

C:\Users\tombi\Documents\projects\puppeteer\screenshot.js:7
<!DOCTYPE html>
^

SyntaxError: Unexpected token <
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)

エラー?サンプルなのに?

puppeteer パッケージをインストール

ファイルの中身をチェックしてみたら、「screenshot.js そのもの」ではなくて、「screenshot.js の解説ページの html ファイル」だった…

GitHub の一覧から右クリックでいきなり保存したのが間違いだったらしい。

ポカミスでした orz

GitHub Desktop インストール(寄り道)

一覧の先の解説ページを開き、「screenshot.js そのもの」をダウンロードしようとしたところ、このファイルを GitHub Desktop で開くというアイコンがあったのでクリック。

f:id:tombi-aburage:20190428091427p:plain

クリックするとダウンロードページがでかでかと表示された。

すでに GitHub はインストール済みなのだが、それは Desktop Classic とかいう旧式のものであり、実は、もっとカッチョイイ Electron 版バージョンがあるらしい。

f:id:tombi-aburage:20190428091655p:plain

確かに Classic の画面はしょぼかった。かっこいいのが使いたい。

ということでインストールしてみると、Github のアカウントも作りなさい、とのことだったので、それも作った。

その後、

f:id:tombi-aburage:20190428091427p:plain

をクリックすると、またダウンロードページがでかでかと表示された。 
開くんと違うんかい!

・・・いや落ち着け、Chrome を再起動していなかったわ。

再び、サンプルスクリプト(一式)をダウンロード

Chrome を再起動してから、同じアイコンを再びクリックすると、GitHub Desktop と関連付けるか質問された。関連付けすると、直接起動されて以下の画面が出た。

f:id:tombi-aburage:20190428093523p:plain

よくわからないが、リモートレポジトリ(正本)から、ローカルにクローン(コピー)しようとしているようだ。

f:id:tombi-aburage:20190428093742p:plain

Cloning Puppeteer ...

クローン Clone ボタンを押すと、意に反して screenshot.js だけではなく、全てのサンプルプログラムをダウンロードし始めた。

 C:\Users\tombi\Documents\GitHub\puppeteer\examples

配下に、8つのサンプルがダウンロード(クローン) Clone されたようだ。

やった後で言うのも何だが、この GitHub Desktop のインストール作業は余計だったな。

再び、サンプルプログラム screenshot.js の動作確認(失敗)

プロジェクト(ワークスペース)に screenshot.js をコピーしてから、VS Code のターミナル TERMINAL より再び起動した。

node .\screenshot.js

PS C:\Users\tombi\Documents\projects\puppeteer> node .\screenshot.js
internal/modules/cjs/loader.js:584
throw err;
^

Error: Cannot find module 'puppeteer'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (C:\Users\tombi\Documents\projects\puppeteer\screenshot.js:19:19)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)

モジュール puppeteer を発見できていないとのこと。

やはり、また起きたか…
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

 

の推奨を無視して、puppeteer をグローバルインストールした罰があたったようだ。

しかしもう少し、粘ってみる。

puppeter を依存パッケージに指定して、起動させるようにしてみる。

先ほどは node コマンドで screenshot.js を直接起動していたが、npm コマンドで起動する方法に変更することにした。

そもそも npm init のさいに package.json を適当に作っていたため、

  • dependencies 記述なし
  • scripts 記述なし

だったので、まずはこれを修正する。

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

下記のとおり、記述を追加した。

{
"name": "puppeteer",
"version": "1.0.0",
"description": "",
"main": "screenshot.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
,"main": "screenshot.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"puppeteer" : "^1.15.0"
}
}

npm run コマンドから起動してみた。

npm run main

> puppeteer@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer
> screenshot.js

画面上に盛大なエラー・ダイアログが出現

コード: 800A03EA
ソース:Microsoft JScript コンパイルエラー

f:id:tombi-aburage:20190428100516p:plain

どうも node.js でも Chronium でもなく、Microsoft 謹製の JavaScript 実行エンジンのほうが呼び出されているように思える。

JScript は、お呼びでない!

なお screenshot.js の19行目は

const puppeteer = require('puppeteer');

なので、ほとんど起動直後に落ちているようだ。

「OK」ボタンをクリックすると、ターミナル TERMINAL に、ゾロゾロと続きのエラーが出力された。

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! puppeteer@1.0.0 main: `screenshot.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the puppeteer@1.0.0 main script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-04-28T01_10_54_431Z-debug.log

puppeteer のバージョンは 1.4.0 のはずなのに、1.0.0 と出力されている?のは気になる。最後のログは、中を見ても、よく分からなかった。

node_modules missing ?

まずは、Microsoft JScript 実行環境が呼ばれないようにする。

f:id:tombi-aburage:20190428103048p:plain

Microsoft ® Windows Based Script Host に関連付けされている

試しに JavaScript ファイル (.js)の関連付けを node.exe に変更してみる。

f:id:tombi-aburage:20190428103323p:plain

node.exe に関連付けが変更された。

f:id:tombi-aburage:20190428103602p:plain

JavaScript ファイル(.js) は node.exe に関連付けること

なお別のPCで、JavaScript ファイル(.js) を Visual Studio Code (VSCode) に関連付けしていた(ダブルクリックでソースを開きたいから)ところ、

  • npm run を実行しても、一切スクリプトが実行されない
    console.log('test'); しか書いていないスクリプトなのに何も出力されない

という事象となりハマった。

詳しく調べると:

  1. npm によって package.json は処理されているようだが、スクリプト本体のコード内容は実行されていない
  2. Visual Studio Code の terminal で npm run を行うと、スクリプトソースコードにフォーカス(カーソル)が移動する
  3. Node.js command prompt で npm run を行うと、Visual Studio Code が起動し、スクリプトソースコードが開く

という事象だった。2の挙動は微妙な変化だったので気づかなかったが、3の挙動より、関連付けが原因らしいと、ようやくわかった。(2時間浪費)

Windows 環境では、

  • JavaScript ファイル(.js) は node.exe に関連付けること

は必須であり、それを勝手に変更してはいけないようだ。

Microsoft JScript コンパイルエラー」は消えたが…

再び npm から起動。

Microsoft JScript コンパイルエラー」のダイアログは出なくなった。一歩前進。
しかし、かわりにスタックトレースが吐き出された。

npm run main

> puppeteer@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer
> screenshot.js

> puppeteer@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer
> screenshot.js

internal/modules/cjs/loader.js:584
throw err;
^

Error: Cannot find module 'puppeteer'
スタックトレースは中略)

npm ERR! code ELIFECYCLE
(内容は先ほどと同じなので、以下略)

さっきのエラーと同じだな...

あいかわらず、

npm WARN Local package.json exists, but node_modules missing, did you mean to install?

のように警告されているので、やはり puppeter をローカルインストールしないといけないのだろうか?

だが、もう少し粘ってみる。

足りないモジュールをインストールするコマンドがあるらしい。

 Cannot find module 'puppeteer’ でぐぐった。

qiita.com

に書かれていた

npm install -g npm-install-missing

C:\Users\tombi\AppData\Roaming\npm\npm-install-missing -> C:\Users\tombi\AppData\Roaming\npm\node_modules\npm-install-missing\bin\npm-install-missing
+ npm-install-missing@0.1.4
added 429 packages from 802 contributors in 22.112s

node.js のインストール先配下に、たくさんのファイルが追加されたようだ。

しかし、 どうやらpuppeteer が追加されたわけではなく、npm run main の結果は

Error: Cannot find module 'puppeteer'

であり、先ほどと同じ。つまり、解決はしなかった。

qiita.com

 とあるが、余計な環境変数を余計なファイルに追加するくらいなら、ローカルインストールの方が依存が少なく素直なので、グローバルインストールはギブアップ。

グローバルでは無理。

グローバルインストールは断念、ローカルインストールに切り替え。

まずはグローバルインストールを削除する。

npm uninstall -g puppeteer

removed 43 packages in 0.836s

ローカルインストールする。 

npm install --save puppeteer

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "puppeteer" under a package
npm ERR! also called "puppeteer". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-04-28T03_05_23_475Z-debug.log

プロジェクト(ワークスペース)フォルダが puppeteer という名前だと、ローカルインストールさせてくれないのだろうか?

プロジェクト(ワークスペース)フォルダをリネーム

を行ってから再度インストール

npm install --save puppeteer

同じエラーだった。どうやらフォルダ名は関係がなかったらしい。
とはいえ、元の紛らわしいフォルダ名に戻す必要もないので、そのまま続行。

package.json の name を変更

package.json の "name" が "puppeteer" であることが問題だったらしい。
こちらも puppeteer_sample に修正する。

{
"name": "puppeteer_sample",
"version": "1.0.0",
"description": "",
"main": "screenshot.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"main": "screenshot.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"puppeteer": "^1.15.0"
}
}

修正後に、再度ローカルインストール。

npm install --save puppeteer

> puppeteer@1.15.0 install C:\Users\tombi\Documents\projects\puppeteer_sample\node_modules\puppeteer
> node install.js

Downloading Chromium r650583 - 144.8 Mb [====================] 100% 0.0s
Chromium downloaded to C:\Users\tombi\Documents\projects\puppeteer_sample\node_modules\puppeteer\.local-chromium\win64-650583
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN puppeteer_sample@1.0.0 No description
npm WARN puppeteer_sample@1.0.0 No repository field.

+ puppeteer@1.15.0
added 43 packages from 22 contributors and audited 50 packages in 29.446s
found 0 vulnerabilities

一見、全く問題なし

さっそく、サンプルスクリプトを起動する。

npm run main

ノートンファイアウォール警告が出現した。

Chromium が起動したようだが、これはノートンにとっては、初めて起動された要注意プログラムなので利用者(私)に通信を許可するかをきいてきた。

しかし次から次へと色々起きるな・・・とりあえず画面キャプチャ。

その後、ノートンの設定が「常に許可」となっていることを確認して続行した。

f:id:tombi-aburage:20190428122132p:plain

NORTON

 しかし、上のスクリーンショットを撮り、このブログに張り付ける作業に時間がかかったため、エラーが出力された。

(node:24432) UnhandledPromiseRejectionWarning: TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
(以下略)

たんなるタイムアウトのようなので、もう一度、実行してみる。

npm run main

> puppeteer_sample@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer_sample
> screenshot.js

PS C:\Users\tombi\Documents\projects\puppeteer_sample>

ついにエラーが出ずに終了した。

puppeteer_sample 配下に、example.png が出力された。

どうやら成功したようだ。

f:id:tombi-aburage:20190428122652p:plain

example.png

念のため、このファイルを削除して、もう一回実行してみたが、今度も成功。 

全く問題なし

結局、

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

 

のとおり、グローバルインストールではうまくいかないので、ローカルインストールするのが正解だったようだ。半日、無駄にしてしまったが、これで puppeteer 開発環境は出来たと思う。