「ヘッドレス」 ブラウザってなに？
みなさんがネット今見ているもの、それがブラウザです。
それってなんの意味があるの？
よく「業務が自動化できる」ということがメリットに挙げられます。
ブラウザを立ち上げる アドレスバーに「A 製品名 金額」などと検索ワードを打ちます。 表示された検索結果から A社の目的の製品のページを探し、サイトを表示します。 製品の金額を探しコピーします。 ファイルを開き、書き込み保存します といった流れになります。
↓
となります。ヘッドレスブラウザがちゃんと動くようにさえしておけば何もする必要がないのです。
ルーティーンで大量な作業をさせるのは非常に得意なものになります。
ウェブスクレイピング というネット上から情報を集めてくるものもこれで可能になるはずです。
どーやってつかうのさ
PCのターミナル/コマンドラインというところから命令を送ります。
こうすると、自分のパソコンの電源を常に入れておく必要がなくより自動感がありますね。
利用環境を整えよう
今回はサーバーで動かすまで行かないで、自分のパソコンでヘッドレスブラウザを動かすところをやって見たいと思います。
参考 こちらの記事
なんか、簡単に扱えるライブラリがいくつか存在するみたいです。
比較してる記事がありました
「puppeteer」が一応公式開発のものみたいなのでこちらの情報を収集して頑張っていきたいと思います。
OSは mac
一応「puppeteer」なしで動かします。
とりあえず動かす。
chromeをインストールして、
適当なフォルダを作成。vscodeで開きます。
chromeのインストール場所を指定します。(以下はmacの場合)
alias chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome.app"
PDFの撮影をしてくれます。
chrome --headless --disable-gpu --print-to-pdf https://google.com/
puppeteer をインストールする
先ほど作ったフォルダで継続して行います。
npm install puppeteer
ではtest.jsを作っていきましょう。
test.js
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
const page = await browser.newPage();
await page.goto('https://www.yahoo.co.jp');
await page.screenshot({ path: 'screenshot.png', fullPage: true });
await browser.close();
})();
実行は以下の通り
node test.js
「yahoo」のスクリーンショットを取ってくれます。（すげぇ）
puppeteerでなにができるか知りたいんだよなぁ・・・
配布先でapiの説明があります。
英語が苦手なのが恨めしいですなぁ
googleで検索して１位のサイトをスクショ
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
// Googleにアクセス
await page.goto('https://www.google.co.jp/');
// 検索窓に「logzitsu」と入力
await page.type('#lst-ib', 'logzitsu');
// 検索ボタンクリック
await page.focus('input[name="btnK"]');
await page.click('input[name="btnK"]');
// 遷移完了を待機
await page.waitForNavigation();
// 検索結果の先頭リンクをクリック
await page.click('.rc > .r > a');
await page.waitFor(5000);
// ページタイトルを表示
const title = await page.title();
console.log(title);
// スクリーンショット
await page.screenshot({ path: 'ss.png', fullPage: true });
await browser.close();
})();
googleサイトのロゴ画像を保存
const puppeteer = require('puppeteer');
const fs = require('fs');
(async () => {
const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
const page = await browser.newPage();
// ページ作成
await page.goto('https://www.google.co.jp/');
await page.waitFor(2000);
// ページタイトル出力
console.log(await page.title());
// URL出力
console.log(await page.url());
//特定の場所のテキストを出力 今回は右上のナビのclassを指定
const texts = await page.$eval('.gb_P', item => { return item.textContent });
console.log(texts);
// スクリーンショット撮影
await page.screenshot({ path: 'screenshot01.png', fullPage: true });
//ロゴ画像ソースの取得
var imgurl = await page.$eval('#hplogo', el => el.src);
var viewSource = await page.goto(imgurl);
fs.writeFile("./logo.png", await viewSource.buffer(), function (err) {
if (err) {
return console.log(err);
}
console.log("画像を保存したよ");
});
await browser.close();
})();
めっちゃ汎用性あるなぁ。
https://logzitsu.tlog.work/node-js-%E3%81%A7-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E3%82%8B/
