Tech Radio：Puppeteerで画面キャプチャ！：試行錯誤編

はじめに

デザインの気に入ったサイトの画面キャプチャを保存したい！
まとめてキャプチャを取得したい！
ChromeのCommandでやると途中で画像が切れてしまう時があるのなんとかしたい！

そんな思いを日々抱えて生きていたところ、有識者からPuppeteerなるものを教えてもらいました。
以下はPuppeteerを使って、画面キャプチャの取得ができるまでの試行錯誤の記事です。

試行錯誤

①コード書きたくない
あまり時間をかけて作りたくないので、そんな時はAIに相談です。
「Puppeteerを使ってPCとSPの画面キャプチャをとるためのコード」を聞くと、すぐに答えてくれました。AI優秀。すごい。

②SPの幅でPCの内容になってる
画面幅の指定で、SPとPCのキャプチャを取る予定だったのですが、SP幅のキャプチャがPCのデザインになっていました。画面幅だけでなく、ユーザーエージェントを指定する必要があることがわかりました。

③途中で切れてる
最初に「ChromeのCommandでやると途中で画像が切れてしまう時があるのなんとかしたい！」とか言っていたくせに、考慮を忘れていました。5000pxごとに画像を分けてキャプチャを取るように、AIにコードを修正してもらいました。
「はい、わかりました」って言ってくれるAIも大人ですよね。「最初に要件固めときなよ」って言われないでよかった。

④cookie追従
よっしゃ撮れた！と思ったら、何やらキャプチャに映り込んでいる。cookieの取得を許可するかどうかの追従バナーでした。途中に入り込んでしまうので、まずは「同意するボタン」を押してからキャプチャをとってもらうように修正しました。

⑤cookie追従2
消えない…だと…？よく見ると前より薄くなっている気がする。「fadeoutの時間か！」ということで、ボタンを押下後、少し待ってからキャプチャをとってもらうことに。

⑤やることが多いので待ち時間を設ける
同じサーバのページを複数とる場合に、負荷をかけすぎないように、１ページとった後に時間を空ける動作を追加してもらいました。

おわりに

という感じで、色々と試行錯誤をしながら、作りたいものに近づけていきました。AIも途中から増える要件に、匙を投げないでくれてありがたかったです。

AIを使いながらコードを書くというのを、ちょくちょくしているのですが、サクッと試せるというのがいいですね。方針を決める時に「これは動く」という判断ができるのは脳の負荷をだいぶ下げてくれます。

あくまで補助という位置付けで、最終判断やレビューはしつつ、今後もうまくAIを活用していけたらいいなあと思います。

では実践編で会いましょう！