たそぶろぐ。

ゆるゆると続けるつもりのブログ

Puppeteerを使ってみた(Windows)

今回はJavaScriptから。

諸々の都合でPuppeteerを使って色々やることになったので、備忘録的な感じで記しておく。っていうかWindowsでやってる人少なくね?
Puppeteerってなんぞや? っていう人は各自で調べてもらえるとありがたい。

環境
OS:Windows10 Home
エディタ:TeraPad(何でもいいけど標準のメモ帳は窓から投げ捨てような)

Node.jsのバージョンが6.11.3とかいう化石だったのでアプデしておく。(割と最近入れたはずなのだが…) 入ってないなら入れればいいんじゃないかな。(編集時のLTS最新版は8.11.1)
Node.js


そして本題のPuppeteerを入れよう。自分はnpm使ってやった、というかそれ以外の方法がイマイチ分からなかった。コマンドとかはggってくれ。

とりあえず習作として、Googleの検索窓に何かしら打ち込んで検索ボタンを押下するプログラムを作ってみた。

あと、検索する語句は特に思いつかなかったので"puppeteer"にした。

const puppeteer = require("puppeteer");//puppeteer

(async() => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto("https://www.google.co.jp/");//Googleを開く
  await page.type("#lst-ib","puppeteer");//検索窓に"puppeteer"と入力
  await page.click("input[type='submit']");//検索ボタン押下

  await page.waitFor(5000);//5000ms待機
  await page.screenshot({path: "SS.png",fullPage: true});//フルサイズでスクショを撮り保存

  browser.close();
})();

やってることはプログラム中に大体書いてる。

分かりにくいのは検索窓とボタンのとこ辺りなのかな。Googleのソースは全然改行してないっぽいからめっちゃ見づらい。けどFireFoxの"要素を調査"を使ったら分かりやすかった。

んで、このプログラムをコマンドプロンプトなりなんなりで実行する。検索結果のスクショを撮るようにしているので、このjsファイルと同じディレクトリに"SS.png"という画像ファイルが保存される。

f:id:nandpazmk:20180418183121p:plain
"SS.png"がこれ。デザインの都合で見づらいけどきちんと動いているようだ。
そうそう、下部に位置情報が出ちゃってたからそこは編集で切った。許して。

正直言えば意図せずPuppeteerを触ることになったんだけど、やってみたら案外面白いな。うーん。

あ、今回からはてな記法に切り替えた。使い心地はどうなんだろう、って思ってたけど結構良いな。使っていこう。