JavaScriptでWebサイトの作業を自動化
Webサイトで行う作業を自動化したかったので、JavaScript（以下、js）で簡単に作ってみました。
備忘録がてら、基本的なことを記録してます。js経験者やプログラミングできる人は比較的楽で簡単に使えるかと思います。
本作業はNode.jsを使用します。
また、当方はwindows11環境になります。
Node.jsのインストール
以下より、Node.jsのインストーラをダウンロードし、インストールをしてください。
https://nodejs.org/en/download/prebuilt-installer
プロジェクトフォルダを作成
ソースを格納するフォルダを任意の場所に用意します。例では「AutoJS」というフォルダ名にします。
コマンドで行う場合は、mkdirで作成できます。
nodeからpuppeteerをインストールする
コマンドプロンプトで先程作成したプロジェクトフォルダ（以下、pjフォルダ）にカレントディレクトリを移動して、以下を入力します。
npm install puppeteer
インストールが完了しましたら、pjフォルダ内にいくつかフォルダとファイルが作成されます。
コマンドプロンプトはjsファイル作成後、実行する際に使用するのでそのまま開いててください。
jsファイルを作成する
pjフォルダ直下に、拡張子jsのファイルを作成します。例では「testProject.js」というファイル名で作成します。
コマンドで行う場合は、以下で作成できます。
type nul > testProject.js
jsファイルを編集
とりあえずソースです。先程作成したjsファイルをテキストエディタで開いてコピペしてください。
const puppeteer = require('puppeteer');
(async () => {
// puppeteer・Chromium起動
const browser = await puppeteer.launch({
headless:false // この行をコメントアウトすることでサイトウィンドウを非表示にします。
});
const page = await browser.newPage();
// サイトに接続・ページが完全に読み込まれるまで待機
await page.goto('https://google.com/', { waitUntil: 'networkidle2' });
// ページ内でjsを実行
await page.evaluate(() => {
// 検索テキストボックス要素をIDで取得
const searchBox = document.getElementById('APjFqb');
// 検索窓に値入力
searchBox.value = 'Qiita';
// フォーム要素をCSSセレクタで取得
const form = document.querySelector('form[action="/search"][method="GET"][role="search"]');
// 送信
form.submit();
});
// 3秒後にブラウザを閉じる
setTimeout(function() {
browser.close();
}, 3000);
})();
内容としては、Googleサイトに訪問し、検索窓に「Qiita」と入力して検索するという流れです。
詳細は割愛しますが、応用してお好みで作成するのであれば、サイトアドレスと動作部分（ページ内でjsを実行）を変えれば良いかと思います。
例のソースでは、headless:falseでブラウザウィンドウを表示してますが、テスト時以外は不要だと思いますので、必要に応じてコメントアウトや削除してください。
併せて、setTimeoutで3秒後にブラウザを閉じるようにしてますが、動きを理解するためにあえて設けているものになるのでこちらも削除して問題ありません。
作成したjsファイルをNodeで実行する
jsファイルを保存しましたら、先程のコマンドプロンプトの画面で以下のコマンドを入力して実行します。
node testProject.js
おわりに
無事動作しましたでしょうか。
実際に何か自動化したいと思った際はもっと実行処理が他に必要があるかと思いますが、まずは入門として簡単に紹介させていただきました。
お使いの環境によってはプロキシ認証が必要であったりなど、読者様でもあらゆるパターンが想定されるかと思いますが、ぜひ探求してみてください。