素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【サイトキャプチャ自動化】NightmareJSを使って大量の画面のキャプチャを自動で保存しよう【PhantomJS】

投稿日: 2019年10月4日
最終更新日:

スポンサーリンク

336×280




大量のURLの画面キャプチャを自動化したい

もはやキャプチャ保存は人間のやる作業ではない

サイト開発等をしている場合、開発中の各画面のキャプチャを保存したいというケースがありますよね。

しかし、人力でブラウザで全てのページを開いてキャプチャツールを使って保存、、、なんて作業をするのはとても骨が折れます

そんな時は、NightmareJSを使って自動化しちゃいましょう!

nightmareとは?

NightmareJSとは、スクレイピングなどを行う際に多く利用されるPhantomJSという有名なヘッドレスブラウザをさらに扱いやすくしたラッパーツールです。


A high-level browser automation library.
Nightmare

PhantomJSを使うとこう書いていた部分が、

こうなる。

神かよ!!!

って事で早速使ってみました。

手順

phantomjsのインストール

nightmarejsはPhantomejsに依存しているのでまずはそちらをインストールします。

NightmareJSのインストール

次にNightmareJSをインストールします。

スクリーンショットを保存

まずは試しに、Googleで検索した結果をキャプチャ保存するスクリプトを書いてみます。

また、yarnで簡単に起動するためにpackage.jsonscriptsに以下の起動スクリプトを追記しておきます。

確認

では、実際にyarn captureで起動してみましょう。

正しく検索操作とキャプチャ保存も出来ていますね♪

複数画面を自動キャプチャ保存

では、応用として複数画面のキャプチャを自動で保存してみましょう。

今回は、config.jsonというファイルにキャプチャしたいページを管理し、ループ処理で自動保存する形式にしようと思います。

レスポンシブも対応

さらに以下のようにデバイス情報を追記し、

ネストループする事で一気に2端末分のレスポンシブデザインの確認をするためのキャプチャも取れてしまいます・・・!

かなり便利です!!!

スクロール領域のキャプチャ

次は縦スクロールが発生する画面のキャプチャを撮ってみましょう。

確認

正常にスクロールが発生する画面でも全体のキャプチャが取れました。

本日のオススメ商品

終わりに

以上のように、簡単に画面キャプチャを撮る事が出来ました。

たくさんの画面キャプチャを取らないといけない場合は、あらかじめ導入しておくととても便利ですので是非試して見てください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist