Tech Radio：Puppeteerで画面キャプチャ！：実践編

はじめに

この記事は「Tech Radio：Puppeteerで画面キャプチャ！：試行錯誤編」の続きの記事です。画面キャプチャを保存するコードを生成AIと一緒に作った試行錯誤の記録を紹介しております。

さてさて。早速AIに教えてもらったコードに、ちょっと手を加えながら実装を進めていきました。いろんな機能をつけたらコードが長くなってしまいましたが、そこは再度AIにまとめ直してもらうことができました。
関数のまとめ方とか、名前の付け方とか本当に、参考になります。

つけた機能

• cookie許可のボタンを押す

• タブ切り替えのボタンを押す

• 5000pxごとに画像を切り出す

ディレクトリ構成

puppeteer-screenshot
  ├- screenshot.js　<!--ここにURLを記載します-->
  ├- urls.csv <!--キャプチチャ対象のURLを記載します-->
  └- screenshots/ <!--ここに画像を書き出してもらいます-->

結果

取得したキャプチャは以下のようになりました！（私のブログ記事をキャプチャしてみました）

ブログ記事のキャプチャ

無事にキャプチャを取ることができました！わーい！
長いwebページも分けて出しているので最後までキャプチャに収めることができたのは、感動ものでした。
コードにはちょっとスクロールする機能とかつけているので、不要な場合はコメントアウトして必要な部分だけ使えばいろんなサイトに対応できます。

注意点

• サーバによっては負荷をかけてしまうコードになるため、状況を見て多めに待ち時間をとること。

• csvのリンクリストの上から順番にキャプチャ取得するが、あまり一気に複数のサイトキャプチャを取得しないようにすること。

まとめ

色々と要件をつけてしまったので、1時間でくらいかかりました。その間試行錯誤はしているものの、脳のリソースを割いて疲れてしまうということは全くなかったです。
全て終わった後に、感謝をAIに伝えたのですが、AIはとても謙虚でした。要件定義をちゃんとしろと、説教されなくて本当によかったです。

Puppeteerのドキュメントを読まなくてもコードを生成することができ、とても便利だと思いつつも、生成されたコードが何をしているのかを自分自身で検索することの大切さがわかりました。
「この記述はvanillaJSなのか、Puppeteer特有の記述なのかどっち？」「ここ何してるの？」というのを調べながら進められたので、知識が増えた感じがします。

楽しい体験だったので、今後も何か試したらまとめたいと思います！
では、またの機会に！