2019.12.29ケネブラウザ自動操作で楽したいならPuppeteerを使おうツイートシェアはてブ送るPocket※当サイトはアフィリエイト広告を利用していますブラウザ操作の自動化に興味を持ったことはありませんか。仕事のテストだったり、プライベートだったり、どちらにしても定期的にWebサイトで繰り返し同じ操作をするのって面倒なので自動化したいですよねまた、最近のシステムはユーザとのやり取りをWeb経由で行なっていることも多く、ブラウザの自動操作は知っておくと便利です。あなたがNode.jsを使っていてブラウザ自動化に興味があるなら絶対にPuppeteerを使うべきです。Node.jsのライブラリなので、導入が容易ですし、公式サイトにサンプルコードがあるので誰でも簡単に動かせます。興味はあったけどどうやったらいいかわからない、といった方も習得することができます。この記事では、Puppeteerの始め方を解説します。まとめ使えるシーンメインの用途としてテスト自動化で使えます。ブラウザ操作を自動化することで画面を自動で動かしていってスクリーンショットを撮ったりできます。テストでけではなくPuppeteerの画面遷移機能を使ってWebスクレイピングすることもできます。毎日ブラウザで同じような動作をしている時はその動作を自動化できちゃいます。以下のような条件で使えると思います。毎日の定常作業がなくなるので実装できるとめちゃくちゃ楽です。毎日ネット証券会社で同じ条件で株を買う毎日同じサイトから新規公開株式(IPO)の情報が出てないかチェックするゲームのフレンド募集掲示板で毎日同じ時刻に同じ募集文面を出すただし、機械学習用途で画像を大量に集めることは苦手なようです。(画像を取得する機能が少ない)この用途だけは別の方法で実現する必要があります。最低限必要なスキルNode.jsに触ったことがある人であれば導入は簡単です。npmのようなパッケージ管理ツールからインストールできます。World!の感覚でいけます。Chromeのみ動作するので環境制約がある方は注意。メモリもそこそこ必要です。使い方Puppeteer公式サイトが参考になります。puppeteerスクリーンショットを取得(公式サンプルを参考に作成)一番簡単なサンプルです。screenshot.js」で実行すると「https://www.kennejs.com」に遷移してスクリーンショットをとります。これをベースに自分のやりたいことができるようにコードを追記していきましょう。APIが参考になります。架空のWebアプリにログインするサンプルコードを以下に載せておきます。page.goto()など、awaitがついているところはPuppeteer提供の機能です。見たことはないと思いますが、処理を待機させたり、文字入力をしたり、直感的にわかりやすいのではないでしょうか。headless:falseにしておくとChromeが動いているところが見えて動作確認しやすいです。page.goto('https://xxx.co.jp/');//画面描写されるまでpage.waitFor(xxx)でxxxミリ秒待ちます。page.waitFor(2000);//ここからはF12デベロッパーツール等でhtmlを見ながらコードを書いていきます。"passw0rd");//ログインボタンを押してログインする//ログインボタンを定義して、click()で押します。page.waitFor(2000);//画面が表示される~~~処理を書いていく~~~まとめNode.jsのライブラリpuppeteerでブラウザの自動操作ができることを紹介しました。Node.jsを勉強していてブラウザ操作に興味がある方には簡単にできて、プラスのスキルになりますのでぜひ試してみてください。Puppeteerの基本的な動かし方Puppeteerを自作したらVPSで稼働させてみよう。コスパで比較!初心者向けのVPSの選び方とおすすめのVPS外部サーバで稼働させるにはさくらVPSが手軽でおすすめです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。USケネはじめまして、ケネです。Node.jsの技術情報を書いています。一人でも多くの方と「自分でもできた」感覚を共有したいので、なるべくわかりやすく、実体験ベースでのブログを心がけています。技術で自分の世界を広げましょう。不明点や質問があればお気軽にコメントください。