GASで天気予報がGoogleドキュメントに表示されるようにした話

GASってスプシばっかりだよね？？

いや、そーじゃないって意見もあるかもだけど。

出オチでごめんなさい、下のコードをGoogleドキュメントのエディタに貼って実行すると最新の天気予報と天気図がGoogleドキュメントに反映されるよ！

あとはGoogleWorkspaceのサイトにこのドキュメントをインサートしとけばオリジナルお天気サイトの出来上がりだ！

※HTMLデプロイしろとか言わないで・・・。

で、こんなもんYAHOO!天気でええやんけ。
って思うでしょ？

それが結構使い勝手イイんですよ。

身の回りで、自分の場合はお子様が

「サンタさんいつくるの？」

って聞いてくるたびにこの天気図にサンタさんのイラスト挿入して
見せてそれっぽいことを吹き込んでます。

function createHTMLFromJSON() {
  // JSONデータを取得
  // 例えば広島のエリアコード、340000を変数に入れる。
  const office_area_code = "340000";
  const url = `https://www.jma.go.jp/bosai/forecast/data/forecast/${office_area_code}.json`;
  const jsonData = JSON.parse(UrlFetchApp.fetch(url).getContentText());

  // Googleドキュメントのアクティブなドキュメントと本文を取得
  const doc = DocumentApp.getActiveDocument();
  const body = doc.getBody();

  // タイトルを挿入
  const title = body.appendParagraph(jsonData[0].publishingOffice + ' - ' + Utilities.formatDate(new Date(jsonData[0].reportDatetime), 'JST', 'yyyy年MM月dd日 HH:mm') + '発表');
  title.setFontSize(14);

  // 各地域の情報を挿入
  for (let i = 0; i < jsonData[0].timeSeries[0].areas.length; i++) {
    const area = jsonData[0].timeSeries[0].areas[i];

    // 各項目を挿入
    const areaName = body.appendParagraph("\n●"+area.area.name + ':');
    areaName;

    if (Array.isArray(area.weathers)) {
      body.appendParagraph('\n天気: ' + area.weathers.join(', '));
    } else {
      body.appendParagraph('天気情報がありません');
    }

    if (Array.isArray(area.winds)) {
      body.appendParagraph('\n風: ' + area.winds.join(', '));
    } else {
      body.appendParagraph('風の情報がありません');
    }

    if (Array.isArray(area.waves)) {
      body.appendParagraph('\n波: ' + area.waves.join(', '));
    } else {
      body.appendParagraph('波の情報がありません');
    }
  }

  // 予報、気温、過去の情報、平均気温、平均降水量を挿入

  const jsonImageListUrl = "https://www.jma.go.jp/bosai/weather_map/data/list.json"
  const jsonImageDataList = JSON.parse(UrlFetchApp.fetch(jsonImageListUrl).getContentText());



  // エラーチェック
  if (jsonImageDataList[1] && jsonImageDataList[1].timeSeries && jsonImageDataList[1].timeSeries[0] && jsonImageDataList[1].timeSeries[0].areas) {
    // 過去の情報を挿入するコード
  }

  for (const category in jsonImageDataList) {
    if (jsonImageDataList.hasOwnProperty(category)) {
      body.appendParagraph(category); // カテゴリ名を文書に挿入
      const images = jsonImageDataList[category]["now"];
      for (const imageUrl of images) {
        if (imageUrl) {
          const imageBlob = UrlFetchApp.fetch(`https://www.jma.go.jp/bosai/weather_map/data/png/${imageUrl}`).getBlob();
          body.appendImage(imageBlob); // 画像を文書に挿入
        }
      }
    }
  }
}

これをGoogleドキュメントのGASエディターに貼ってください。
とりあえず手動でで動かして動作確認してみてね。

出来上がり

で、GoogleドキュメントをGoogleサイトの挿入すればおしまい。

出てくる天気図の画像ファイルが多くて動作に時間がかかっちゃうのでそこは適宜調整してみてください。

とりあえずこんなことできるんだー。
って疑似スクレイピング体験のススメでした。

ドキュメントのGASも結構楽しいよ。