5078


あるサイトの HTML を取得して更新をチェックするというスクリプトを書こうとしています。

wget を使用してHTML ファイルを取得したところ、 JavaScript が使用されていたサイトであった為、JavaScript
のコードが取得できただけで実際のデータを取得することはできませんでした。

このような場合、 JavaScript を実行した結果を取得する方法はどのようなものがあるのでしょうか？

最近、 Ruby を触りはじめたこともあり、 RubyToolbox で "HTML get JavaScript"
と検索してみましたが、思ったようなライブラリが見つけられず困っています。

もし情報ありましたら、教えていただけないでしょうか。

よろしくお願いいたします。


CC BY-SA 3.0
2015-01-22T09:46:57.247
5075
2015-01-23T09:43:38.820
2015-01-22T10:47:46.070
4978
4260
question
javascript ruby html
JavaScript が実行された後の HTML を取得したい


[phantomjs](http://phantomjs.org/) を使うと javascript の実行結果が得られます。

[code]

    var page = require('webpage').create();
    page.open('http://example.com', function (status) {
      if (status !== 'success') {
        console.log('Unable to access the URL!');
      } else {
        page.evaluate(function () {
          // document.body を使ってあれこれ
        });
      }
      phantom.exit();
    });
    
[/code]

もちろん phantomjs は webkit ですので、IE で実行した結果は得られません。


CC BY-SA 3.0
2015-01-22T10:04:26.853
5077
2015-01-22T10:04:26.853
440
5075
answer


JS を使ったサイトを相手にする時、私が使っているのは Watir WebDriver です。

  * [Watir WebDriver | the most elegant way to use webdriver with ruby](http://watirwebdriver.com/)

日本語情報があまりないのが弱点なのですが、かなり便利です。  
ちなみに Watir（ water と同じ発音だそうです）は Selenium のラッパーで、 Selenium よりも格段に使いやすいです。  
ただオブジェクトとしては扱いづらいので、必要な画面（HTML）になったら HTML に戻して Nokogiri でパースして切ってます。

日本語情報としては

  * [Watir でIEやGoogle Chromeを自動操縦する - Qiita](http://qiita.com/rohinomiya/items/389d75daa97e9d2275cc)
  * [5分でわかるWatir - にのせき日記](http://d.hatena.ne.jp/ninoseki/20111003/1317650033)
  * （1/23 18:30追記）[日々の記録 category > watir](http://foo_buzz.bitbucket.org/category/watir/index.html)（リンク集もある）

などが使えるでしょう。  
細かい指定などは

  * [Read Watirways | Leanpub](https://leanpub.com/watirways/read)（マニュアル本）
  * [File: README — Documentation for watir-webdriver (0.6.11)](http://www.rubydoc.info/gems/watir-webdriver)（YARD）

で確認してください。

（私自身も Watir の紹介記事を書こうと思いつつ書けてませんorz）

## 追記

具体例として、StackOverflow 日本版へのログイン（ StackExchange のメールアドレス＆パスワードを使用）を、 pry 環境下で
Watir Webdriver と PhantomJS を使って行ってみます。  
さらに（ Nokogiri
の使い方の例として）私が回答した記事のタイトル（いま５つあります）を取得してみます（質問内容からは少し離れますがご容赦ください）。

Watir-Webdriver gem と PhantomJS はインストール済みとします。  
Watir Webdriver のインストールは `gem install watir-webdriver` で OK です。  
PhantomJS のインストールなどに関しては [Download |
PhantomJS](http://phantomjs.org/download.html) を参照してください。

[code]

    require 'nokogiri'
    #=> true
    require 'watir-webdriver'
    #=> true
    browser = Watir::Browser.new(:phantomjs) # ブラウザオブジェクト（？）を生成
    #=> #<Watir::Browser:0x..fe8d4c9dbde437598 url="about:blank" title="">
    browser.goto("http://ja.stackoverflow.com/") # 目的のサイトへ移動
    #=> "http://ja.stackoverflow.com/"
    browser.a(:xpath, '/html/body/div[4]/div/div[3]/div[1]/span/a[2]').click # ログイン画面へのリンクをクリック（XPath はもちろん略して '//div[4]/div/div[3]/div[1]/span/a[2]' とかにも出来ます）
    #=> []
    
    # PhantomJS では不要だが Chrome などでは必要な項目
    browser.p(:xpath, '//div[@id="se-signup-legend"]/p').click # emailフィールドなどが見えない状況なので見えるようにする。
    #=> []
    
    email = browser.text_field(:name, "email") # emailフィールドの要素取得
    #=> #<Watir::TextField:0x..f9b0836120579f650 located=false selector={:name=>"email", :tag_name=>"input or textarea", :type=>"(any text type)"}>
    email.value = "riocampos@xxx.com" # email 入力
    #=> "riocampos@xxx.com"
    password = browser.text_field(:name, "password") # passwordフィールドの要素取得
    #=> #<Watir::TextField:0x35892c3f7283a538 located=false selector={:name=>"password", :tag_name=>"input or textarea", :type=>"(any text type)"}>
    password.value = "xxxxxxxxxxxx" # パスワード入力
    #=> "xxxxxxxxxxxx"
    browser.form(:id, 'se-login-form').submit # ログインフォームを送信
    #=> nil # これで StackOverflow にログイン出来ました
    browser.a(:xpath, '//div[@class="topbar-links"]/a').click # マイページへのリンクをクリック
    #=> []
    answer_table_html = browser.table(:xpath, '//table[@class="user-answers lines"]').html; # 自分の回答履歴の表示されている部分のテーブル要素を取得して HTML に変換
    ## HTML が返ってくる（省略）
    answer_table_doc = Nokogiri::HTML.parse(answer_table_html); # Nokogiri::HTML オブジェクトに変換
    ## （返値省略）
    answer_table_doc.xpath('//td[@class="answer-hyperlink"]/a').map { |anchor| anchor.text } # 回答履歴の件名を配列で取得
    #=> ["ディレクトリではないはずなのに、“Is a directory” というエラーが出る",
    # "JavaScript が実行された後の HTML を取得したい",
    # "rubyのeachを使用したファイルの結合方法について",
    # "プログラミング言語または英語圏の新語のリストを配布しているサイトを探しています",
    # "RubyGems 自体を削除したい"]
    
    browser.quit # ブラウザオブジェクトを削除
    #=> true
    
[/code]

上記では使用しませんでしたが、デバッグの際に役立つのがスクリーンショットです。

[code]

    browser.screenshot.save("top.png")
    
[/code]

のようにすると png ファイルで保存できます（ファイル形式は残念ながら png 限定です）。

なお、 自動作業を行う場合には PhantomJS を使いますが、ローカルで実行する場合や試行錯誤の状況では
（[ChromeDriver](http://watirwebdriver.com/chrome/) をインストールした環境下での）Chrome や
（[SafariDriver](http://watirwebdriver.com/safari/) をインストールした環境下での）Safari
などを使った方が格段にラクだと思います。それぞれブラウザオブジェクトを生成する際に

[code]

    browser = Watir::Browser.new(:chrome)
    browser = Watir::Browser.new(:safari)
    
[/code]

とすれば良いです。


CC BY-SA 3.0
2015-01-22T10:28:03.390
5078
2015-01-23T09:43:38.820
2020-06-17T08:14:45.997
-1
4114
5075
answer


一番簡単なのは、`Firefox`で表示させた後、`Ctrl+A`で全てのページ(もしくは更新された箇所)を選択し、右クリック→「選択した部分のソースを表示」です。

手動で良ければ、ですが･･･


CC BY-SA 3.0
2015-01-23T02:55:19.027
5121
2015-01-23T02:55:19.027
7214
5075
answer