Google Apps Scriptでスクレイピングを行い、トピックスのリンクと名前を取得したい

Question

実現したいこと

GASを使って、Yahoo! JAPANニューストピックスのリンク先とタイトルを取得し、取得した内容をメールで通知するようにしたい。
※取得したいトピックスは、下図の赤枠エリア

上記でいえば、
”https://news.yahoo.co.jp/pickup/6374265:菅首相の初外遊 狙いと成果は”
のような文字列が8件分メールに表示される想定です。

試したこと

GASで下記コードを記述

function getNews() {
  
  // Yahoo!ニュースからHTMLを取得
  var response = UrlFetchApp.fetch("https://news.yahoo.co.jp/");
  var html = response.getContentText('UTF-8');
  
  // class名がtopicsListItemのliタグを取得
  var targetsRegexp = /<li class="topicsListItem([\s\S]*?)</li>/g;
  var targetsDOM = html.match(targetsRegexp);
  
  // li内にあるURLの検索条件
  var linkRegexp = /<a href="([\s\S]*?)"/;

  // li内にあるニュースタイトルの検索条件
  var titleRegexp = /data-rapid_p=([\s\S]*?)>([\s\S]*?)</;

  // メール本文取得
  var note = ""; 
  targetsDOM.forEach(function(target){
    link = target.match(linkRegexp);
    title = target.match(titleRegexp);
    
    note += link[1] + ":" + title[1] + "\n";
  })
 
  // ニュースをメールで通知する
  MailApp.sendEmail({
    to: "〇〇〇@gmail.com",
    subject: "ニュースです",    
    body: note
  });

}

上記実行すると下記エラーが表示されます。

TypeError: Cannot read property '1' of null（行 19、ファイル「getNews」

調査したところ、サイトのリンクは取得できていたのですが、タイトルが取得できていないようです。
（titleがnullで返ってきてました…）

↓ですので、問題の箇所はこの部分だと思っているのですが、いまだにどうすれば良いのか分からず。

// li内にあるニュースタイトルの検索条件
var titleRegexp = /data-rapid_p=([\s\S]*?)>([\s\S]*?)</;

原因など分かる方がいらっしゃれば、ご教示いただけると幸いです。
よろしくお願いいたします。

Comments

[sawa]

console.log(targetsDOM) でログを確認してみることをお勧めします。

[Suumon]

targetsDOMは取得できているのは、確認済みです。

実際targetsDOMからlinkを取得できているので、
titleを取得する正規表現が間違っているのが私の考えでした。

[Suumon]

ntoさんの回答で解決いたしました。
アドバイスいただきありがとうございました。

[Suumon]

sawaさん

targetsDOMのログを再度確認したところ、
DevtoolのElementsとは異なるものが表示されておりました。

私は、sawaさんのご指摘が
"targetsDOMの中身がとれていないのでは？”
という意味で回答されていたのかと思っていたのですが、そうではなかったのですね。。
申し訳ございませんでした。

[sawa]

いえいえ。私も言葉足らずでした。解決に至りなによりです。
デベロッパーツールだと表示が違うのは知らなかったので、勉強になりました。

Answer 1

ソースコードを確認する際にデベロッパーツールを使用していませんか？

-- var titleRegexp = /data-rapid_p=([\s\S]*?)>([\s\S]*?)</;
++ var titleRegexp = /data-ual-gotocontent="true">([\s\S]*?)</;

Comments

[Suumon]

お、できました！
ありがとうございます。

> ソースコードを確認する際にデベロッパーツールを使用していませんか？

いつも使っております。

デベロッパーツールで確認したところ、
aタグ内で指定されている最後の属性が、data-rapid_p="〇〇"だったので、
質問内容に記載した方法で取得しようと思っておりました。

> data-ual-gotocontent="true">

"true"で閉じてしまってもよかったのですね…
やっぱり正規表現の使い方が分かっていなかったのが原因ですかね。。
勉強不足でした。

[nto]

恐らく(推測論で申し訳ないです)ですが、gotocontentがfalseになっている要素はないと思うので
trueでよかったかと思います。
GASやJSについては専門外の為仕様などは詳しくはわかりませんが、動的に生成された要素とソースコードは異なるものなので、デベロッパーツール上と純粋なソースコードとは異なる場合があります。
またブラウザ上でAddBlockなどのアドオンを使用している場合にも注意が必要です。
windowsならばCTRL+U, macならばcommand+option+Uでソースコードが確認出来ます。

[Suumon]

> 恐らく(推測論で申し訳ないです)ですが、gotocontentがfalseになっている要素はないと思う

gotocontentという名前的にfalseはないと思うので、
私もこれででよいのではと思っております。

> GASやJSについては専門外の為仕様などは詳しくはわかりませんが、動的に生成された要素とソースコードは異なるものなので、デベロッパーツール上と純粋なソースコードとは異なる場合があります。

本当でした…。知らなかったです。
また、Ctrl + Uで見れることも知らなかったです。今後のためにも覚えておきます。