PhantomJS クイック スタート チュートリアル (サーバーサイド JavaScript API WebKit)_JavaScript スキル

PhantomJS は、WebKit に基づくサーバーサイド JavaScript API です。ブラウザーのサポートを必要とせずに Web を完全にサポートし、高速でさまざまな Web 標準 (DOM 処理、CSS セレクター、JSON、Canvas、SVG) をネイティブにサポートします。 PhantomJS は、ページ自動化、ネットワーク監視、Web ページのスクリーンショット、インターフェイスレス テストなどに使用できます。

PhantomJs 公式ウェブサイト: http://phantomjs.org/
GitHub:https://github.com/ariya/phantomjs/wiki/クイックスタート

1. インストール

インストール パッケージのダウンロード アドレス: http://phantomjs.org/download.html (Windows、Mac OS、Linux バージョンを含む) 対応するバージョンを選択してダウンロードして解凍できます (便宜上、 phantomjs の環境変数を設定できます)。これには、使用するために既に記述されたコードが多数含まれるサンプル フォルダーがあります。この記事では、phantomjs がインストールされ、環境変数が設定されていることを前提としています。

2.

を使用します。

こんにちは、世界!

次の 2 行のスクリプトを含む新しいテキスト ファイルを作成します:

console.log('Hello, world!');
phantom.exit();

ファイルを hello.js として保存し、実行します。

phantomjs hello.js

出力結果は次のとおりです: Hello, world!

最初の行は端末に文字列を出力し、2 行目の phantom.exit は操作を終了します。
このスクリプトで phantom.exit を呼び出すことが非常に重要です。そうしないと、PhantomJS がまったく停止しません。

スクリプト引数 – スクリプト引数

Phantomjs でパラメータを渡すにはどうすればよいですか?以下に示すように:

コードをコピーします コードは次のとおりです:

phantomjs 例/arguments.js foo bar baz

Foo、bar、baz は渡されるパラメータです。それらの取得方法:

var system = require('system');
if (system.args.length === 1) {
 console.log('Try to pass some args when invoking this script!');
} else {
 system.args.forEach(function (arg, i) {
   console.log(i + ': ' + arg);
 });
}
phantom.exit();

次のように出力されます:

0: フー
1: バー
2: バズ

ページの読み込み – ページの読み込み

Web ページ オブジェクトを作成すると、Web ページをロード、分析、レンダリングできます。

次のスクリプトは、サンプル ページ オブジェクトを最も単純な形式で使用し、example.com を読み込み、画像 example.png として保存します。

var page = require('webpage').create();
page.open('http://example.com', function () {
 page.render('example.png');
 phantom.exit();
});

この機能により、PhantomJS を使用して、Web ページのスクリーンショットを撮ったり、Web ページや SVG を画像や PDF などとして保存したりするなど、一部のコンテンツのスナップショットを撮ることができます。この機能は素晴らしいです。

次のloadspeed.jsスクリプトは、特別なURL(httpプロトコルを忘れないでください)をロードし、ページのロードにかかる時間を測定します。

var page = require('webpage').create(),
 system = require('system'),
 t, address;

if (system.args.length === 1) {
 console.log('Usage: loadspeed.js <some URL>');
 phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function (status) {
 if (status !== 'success') {
  console.log('FAIL to load the address');
 } else {
  t = Date.now() - t;
  console.log('Loading time ' + t + ' msec');
 }
 phantom.exit();
});

コマンドラインから次のスクリプトを実行します:

phantomjsloadspeed.js http://www.google.com
次のようなものが出力されます:

http://www.google.com の読み込み中 読み込み時間 719 ミリ秒

コード評価 – コード評価

Web ページのコンテキストで JavaScript または CoffeeScript を評価するには、evaluate() メソッドを使用します。コードは「サンドボックス」内で実行され、コードが属するページのコンテキスト外の JavaScript オブジェクトや変数を読み取る方法はありません。 Evaluate() はオブジェクトを返しますが、単純なオブジェクトに限定されており、メソッドやクロージャを含めることはできません。

ページタイトルを表示する例を次に示します:

var page = require('webpage').create();
page.open(url, function (status) {
 var title = page.evaluate(function () {
  return document.title;
 });
 console.log('Page title is ' + title);
});

Web ページからのコンソール情報や、evaluate() からのコードを含むコンソール情報は、デフォルトでは表示されません。この動作をオーバーライドするには、onConsoleMessage コールバック関数を使用します。前の例は次のように書き換えることができます。

var page = require('webpage').create();
page.onConsoleMessage = function (msg) {
 console.log('Page title is ' + msg);
};
page.open(url, function (status) {
 page.evaluate(function () {
  console.log(document.title);
 });
});

DOM 操作 – DOM 操作

スクリプトは Web ブラウザであるかのように実行されるため、標準の DOM スクリプトと CSS セレクターは正常に動作します。これにより、PhantomJS はさまざまなページ自動化タスクのサポートに適したものになります。

次の useragent.js は、ID が myagent である要素の textContent 属性を読み取ります。

var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function (status) {
 if (status !== 'success') {
  console.log('Unable to access network');
 } else {
  var ua = page.evaluate(function () {
   return document.getElementById('myagent').textContent;
  });
  console.log(ua);
 }
 phantom.exit();
});

上記の例では、ユーザー エージェントをカスタマイズする方法も提供しています。

JQuery およびその他のライブラリを使用します:

var page = require('webpage').create();
page.open('http://www.sample.com', function() {
 page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
  page.evaluate(function() {
   $("button").click();
  });
  phantom.exit()
 });
});

ネットワークのリクエストと応答 – ネットワークのリクエストと応答

ページがリモート サーバーからリソースをリクエストすると、リクエストとレスポンスの両方が onResourceRequested および onResourceReceived コールバック メソッドを通じて追跡できます。例

netlog.js:

var page = require('webpage').create();
page.onResourceRequested = function (request) {
 console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function (response) {
 console.log('Receive ' + JSON.stringify(response, undefined, 4));
};
page.open(url);

HAR 出力および YSlow ベースのパフォーマンス分析にこの機能を使用する方法の詳細については、

ネットワーク監視ページ を参照してください。