Webサイト解析の技術① -基礎編-

chame_fb_2

 弊社の Dynamic Native Adサービス「カメレオン」ではWebサイトのデザインを解析し、
ネイティブアド化した広告を配信することができます。

その中で、Webサイト解析をし必要な情報を抽出することは、
カメレオンを実現化する上で最も重要な技術の1つと言えます。

今回は、Webサイト解析の際に広く利用されている
PhantomJS」について簡単にご紹介したいと思います。

PhantomJSとは?

 Webブラウザを使わずに、コンソール上からブラウザ操作できるツールです。

【特徴】

  • Webページ内のDOMの取得ができる。
  • Webページ内でイベントを発火させることができる。
  • UserAgentやCookieなどの設定ができ、
    実利用とほぼ同じ環境でのブラウザ操作ができる。
  • ebKit系ブラウザを前提としたブラウザ操作である。

(※Gecko系ブラウザであればSlimerJSがよく用いられます。両者を包括したCasperJSも有名です。)

PhantomJSの導入、起動方法

  • PhantomJSは公式サイトにて配布されています
    [http://phantomjs.org/](http://phantomjs.org/)
  • PhantomJSはコンソール上で以下の様に起動します。
    phantomjs screen_shot.js
    


PhantomJSの仕組み

 ここでは一般的な利用方法(Webサイトのスクリーンショットを撮影するPhantomJS)に則って、PhantomJSの仕組みを説明します。

var webpage = require("webpage").create(); …①
webpage.open('http://chameleon-ad.com', function() { …②
 webpage.render('test.png'); …③
 phantom.exit(); …④
});
  1. PhantomJSでは、主に以下の2つのオブジェクトを利用して、
    Webページ操作等を行なっていきます。

    • WebPageオブジェクト…対象の1つのWebページに対応するオブジェクト
    • Phantomオブジェクト…起動しているプロセスに対応するオブジェクト
  2. WebPageオブジェクトを利用する際には、
    最初にWebPageモジュールを読み込む必要があります。
    その後、.create()によって、1つのWeb Pageオブジェクトを生成させます。

  3. WebPageオブジェクトの.open()によって、対象のWebページの情報を抽出します。
    その後の処理内容に関しては、Callback関数の中に定義します。

  4. .render()は対象のWebページをレンダリングし、Imageファイルにする関数です。
    引数にパスとファイル名を指定することで、指定したパスにファイルが保存されます。

  5. 最後にPhantomオブジェクトの.exit()により、全体のプロセスを終了させます。


最後に

いかがでしたでしょうか。
今回の内容では、PhantomJSをWebサイト解析に利用するイメージはできなかったと思いますが
次回は少し踏み込んで、PhantomJSをWebサイト解析に利用する際の話をしようと思っています。

ヒトクセの各種サービスお問い合わせは
こちらからお気軽にどうぞ。
お問い合わせフォーム