【GAS】天気予報を表示するアプリを作る～HTMLに一部表示～【第3回】

2022/06/212023/12/06

前回は、ログに気温と降水確率を表示させるアプリを作りました。今回は、それを使ってHTMLに内容を入れていきたいと思います。

Contents

1. HTMLに表示させる
2. 最後に
3. 【GAS】天気予報を表示するアプリを作る～目次～

HTMLに表示させる

以前の記事を応用して作っていきます。

【GAS】Hello Worldと表示させるだけのWEBアプリを作る

前回は、GASについてどんなものなのか調べたので、今回は実際に使っていきます。Google Apps Scriptを ...

https://poppoco.com/gas-tutorial01-3556/

この記事では2種類の文字列を表示させる方法を取りました。getMessege()を使うとかんたんに表示させることができそうなので、これを使って作っていきます。

GAS側

doGetを作っただけで、中身は変わらずに使えます。実際に表示させるときは、「console.log」を使っても見れないので消してもいいでしょう。

function doGet(){
  var htmlTemplate = HtmlService.createTemplateFromFile('index');
  htmlTemplate.message1 = '';
  htmlTemplate.message2 = '';
  return htmlTemplate.evaluate();
}
function getMessage(){
  const weatherUrl = 'https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json'
  var weatherj = UrlFetchApp.fetch(weatherUrl);
  console.log(weatherj);
  var weather = JSON.parse(weatherj);
  console.log(weather);
  for(let i=0;i<=2;i++){
    console.log(weather[0]["timeSeries"][1]["timeDefines"][i] + "：" + weather[0]["timeSeries"][1]["areas"][0]["area"]["name"] + "：降水確率" + weather[0]["timeSeries"][1]["areas"][0]["pops"][i]);
  }
  for(let i=0;i<=1;i++){
    console.log(weather[0]["timeSeries"][2]["timeDefines"][i] + "：気温" + weather[0]["timeSeries"][2]["areas"][0]["temps"][i]);
  }

  return weather;

HTML側

配列でreturnしているので、console.logで使用した表示方法がそのまま使えます。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?
     var weather = getMessage();
     output.append('<p>'+ '地方：'+ weather[0]["timeSeries"][1]["areas"][0]["area"]["name"] +'</p>');
     output.append('<p>'+ '降水確率：' +'</p>');
     for(let i=0;i<=2;i++){
       output.append('<p>' + weather[0]["timeSeries"][1]["timeDefines"][i] + "：" +  weather[0]["timeSeries"][1]["areas"][0]["pops"][i] + '</p>');
       }
     output.append('<p>'+ '気温：' +'</p>');
     for(let i=0;i<=1;i++){
       output.append('<p>'+ weather[0]["timeSeries"][2]["timeDefines"][i] +'：'+ weather[0]["timeSeries"][2]["areas"][0]["temps"][i] +'</p>');
       }
    ?>
  </body>
</html>