コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

これからの時代はヘッドレスらしい

ヘッドレスブラウザ・イズ・何?

どうもおはようございます、僕です。僕は化石時代の人間なのでキャッシュレスの対応も全然ですがみなさまいかがお過ごしでしょうか?最近「~レス」っての多いですよね。そんなわけで、今日はヘッドレスについて調べてみました。年齢は?趣味は?彼女はいるの?

んで、こんなやつらしい。

A headless browser is a web browser without a graphical user interface.

Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command-line interface or using network communication. They are particularly useful for testing web pages as they are able to render and understand HTML the same way a browser would, including styling elements such as page layout, colour, font selection and execution of JavaScript and AJAX which are usually not available when using other testing methods.

なるほどよくわからない。グラフィカルな操作をしなければヘッドレスブラウザって認識でいいんですかね?


Puppeteerを使ってみることにする

まあ、冒頭の話はどうでもよくてヘッドレスな操作のできるツールPuppeteerを前々から触って見たかったのでこんな記事を書いてしまった。
GitHub - GoogleChrome/puppeteer: Headless Chrome Node.js API

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

件のツールはこんなやつ。


んで丁度いいところに遊べる環境があったのでこれを使ってみることにします。
Try Puppeteer

そんなわけで試しになんか作ってみる。
f:id:andron:20190916160101p:plain
とりあえずお試しでGoogle画像検索からネコ画像を検索してスクショ撮ってみるやつを作ってみた。

以下コード

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

const targetURL = 'https://www.google.co.jp/imghp?hl=ja';

await page.goto(targetURL);

// ここにコード
await page.type('input[title="検索"]', "cute cat");
await page.click('button[type="submit"]');
await page.waitForNavigation({waitUntil: "networkidle2"});
await page.evaluate(_ => {
            window.scrollBy(0, 200);
        });
  await page.screenshot({path: 'cutecat.png'});
// ここにコード

await browser.close();
//})();

プレイグランドで確認してるから実際の挙動よくわかんないけども、実際に使う場合はコメントアウトしてる部分が必要になるっぽい…。ぱっと触った感じだと大雑把な待ち時間を入力する必要がないっぽいですね。あと、やりたいことは大体一行でできる。

これはいいかもしれない。あとは使える環境探し……。



ちなみに導入は以下の通りです。

npm i puppeteer
# or "yarn add puppeteer"