夏だしオバケ怖いってことでPhantomJSを使ってスクレイピング試してみた

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは！最近めっきりカップラーメンを食べることがなくなり(めっちゃしょっぱく感じる)、
「歳食ったなぁ」としみじみ思う僕ですが、まだまだ若い人たちには負けないつもりで頑張っていこうと思います！
今回はPhantomJSを使って、ホームページをスクレイピング(キャプチャーを取る)するということを試したので、それを記事にしてみました！

ご興味あれば是非！では行ってみよ〜

PhantomJSって？

http://phantomjs.org/

通常webページを閲覧するためにはGoogle ChromeやFirefox、Safariといったブラウザが必要ですが、
PhantomJSにはwebkit(レンダリングエンジン)が組み込まれており、通常のブラウザを使わなくても、ヘッドレスブラウザを作成して、
webページを表示したり、JavaScirptで操作したりといったことができます。
実際の操作はターミナルなどCUIで行います。僕の環境がMacですので、ここではターミナル操作でお話していきます。

※補足
操作するための画面(GUI)・インターフェイスが無いブラウザをヘッドレスブラウザと呼びますが、ヘッドレスブラウザにはたくさんの種類があります。
以下に明るいので、ご興味あれば覗いてみてください。
https://github.com/dhamaniasad/HeadlessBrowsers
また、Google Chromeもヘッドレスモードが実装されたみたいですが、まだ試せていません（　；　；）

PhantomJSで何ができるの？

ヘッドレスブラウザを立ち上げて、webページを操作できるということで、
テストの自動化やスクレイピングなどによく使われるそうです。

下準備

物は試しです。PhantomJSを動かすための準備をしましょう！

PhantomJSのインストール

直接以下からダウンロードしてということも可能ですが、
http://phantomjs.org/download.html
パスを通すといった設定が必要ですので、今回はnpmを使ってインストールして使おうと思います。

インストールされたか確認

バージョンが表示されればOKです

記述方法と実行の基本

→ jsファイルを作成して、そこに記述
→ 記述後はターミナルからコマンドを打って実行
って流れです。

動かしてみる

それではここから実際に動かしてみましょう！

メッセージを表示してみます。

適当にディレクトリとjsファイルを用意します。
phantom-test
┗ sample.js

作成したsample.jsに以下を記述します。

記述を書いたら実行してみましょう。
実行はターミナルから行います。

ターミナル上に「これはこれはテストです。」とメッセージが表示されればOK！

ヘッドレスブラウザを立ち上げてキャプチャを撮る

では実際にキャプチャを撮ってみましょう！

GrowGroupのキャプチャが撮れました！
デフォルトではカレントディレクトリに保存されます。

キャプチャのサイズを変更してみる

撮ってみるとわかるのですが、キャプチャが小さいですね
弊社のWEBサイトはレスポンシブデザインでスマートフォンと切り替わるようになっているので、
スマートフォン版がキャプチャーされます。
PC版でキャプチャが欲しいのでのサイズを変更してみましょう！
せっかくなのでファイル名も変更します！

PC版、スマホ版のキャプチャが撮れました〜（＾　＾）

ページ内の情報を取得してみる

ここで今日の記事は終了(早い)ですが、せっかくですので他の操作もしてみましょう。
全然実感がわかないですが、PhantomJSでpage.openでページにアクセスしている状態になっているので、JavaScriptを使ってブラウザを操作できる状態にあります。
今回はディスクリプションを取得して表示してみましょう！

ターミナルにディスクリプションが表示されればOKです！