GASでyahoo!天気から天気の画像、天気予報、最高気温、最低気温を取得し、スプレッドシートに書き出したいです。

Question

実現したいこと

GASでyahoo!天気から天気の画像、天気予報、最高気温、最低気温を取得し、スプレッドシートに書き出したいです。
対象リンク：
https://weather.yahoo.co.jp/weather/jp/13/4410.html#week
書き出し先：B2:I5
8日分を横並びで、行は上から天気画像・天気予報・最高気温・最低気温です。

発生している問題・分からないこと

こちらのリンクから取得していますが、最高気温・最低気温の取得がうまくできません。
yahoo!天気は、「今日」と「明日」の天気は別な表になっており、連続で８日分を処理するのに具体的な、htmlの指定方法がわからずいます。

該当のソースコード

function weatherReport1() {

  //シートの指定
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

  //ソースを取得しテキスト化
  var data = UrlFetchApp.fetch('https://weather.yahoo.co.jp/weather/jp/13/4410.html#week').getContentText();

  //スキップキーワード設定（４つめ以降は同じなので fill を使い省略）
  var skipWord = ['今日・明日の予報','<ul class="temp">','<small>天気</small>',,,,,,].fill('</small>',3);

  //２行８列の配列を宣言※
  for(var arr=[]; arr.length<2;) arr.push(Array(8));

  //TextPickerにテキスト化したソースを格納
  TextPicker.open(data);

  //８日分繰り返し
  for(var i=0; i<8; i++){

    //スキップキーワードまでスキップ
    TextPicker.skipTo(skipWord[i]);

    //アイコンのURL取得
    var imgUrl = TextPicker.pickUp('<img src="','" border');

    //URLからセル埋め込み画像を取得し配列へ格納
    arr[0][i] = SpreadsheetApp.newCellImage().setSourceUrl(imgUrl).build();  

    //予報を取得し配列へ格納
    arr[1][i] = TextPicker.pickUp('alt="','">');
  }
  //配列をスプレッドシートへ書き出し
  sheet.getRange(2,2,2,8).setValues(arr);
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

GASで天気を取得する方法を掲載している記事は見つけられましたが、気温に関する記載部分をhtmlからどのように取得すべきかがわからず、こちらで質問しています。

補足

GAS初心者で、基礎的な質問になるかもしれませんが、ご教示いただけますと幸いです。

Comments

[meg_]

> https://weather.yahoo.co.jp/weather/jp/13/4410.html#week
こちら見られないようです。

[light_shun]

meg_さん
https://weather.yahoo.co.jp/weather/
こちらでも閲覧できないでしょうか？
こちらのリンクから東京を選択いただくと、閲覧できるかと存じます。

[meg_]

> こちらでも閲覧できないでしょうか？
そちらなら見られます。
> こちらのリンクから東京を選択いただくと、閲覧できるかと存じます。
質問は後からでも編集可能です。

Answer 1

現在のコードとHTMLと比較しながら順に動作を追っていけば、
TextPicker.skipToとTextPicker.pickUpを
どのように組み合わせればいいのかがわかります。

明後日以降が別立てになっているので
同じ動作の繰り返しというわけにはいかず面倒ですね。

変数・配列宣言などの若干の修正と、
気温を取得するコードを追加したサンプルです。

function weatherReport1() {
  //スキップキーワード設定（それぞれ４つめ以降と2つめ以降は同じなので fill を使い省略）
  const skipWord = ['今日・明日の予報', '</table>', '<small>天気</small>', , , , , ,].fill('</small>', 3); //2番目のスキップワードを変更
  const skipWord2 = ['<small>気温（℃）</small>', , , , , ,].fill('</small>', 1); //明後日以降の気温の取得用

  //ソースを取得しテキスト化
  const data = UrlFetchApp.fetch('https://weather.yahoo.co.jp/weather/jp/13/4410.html#week').getContentText();

  //TextPickerにテキスト化したソースを格納
  TextPicker.open(data);

  //4行８列の配列を宣言
  const arr = Array(4).fill('').map(_ => Array(8)); //constにしたので宣言方法を変更

  //８日分繰り返し
  for (let i = 0; i < 8; i++) {
    //スキップキーワードまでスキップ
    TextPicker.skipTo(skipWord[i]);

    //アイコンのURL取得
    const imgUrl = TextPicker.pickUp('<img src="', '" border');

    //URLからセル埋め込み画像を取得し配列へ格納
    arr[0][i] = SpreadsheetApp.newCellImage().setSourceUrl(imgUrl).build();

    //予報を取得し配列へ格納
    arr[1][i] = TextPicker.pickUp('alt="', '">');

    //--ここから（追加）------------------------
    // 今日・明日の最高・最低気温を格納
    if (i < 2) {
      arr[2][i] = TextPicker.pickUp('high"><em>', '<');
      arr[2][i] += TextPicker.pickUp('/em>', '</li>');
      arr[3][i] = TextPicker.pickUp('low"><em>', '<');
      arr[3][i] += TextPicker.pickUp('/em>', '</li>');
    }
  }

  // 明後日以降の気温を取得
  for (let i = 0; i < 6; i++) {
    //スキップワードまでスキップ
    TextPicker.skipTo(skipWord2[i]);

    // 明後日以降の最高・最低気温を格納
    arr[2][i + 2] = TextPicker.pickUp('"#ff3300">', '<');
    arr[3][i + 2] = TextPicker.pickUp('"#0066ff">', '<');
  }
  //--ここまで（追加）------------------------

  //配列をスプレッドシートへ書き出し
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  sheet.getRange(2, 2, 4, 8).setValues(arr);
}

Comments

[light_shun]

すごいです！
きれいにご回答いただきありがとうございます！
とても分かりやすいです！