Nokogiriを使ってa href要素の中身を取得したい


<https://live.line.me/channels/36186>

上記の配信一覧ページから、各配信のURLが格納されている a href要素の中身を取得したい。  
[![画像の説明をここに入力](https://i.stack.imgur.com/29tvD.png)](https://i.stack.imgur.com/29tvD.png)

Google Chromeでソースコードを開き"Copy Xpath"したところ、以下のパスが取得できた。

[code]

    /html/body/div[3]/div/div[2]/div[1]/div/ul/li/div/div/a
    
[/code]

コレを基に以下のプログラムを実行したが、空が返ってくるだけで要素の中身が取得できない。

[code]

    source = open("https://live.line.me/channels/36186").read
    doc = Nokogiri::HTML.parse(source)
    
    doc.xpath("/html/body/div[3]/div/div[2]/div[1]/div/ul/li/div/div/a")
    
[/code]

次に以下にコードを変えてを実行すると、

[code]

    doc.xpath("/html/body/div[3]/div/div[2]/div[1]/div/ul/li/div/div/a").attribute("href")
    
[/code]

このようなエラーが出た。

[code]

    node_set.rb:164:in `attr': undefined method `attribute' for nil:NilClass (NoMethodError)
    
[/code]




<https://live.line.me/channels/36186>

上の配信一覧ページのソースを確認したところ、DOMはJavaScriptによって動的に生成されているので、Nokogiriから
`/html/body/div[3]/div/div[2]/div[1]/div/ul/li/div/div/a`
のようなDOMにアクセスすることはできません。

代わりに、`<div id="data" data-channel="ここの部分">` に配信一覧の情報が載っているので、これをパースします。

[code]

    require 'open-uri'
    require 'nokogiri'
    require 'json'
    require 'pp'
    
    source = open("https://live.line.me/channels/36186").read
    doc = Nokogiri::HTML.parse(source)
    
    data_text = doc.xpath("//div[@id='data']").attribute("data-channel").value
    data      = JSON.parse(data_text)
    
    # pp data  # 配信一覧の情報の情報
    
    p data["liveBroadcasts"]["rows"][0]["shareURL"]
    
[/code]




<https://live.line.me/channels/36186>

上の配信一覧ページのソースを確認したところ、DOMはJavaScriptによって動的に生成されているので、Nokogiriから
`/html/body/div[3]/div/div[2]/div[1]/div/ul/li/div/div/a`
のようなDOMにアクセスすることはできません。

代わりに、`<div id="data" data-channel="ここの部分">` に配信一覧の情報が載っているので、これをパースします。

[code]

    require 'open-uri'
    require 'nokogiri'
    require 'json'
    require 'pp'
    
    source = open("https://live.line.me/channels/36186").read
    doc = Nokogiri::HTML.parse(source)
    
    data_text = doc.xpath("//div[@id='data']").attribute("data-channel").value
    data      = JSON.parse(data_text)
    
    # pp data  # 配信一覧の情報の情報
    
    p data["liveBroadcasts"]["rows"][0]["shareURL"]
    
[/code]

