チュートリアル html javascript web制作 チュートリアル テスト

『webshot』でページのスクリーンショットを作成してブラウザチェックを捗らせる。

webサイトの制作の現場ではページを作成したらブラウザチェックで表示のチェックを行なっていきますが、 ページ数が増えていくとどうしても、確認に工数がかかっていきますよね。 レイアウトが崩れていないか、文字が正しいか、リンクチェックなど。 ブラウザで都度、アドレスバーにURLを打ったり、またサイト内のリンクを辿って行ったりなど、どちらにしてもやや手間に感じることがあります。

ページのチェックには色々な方法がありますが、キャプチャをとってチェックする場合に役に立つ画面キャプチャのライブラリをご紹介します。
今回は『webshot』というNodeJSのパッケージを使った方法となります。
URL:https://www.npmjs.com/package/webshot

環境について

・windows
・node 5.6.0
・npm 3.8.0
・webshot 0.18.0

で確認いたしました。 また、前提として、ターミナル（コンソール）からNodeが利用できるものとします。

npm初期化、webshotのダウンロード

まずはターミナル（コンソール）から適当なディレクトリ作成し、npm initを行い、さらにebshotをダウンロードしておきましょう。

md webshot-sample
cd webshot-sample
npm init -y
npm i webshot --save-dev

無事に終われば、package.jsonの"devDependencies"の項目にwebshotが追加されたかと思います。

実行用のファイルの作成

webshotにはコマンドライン利用ができるcliパッケージも配布されているようですが、今回はjsファイルに書いて利用する方法で進めていきます。

現在のディレクトリにwebshot.jsというファイルを作成します。
※ファイル名は任意なので、他の名前でも問題ありません。

作成できたら、npmのページにもある参考のgoogleのスクリーンショットをとるコードを書きます。

// webshot.js
const webshot = require('webshot');
webshot('google.com','google.png', function(err) {});

これだけで準備が完了しました。
上記コードがかけたら、ターミナル（コンソール）で、このファイルが置いていあるディレクトリまで移動します。(インストールまでの手順のターミナルが残っていれば、移動せずそのままで大丈夫です） 準備ができたら、下記コマンドを実行します。

node webshot.js

無事実行が完了すると、同一ディレクトリ内に「google.png」というファイルができたかと思います。 画像を見てみると無事キャプチャできたものが表示されているかと思います。
jsコードの引数にいては以下の通りです。

// 引数
webshot('取得したいページのURL'、'HTMLのコード', '生成される時のファイル名', [options(オプション※後述)], コールバック関数);

とてもシンプルに利用することができますね。

webshotについて

さて、このwebshot、スクリーンショットがとれる仕組みとしては内部でwebkitのブラウザエンジンが動いているからになります。
細かくいうと、その機能はphantomJSという、GUIを持たないうブラウザを利用したものとなります。 このPhantomJSはwebkit(safariと同じもの)のブラウザエンジンが搭載されております。 なので、chrome, Firefoxなどをブラウザ通すことなく、ページの表示ができているわけです。

webshotのオプション

先ほどのphantomJS側のオプションや設定を加えると多数あるのですが、ここでは、 一部抜粋して紹介します。

  • windowSize 画面のサイズ。widthとheightを指定します。
  • shotSize 撮影する画像の範囲です。上記のwindowSizeと同様のサイズで取るか、ファーストビューだけをとりたかったら、そのサイズを指定してあげます。
  • shotOffset 撮影開始位置です。top,right,bottom,leftをpixelで指定することができます。
  • cookies Cookieオブジェクトを指定することができます。
  • quality 生成される画像(jpgの場合)の画質をしていできます。 0から100までの間で指定できます。
  • siteType 取得するデータの種類を指定します。リモートであれば、’url’, ローカルなら’file’, 文字列を与える場合は’html’としていきます。

などなどあります。
さらに詳しくオプションを知りたい方はgithubのページを見てみてください！
https://github.com/brenden/node-webshot

利用時の注意したい点

JSの実行について

実は自分はまだ静的なページのみでしか利用したことがないのですが、 ページ全体でJSでの要素を生成するページの場合、アクセスすぐのタイミングではもしかしたらJSが実行されておらず、表示されていないかもしれないので、 そういった場合は、optionのrenderDelayはphantomjs側の設定で必要かもしれません。

リモートサーバーでの過剰アクセス

たとえば、複数ページ、または同一ページの複数パターンを撮影したい場合に、 何にも考えず、繰り返し構文などでアクセスを繰り返すといったことをしてしまうと、過剰なリクエストにより、サーバーに大きく負荷がかかります。 これを自分とは関係ないページや、レンタルサーバーなどで行なってしまって、システムに不具合が発生すると、最悪の場合事件になることもあるので注意しましょう。

リモートページを撮影する場合には、sleep関数などを利用するなど、アクセスのタイミング, 頻度、回数をしっかりと制御した上で利用しましょう。

現行ブラウザと100%同じとは限らない

先にもあげたとおり、safariと同じレンダリングエンジンが入ってはいますが、 それはバージョンなどによって表示に差異が生まれることがあります。加えて、firefoxやie,chromeはそもそも違うレンダリングエンジンですので、 実際には生成されたものだけではないことをちゃんと理解しておく必要があると思います。

おわりに

webサイト制作では数十規模の静的なページの修正を一斉置換など修正した場合や、インクルードファイルやCMSを使っている場合にはテンプレートの修正などの場合などのある程度の影響範囲がある時に利用すれば、通常のブラウザで一つ一つチェックするより、画像で確認した方がはるかに早いかもしれません。 自分も全機能を試したわけではないですが、設定次第で色々なことができるようですので、通常のページ制作以外でも活用の幅は多そうですね。

関連サービス
トランガ

関連記事