[Nodejs , Pappetter] URLリストからそのフル画面キャプチャを自動取得するプログラム公開

仕事効率化の為に便利なバッチ処理プログラムを構築するのが好きな、ユゲタです。 先日、とある会社のwebサービスページのリニューアル作業を手伝っていた時に、既存システムのページに対して、必要な機能の整理しようという話になったんですが、 既存ページのUI仕様書などは無く、ドキュメントなども一切無く、そのチーム内で困っていた時に、画面のフルキャプチャ画像に、画像ソフトか何かでマーキングすればいいのでは？という提案をしてあげました。 しかし、そのサービスページは、数百ページにも及ぶ構成で、とてもそんなに時間を使って作業を行うことはできないとのこと。 ユゲタの呆れ返った顔が目に浮かぶかもしれませんが、一気にやらずに毎日コツコツやれば、数日あれば簡単に完了するのに、揃いも揃って、まずできない事から頭に浮かぶチームメンバーばかりで、しかたなく、ユゲタが１日で画像を作ってあげることにしました。 そもそも、人力作業であれば、プログラミングなどができなくても、画面キャプチャをひたすらキャプチャしていくだけなんて、やり方さえ覚えれば、小学生でもできる作業なのに、こうした仕切りができないリーダーにも実は少しイラだっていました。 でも、ITのちからを使えばこんな事は、簡単にできてしまうのに、何故このチームの人達はこんな低レベルの悩みをたくさん抱えているんだろう？と改めてチームのスキルレベルって重要であると感じましたね。

Puppetterを使って画面キャプチャ

その昔、PhantomJSという、便利なモジュールがあって、多くのエンジニアが飛びついて、ブラウザ検証作業などのツールを作っていましたが、その後開発、サポートなどが終了して、オワコンになってしまいました。 そして、それに続いたわけではないのですが、Google社の人気インターネットブラウザのChromeをOSS化したChromiumプロジェクトというのから発展した「Puppetter」を使って今回はツール作成をすることにしました。 実は以前に、このツールを使って、色々なサービスの裏ツールを作ったという経験もあり、実は元になるプログラムはできあがっていたんですね。 MacOSにインストールされたGoogleChromeを自動操作するシステムになるんですが、基本的に事前準備が必要なものとしては、NodejsとnpmとGoogleChromeがインストールされているのが条件になります。 ※windowsの人はすみません、チェックしていないですｌ．

Github公開

ソースコードは、以下のGithub-urlに置いてあるので、お好きにcloneしてお使いください。 https://github.com/yugeta/url2dls READMEも簡単に書いておいたのですが、わかりにくい箇所などあれば、質問ください。 インストール手順として、npm installコマンドを実行する手順を忘れないようにしてくださいね。

開発苦労話

基本的に、puppetterのscreenshotという機能で、簡単に画面キャプチャを取得できるんですが、たくさんのURLに対して実行する際に、途中で何故かpuppetterがエラーを起こして終了してしまう事象が発生します。 以前にも同じ事象に苦しめられたのですが、その際は、sleep処理や、ページのonloadをちゃんと待つ仕様でなんとか逃げ切ったんですが、今回はもう少し堅牢にしたかったので、Promise処理でwaitForNavigationを実行してawaitするというなんとなく裏技チックなやり方でまあまあ堅牢にしています。 あと、起動コマンドにいくつかのオプションを付けて、ツールっぽくしているので、単一URLから、リスト記述されたファイル読み込みで複数URLにも対応出来るようにしています。 あと、フォーマットをjpgとpngの2種類どちらでもキャプチャできるようにしているのも、後ほど絶対にこうした機能が欲しくなると自分で思っただけなんですが、重要です。 そして、URLを複数取得する際に、都度ブラウザ起動をしていたのを、起動は一括にして、URLをページ遷移させることで、1つのURLで10秒ぐらい掛かっていたしょりを、1ページあたり、3秒ぐらいで取得することができるようにして処理速度の向上を行っています。 気になる人はソースコードを見てもらうと参考にしてもらえるかもね。

今後欲しくなるだろう機能

今回はURLでキャッシュレスブラウザを起動して、URLで表示した画面をそのままキャプチャする機能のみなんですが、ログインページから遷移した色々なページの画面だったり、 画面内の部分的なパーツをDOM(selector)指定してキャプチャしたり、入力フォームで登録するようなパターン操作などが実装できると、もはや自動デバッグ処理としても使用できるようになるので、今後はそうしたレベルアップしてツールをバージョンアップさせたいですね。 また、UserAgentを切り替えて、スマホ表示のキャプチャを取得するというのも、フロントデザイナーの人には必須ですからね。 もっともっと、機能が欲しくなったらどんどん追加していけるのも、オレオレツールのいいところかもしれませんね。