パペティア Puppeteer はセレニウム Selenium よりも環境設定が楽らしい。
React（リアクト）などのSPAアプリにも向いているそうな。
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング
- 作者: ヴェネチア冒険團,美崎薫,小原亮一,酒井一成
- 出版社/メーカー: 秀和システム
- 発売日: 2018/09/19
- メディア: 単行本
- この商品を含むブログを見る
上記書籍ではグローバルインストールではうまくいかなかったとのことだが、ダメモトでやってみたら入ったので、まずはヨシとする。
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 で動作確認（ポカミス）
サンプルの最新版をぐぐったら、以下のサイトに紹介があった。
ここから公式のサンプルプログラムの GitHub へ行けたので、screenshot.js を右クリックし、VIsual Studio Code（VS Code）ワークスペース配下のフォルダへとダウンロード。
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 の一覧から右クリックでいきなり保存したのが間違いだったらしい。
GitHub Desktop インストール（寄り道）
一覧の先の解説ページを開き、「screenshot.js そのもの」をダウンロードしようとしたところ、このファイルを GitHub Desktop で開くというアイコンがあったのでクリック。
クリックするとダウンロードページがでかでかと表示された。
すでに GitHub はインストール済みなのだが、それは Desktop Classic とかいう旧式のものであり、実は、もっとカッチョイイ Electron 版バージョンがあるらしい。
確かに Classic の画面はしょぼかった。かっこいいのが使いたい。
ということでインストールしてみると、Github のアカウントも作りなさい、とのことだったので、それも作った。
その後、
をクリックすると、またダウンロードページがでかでかと表示された。
開くんと違うんかい！
･･･いや落ち着け、Chrome を再起動していなかったわ。
再び、サンプルスクリプト（一式）をダウンロード
Chrome を再起動してから、同じアイコンを再びクリックすると、GitHub Desktop と関連付けるか質問された。関連付けすると、直接起動されて以下の画面が出た。
よくわからないが、リモートレポジトリ（正本）から、ローカルにクローン（コピー）しようとしているようだ。
クローン Clone ボタンを押すと、意に反して screenshot.js だけではなく、全てのサンプルプログラムをダウンロードし始めた。
C:\Users\tombi\Documents\GitHub\puppeteer\examples
配下に、８つのサンプルがダウンロード（クローン） 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操作自動処理プログラミング
- 作者: ヴェネチア冒険團,美崎薫,小原亮一,酒井一成
- 出版社/メーカー: 秀和システム
- 発売日: 2018/09/19
- メディア: 単行本
- この商品を含むブログを見る
の推奨を無視して、puppeteer をグローバルインストールした罰があたったようだ。
しかしもう少し、粘ってみる。
puppeter を依存パッケージに指定して、起動させるようにしてみる。
先ほどは node コマンドで screenshot.js を直接起動していたが、npm コマンドで起動する方法に変更することにした。
そもそも npm init のさいに package.json を適当に作っていたため、
- dependencies 記述なし
- scripts 記述なし
だったので、まずはこれを修正する。
下記のとおり、記述を追加した。
npm run コマンドから起動してみた。
npm run main
> puppeteer@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer
> screenshot.js
画面上に盛大なエラー・ダイアログが出現
コード: 800A03EA
ソース：Microsoft JScript コンパイルエラー
どうも node.js でも Chronium でもなく、Microsoft 謹製の JavaScript 実行エンジンのほうが呼び出されているように思える。
なお screenshot.js の19行目は
なので、ほとんど起動直後に落ちているようだ。
「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 と出力されている？のは気になる。最後のログは、中を見ても、よく分からなかった。
まずは、Microsoft JScript 実行環境が呼ばれないようにする。
試しに JavaScript ファイル (.js）の関連付けを node.exe に変更してみる。
node.exe に関連付けが変更された。
JavaScript ファイル(.js) は node.exe に関連付けること
なお別のPCで、JavaScript ファイル(.js) を Visual Studio Code (VSCode) に関連付けしていた（ダブルクリックでソースを開きたいから）ところ、
という事象となりハマった。
詳しく調べると：
- npm によって package.json は処理されているようだが、スクリプト本体のコード内容は実行されていない
- Visual Studio Code の terminal で npm run を行うと、スクリプトのソースコードにフォーカス（カーソル）が移動する
- 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 をローカルインストールしないといけないのだろうか？
だが、もう少し粘ってみる。
足りないモジュールをインストールするコマンドがあるらしい。
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'
であり、先ほどと同じ。つまり、解決はしなかった。
とあるが、余計な環境変数を余計なファイルに追加するくらいなら、ローカルインストールの方が依存が少なく素直なので、グローバルインストールはギブアップ。
グローバルインストールは断念、ローカルインストールに切り替え。
まずはグローバルインストールを削除する。
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 に修正する。
修正後に、再度ローカルインストール。
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 が起動したようだが、これはノートンにとっては、初めて起動された要注意プログラムなので利用者（私）に通信を許可するかをきいてきた。
しかし次から次へと色々起きるな･･･とりあえず画面キャプチャ。
その後、ノートンの設定が「常に許可」となっていることを確認して続行した。
しかし、上のスクリーンショットを撮り、このブログに張り付ける作業に時間がかかったため、エラーが出力された。
(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 が出力された。
どうやら成功したようだ。
念のため、このファイルを削除して、もう一回実行してみたが、今度も成功。
結局、
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング
- 作者: ヴェネチア冒険團,美崎薫,小原亮一,酒井一成
- 出版社/メーカー: 秀和システム
- 発売日: 2018/09/19
- メディア: 単行本
- この商品を含むブログを見る
のとおり、グローバルインストールではうまくいかないので、ローカルインストールするのが正解だったようだ。半日、無駄にしてしまったが、これで puppeteer 開発環境は出来たと思う。
