開発者ツールに表示されている内容と実際に取得できた内容が異なる

Question

実現したいこと

下記サイトから下記内容を取得したいと考えています．ブラウザの開発者ツールから見た内容と，後述するコードにて取得した内容が異なってしまいます．どのようにして合わせたらいいかご教示いただけないでしょうか？よろしくお願いいたします．
https://weathernews.jp/s/pain/city.html?lat=38.0151938888889&lon=138.371501944444
取得内容

• <div class="item trasparent">タグの最後のところに含まれる内容を取得したい
• <p class="ti">の内容が開発者ツールと取得した内容で異なっている

発生している問題・エラーメッセージ

後述のコードで取得できし，tmpdの変数に格納される内容が下記のとおりです．
<p class="da sun day-change">21<span class="week">(日)</span></p> <p class="ti">0</p> <p class="fc lv0"><img src="//smtgvs.weathernews.jp/s/pain/images/statusA/Lv0.svg"><span class="txt">安心</span></p> <p class="we"><img src="//mwsgvs.weathernews.jp/s/img/telop/600.png"></p> <p class="ap">987</p>

開発者ツールから確認できた内容は添付画像のとおりです．![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-21/bbf3022e-27f4-4496-a68b-c3abc83e8377.png)

該当のソースコード

const level = ["安心", "やや注意", "注意", "警戒"]
var date = new Date(); // 現在時刻を取得
var futureDate = new Date(date.getTime() + (36 * 60 * 60 * 1000)); // 36時間後の日付を計算

var hour = futureDate.getHours(); // 時間を取得
var nearestHour = Math.floor(hour / 3) * 3; // 最も近い3の倍数の時間を計算

var targetDate = getClosestTime()//new Date(futureDate.getFullYear(), futureDate.getMonth(), futureDate.getDate(), nearestHour, 0, 0, 0); // 最も近い3の倍数の時間の日付を作成

function main_dataStorage() {
  //URL指定
  var tgtSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('2:取得データ');

  const url = tgtSheet.getRange("A2").getValue()
  //getResource関数を呼び出し
  var APIKEY = tgtSheet.getRange("G2").getValue()
  var response = getResource(url, APIKEY);
  //parseResponse関数を呼び出し
  var source = parseResponse(response);

  //地域を取得
  var area = Parser.data(source)
    .from('class="tit-h1">')
    .to('の天気痛予報')
    .build();
  var prefec = Parser.data(source)
    .from('index.html?')
    .to('</a>')
    .iterate();

  var strt = prefec[1].indexOf(">") + 1
  var last = prefec[1].length
  var head = prefec[1].substring(strt, last)

  var area = head + area
  tgtSheet.getRange("B1").setValue(area)

  //スクレイピングの対象をすべて取得する
  var items = Parser.data(source).from('<div class="item transparent">').to('</div>').iterate();
  var tmpd = items[items.length-1]
  Logger.log(tmpd)

  //時刻を取得する
  var hh = parseInt(Parser.data(tmpd).from('"ti">').to("</p").build())+6
  var today = Utilities.formatDate(new Date(), 'JST', 'yyyy/MM/dd HH');
  // today.;
  // today.setMinutes(0);
  // today.setSeconds(0);
  // today.setMilliseconds(0);


 
}




function getResource(target_url, APIKEY) {
  //HTTPSレスポンスに設定するペイロードのオプション項目を設定する
  var _options = {
    url: target_url,
    renderType: "html",
    outputAsJson: true
  };

  //オプション項目をJSONにしてペイロードとして定義し、エンコードする
  var _payload = encodeURIComponent(JSON.stringify(_options));
  //PhantomJsCloudのAPIリクエストを行うためのURLを設定  
  var _request =
    "https://phantomjscloud.com/api/browser/v2/" +
    APIKEY +
    "/?request=" +
    _payload;
  //設定したAPIリクエスト用URLにフェッチして、情報を取得  
  var _response = UrlFetchApp.fetch(_request).getContentText();

  return _response;
}

function parseResponse(response) {
  //取得したjsonデータを配列データとして格納
  var _json = JSON.parse(response);
  //APIから取得したデータからJSから生成されたソースコードを取得  
  var _source = _json["content"]["data"];

  return _source;
}

function getCurrentDate() {
  var date = new Date(); // 現在の日付を取得
  var options = { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short' };
  var formattedDate = date.toLocaleDateString('ja-JP', options); // フォーマットを指定して日付を文字列化
  return formattedDate//.replace(/\//g, ""); // / を削除して返す
}

  
}

Answer 1

UrlFetchAppで得られるのは、指定URLにHTTPプロトコルでGETした結果のHTMLですが、
ウェブブラウザでそのURLを指定して表示されるのは、得たHTMLからJavaScriptが起動されてJavaScriptが加工した結果のHTMLなので、一般的には異なります。（JavaScriptで加工しないページだと一致する）

コード中にAPIという文字が見えるのですが、WebAPIだとプログラムでそのまま処理可能なデータの形でデータが返されるはずです。
WebAPIじゃなくて、ウェブブラウザーで人間向けに表示されるページから情報を取得するのであれば、ブラウザを使うなりしてJavaScriptの処理結果を反映する必要があります。

解決策としては、
案1：人間向けのページじゃなくて、プログラム処理向けのWebAPIを使う（提供されている場合）
案2：一般のプログラム実行環境であればSeleniumライブラリー等ウェブブラウザーを制御して処理する・・・GASのような環境の場合はどうするのかと、ググってみると、PhantomJsCloud という外部サービスを使ってJavaScript加工後のページを取得したという例が見つかりました。

Comments

[Kodanosuke]

返信ありがとうございます。

ご指摘いただいているAPI のところは、回答の中に出てきていたphantomJScloud経由でスクレイピングしております。
そちらを経由しても今回のような問題が発生するため、解決策をご教示いただけないかと思っています。
言葉足らずで申し訳ありません。

もし何かご存知でしたら教えていただけないでしょうか。
よろしくお願いします。

[otn]

失礼しました。文中に特に何も書いてなかったので、プログラムを部分的にしか見てませんでした。

phantomJScloudの制約ですかね。
あるいは、対象サイトがスクレイピングを嫌がって防止している可能性もありますが、規約で禁止してないことを確認済みであれば、関係ないでしょうね。

私なら、
・phantomJScloudの制約事項（「こういうケースでは対応できない」など）を精査
・手元PCでSeleniumを使ってどうなるか確認。それがうまくいく前庭で、ブラウザをヘッドレスモードでどうなるか確認
とかでしょうか。JavaScriptでブラウザの情報（UAや画面サイズなど）を取得して何かしている場合にうまく行かないとかあるのかもしれません。