検索

ホームページ >ウェブフロントエンド >jsチュートリアル >ヘッドレスWebKitとPhantomjs

ヘッドレスWebKitとPhantomjs

Joseph Gordon-Levitt
Joseph Gordon-Levittオリジナル
2025-02-24 10:24:13203ブラウズ

Headless WebKit and PhantomJS

コアポイント

    グラフィカルユーザーインターフェイスを必要とせずにWebページのより高速なプログラマティックオートメーションとテストを可能にするWebKitベースのヘッドレスブラウザーであるPhantomjs。
    • Phantomjsは、JavaScriptを介してページと対話する機能などの強力な機能を提供し、ボタンのクリック、フォームの送信、標準のDom APIやjQueryなどのライブラリを使用してWebページの読み込みや操作などのタスクの簡単な自動化を可能にします。
    • Phantomjsは、アプリケーションがファイルシステムにソースコードを保存し、Webページのスクリーンショットを撮影し、外部スクリプトファイルをページに含めることを可能にする広範なファイルシステムAPIを提供します。
    • phantomjsは強力ですが、node.jsとはあまり統合されていません。通常、既存のプロジェクトを使用してPhantomjsインスタンスを生成し、node.jsと通信します。
この記事を読んでいる場合、ブラウザが何であるかを知っているでしょう。次に、GUIを削除すると、いわゆるヘッドレスブラウザー

を取得します。ヘッドレスブラウザは、通常のブラウザと同じことをすべて実行できますが、より速いです。これらは、プログラムでWebページを自動化およびテストするのに最適です。現在、多くのヘッドレスブラウザがあり、Phantomjsはその中で最高です。 ChromeとSafariの背後にあるエンジンであるWebKitに基づいて構築されたPhantomjsは、かさばるGUIを必要とせずに強力なブラウザ機能を提供します。 Phantomjsを開始するのは簡単です。実行可能ファイルをダウンロードするだけです。次に、hello.jsという名前のファイルを作成し、次のコード行を追加します。 スクリプトを実行するには、次のコマンドを実行します。 Phantomjs実行可能ファイルは、現在のディレクトリ、または環境のパスのどこかにある必要があることに注意してください。すべてが正しく構成されている場合、Phantomjsは「Hello World！」を印刷し、phantom.exit（）が呼び出されたときに終了します。 

<code class="language-javascript">console.log("Hello World!");
phantom.exit();</code>

webページを使用して
<code class="language-bash">phantomjs hello.js</code>

Phantomjsが実行されていた後、Webの自動化を開始できます。次の例では、Googleホームページをロードし、スクリーンショットをファイルに保存します。行1は、Webページの新しいインスタンスを作成します。ライン4はGoogle.comをロードします。ページが読み込まれると、onloadFinished（）コールバック関数が実行されます。コールバック関数は、単一のパラメーターステータスを受信します。これは、ページが正常にロードされているかどうかを示します。ページをロードするURLはpage.urlで使用できます。このプロパティは、ページにリダイレクトが含まれている場合に特に役立ち、自分がどこにいるかを正確に知りたい場合があります。行8では、ページのrender（）メソッドを使用してスクリーンショットを撮ります。 Render（）は、PNG、GIF、JPEG、およびPDFファイルを作成できます。 

<code class="language-javascript">console.log("Hello World!");
phantom.exit();</code>

ページ設定

ページオブジェクトの多くの設定は、アプリケーションのニーズに応じてカスタマイズできます。たとえば、ソースコードのダウンロードにのみ興味がある場合は、画像ファイルを無視してJavaScriptを閉じることでアプリケーションを高速化できます。次の書き換え例は、これらの変更を反映しています。変更された設定は、3行目と4行に表示されます。 Open（）を呼び出す前に、設定の変更を変更する必要があることに注意してください。この例のスクリーンショットを見ると、Googleのロゴ画像が欠落していることに気付くでしょうが、ページの残りの部分は同じままです。 

<code class="language-bash">phantomjs hello.js</code>

ファイルシステムへのアクセス

これまでのところ、私たちの例はページをロードし、画面ファイルとしてスクリーンショットを保存しました。これは間違いなくクールですが、多くのアプリケーションはソースコードをファイルシステムに保存することを好みます。 Phantomjsは、幅広いファイルシステムAPIを提供することにより、これを行います。次の例では、ファイルシステムモジュールを使用して、Google.comソースコードをファイルに書き込みます。まず、2行目にファイルシステムモジュールをインポートします。 6行目で、書き込みの出力ファイルを開きます。 7行目で、write（）メソッドを使用して、ファイルにデータを書き込みます。実際のソースコードは、ページのコンテンツプロパティを介して取得できます。最後に、ファイルを閉じてPhantomjsを終了します。 

<code class="language-javascript">var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};</code>

javascript

を実行します

Phantomjsの最も強力な機能の1つは、JavaScriptを介してページと対話する機能です。これにより、ボタンのクリックやフォームの送信などのタスクを自動化することが非常に簡単になります。次の例では、Googleホームページをロードし、クエリを入力し、検索フォームを送信してWeb検索を実行します。例の始まりはおなじみに見えるはずです。新しいコンテンツは8行目から始まり、どのページがロードされたかを決定します。これがホームページの場合、ページのevaluate（）メソッドが呼び出されます。 evaluate（）ページのコンテキストで提供したコードを実行します。これにより、実際にページの元の開発者と同じ許可が与えられます。これはどれほどクールですか？ 

<code class="language-javascript">var page = require("webpage").create();
var homePage = "http://www.google.com/";

page.settings.javascriptEnabled = false;
page.settings.loadImages = false;
page.open(homePage);
page.onLoadFinished = function(status) {
  var url = page.url;

  console.log("Status:  " + status);
  console.log("Loaded:  " + url);
  page.render("google.png");
  phantom.exit();
};</code>

内部evaluation（）検索ボックスとフォームがあります。検索ボックスの値を「JSPRO」に設定し、フォームを送信します。これにより、ページのonloadFinished（）メソッドが再び起動されます。ただし、今回は、検索結果のスクリーンショットが取得され、Phantomjsが終了します。 Phantomjsは、js（）とinjectjs（）を含む2つの方法も提供します。これにより、ページに外部スクリプトファイルを追加できます。 includejs（）は、ページでアクセスできるスクリプトファイルを含めるために使用されます。たとえば、次のコードを使用して、前の例でjQueryを含めることができます。 9行目のincludejs（）への呼び出しと、evaluate（）内のjquery構文に注意してください。 

<code class="language-javascript">var page = require("webpage").create();
var fs = require("fs");
var homePage = "http://www.google.com/";

page.open(homePage);
page.onLoadFinished = function(status) {
  var file = fs.open("output.htm", "w");

  file.write(page.content);
  file.close();
  phantom.exit();
};</code>

injectjs（）メソッドは、includejs（）に似ています。違いは、注入されたスクリプトファイルがページオブジェクトからアクセスする必要がないことです。たとえば、これにより、ローカルファイルシステムからスクリプトを挿入できます。

phantomjs and node.js

残念ながら、Phantomjsはnode.jsに統合されていません。一部のプロジェクトは、node.jsのphantomjsを制御しようとするために作成されていますが、それらはすべて少し不器用です。既存のプロジェクトは、子のプロセスモジュールを使用して、PhantomJSインスタンスを生成します。次に、PhantomJSは、WebSocketsを使用してNode.jsと通信する特別なWebページをロードします。理想的ではないかもしれませんが、機能します。さらに2つの一般的なPhantomJSノードモジュールは、ノードファントムとPhantomJSノードです。私は最近、GhostBusterと呼ばれる独自のPhantomJSノードモジュールの開発を開始しました。 GhostbusterはNode-Phantomに似ていますが、より強力なコマンドを提供することでコールバックネスティングを減らしようとします。 Phantomjsへの呼び出しが少ないほど、WebSocketsでのコミュニケーションを無駄にする時間が短くなります。別のオプションは、JSDOMに構築された軽量のヘッドレスブラウザであるZombie.jsです。ゾンビはPhantomjsほど強力ではありませんが、実際のnode.jsモジュールです。

結論

この記事を読んだ後、Phantomjsの基本的な理解が必要です。 Phantomjsの最良の機能の1つは、使いやすさです。すでにJavaScriptに精通している場合、学習曲線は小さいです。 Phantomjsは、この記事ではカバーされていない他のさまざまな機能もサポートしています。いつものように、ドキュメントを見ることをお勧めします。 Phantomjsの完全な機能を示す例もいくつかあります！

ヘッドレスWebKitとPhantomjs

に関する FAQ

ヘッドレスWebKitとPhantomjsの主な違いは何ですか？

ヘッドレスWebKitとPhantomjsはどちらもWebブラウザーを自動化するためのツールです。ただし、主な違いはその機能です。 Headless WebKitは、自動化、テスト、サーバー側のレンダリングのためにプログラム的に制御できるグラフィカルユーザーインターフェイスのないブラウザです。一方、Phantomjsは、Webインタラクションを自動化するためのスクリプト可能なヘッドレスブラウザーであり、自動ナビゲーション、スクリーンショット、ユーザーの動作、およびアサーションをサポートするJavaScript APIを提供します。

phantomjsはまだ維持されていますか？

2018年3月の時点で、Phantomjsは積極的に維持されていません。主な理由は、ChromeヘッドレスブラウザーやFirefoxヘッドレスブラウザーなどのモダンなヘッドレスブラウザーの出現であり、より多くの機能とより良いサポートを提供します。

phantomjsの代替品は何ですか？

phantomjsはもはや維持されていないため、いくつかの選択肢が現れます。これらには、devtoolsプロトコルを介してクロムまたはクロムを制御するための高レベルのAPIを提供するノードライブラリであるPuppeteerと、Webアプリケーションの自動テスト用のAPIのオープンソースコレクションであるSelenium WebDriverが含まれます。

phantomjsはどのように機能しますか？

Phantomjsは、自動ナビゲーション、スクリーンショット、ユーザーの行動、およびアサーションをサポートするJavaScript APIを提供することで機能します。 JavaScript APIを使用したスクリプト可能なヘッドレスWebKitです。 DOM処理、CSSセレクター、JSON、Canvas、およびSVGのさまざまなWeb標準の高速でネイティブサポートがあります。

WebクロールにPhantomjsを使用できますか？

はい、ファントムジはWebクロールに使用できます。これにより、標準のDOM APIやjQueryなどの一般的なライブラリを使用してWebページを読み込んで操作できます。

phantomjsをインストールする方法は？

phantomjsは、NPM（ノードパッケージマネージャー）を介してインストールできます。端末またはコマンドプロンプトでコマンド「NPMインストールPhantomjs」を使用できます。

サーバー側のレンダリングにおけるヘッドレスWebKitの役割は何ですか？

ヘッドレスWebKitは、サーバーがJavaScriptレンダリングされたページを事前にレンダリングし、HTMLに変換してからクライアントに送信できるため、サーバー側のレンダリングで重要な役割を果たします。これにより、WebアプリケーションのパフォーマンスとSEOが向上します。

自動テストにヘッドレスWebKitを使用できますか？

はい、ヘッドレスWebKitは自動テストに最適なツールです。目に見えるUIを必要とせずに、実際のブラウザ環境でテストを実行できます。

ヘッドレスWebKitをインストールする方法は？

ヘッドレスWebKitのインストールプロセスは、使用する特定のツールに依存します。たとえば、Puppeteerを使用している場合は、「NPMインストールPuppeteer」というコマンドを使用してNPMからインストールできます。

従来の自動ブラウザと比較して、ヘッドレスWebKitを使用することの利点は何ですか？

ヘッドレスWebKitには、自動化の従来のブラウザよりもいくつかの利点があります。視覚をレンダリングするのに時間がかからないため、より速いです。また、自動化されたスクリプト可能なブラウジングも可能です。これは、テストやWebクロールに非常に役立ちます。

以上がヘッドレスWebKitとPhantomjsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript json firefox jquery css chrome safari html npm webkit Filesystem 回调函数 JS 对象 dom 选择器 canvas ui 自动化 SEO
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScriptの文字列をトリミングします次の記事：JavaScriptの文字列をトリミングします

関連記事

続きを見る