天気予報

view source

JavaScript

//https://open-meteo.com/

$(function(){
  
  var url = 'https://api.open-meteo.com/v1/forecast?latitude=35.6785&longitude=139.6823&hourly=temperature_2m,weathercode&current_weather=true&timezone=Asia%2FTokyo';
  $.getJSON(url, function(data) {
    console.log(data);
    run(data);
  });
  var weatherTexts = function(code){
    if(code===0){
      return {text:'晴',icon:'w-clear.png'};
    } else if(code<3){
      return {text:'晴',icon:'w-cloudy1.png'};
    } else if(code<4){
      return {text:'曇',icon:'w-cloudy2.png'};
    } else if(code<49){
      return {text:'霧',icon:'w-cloudy2.png'};
    } else if(code<56){
      return {text:'霧雨',icon:'w-rain.png'};
    } else if(code<64){
      return {text:'雨',icon:'w-rain.png'};
    } else if(code<68){
      return {text:'雨',icon:'w-rain.png'};
    } else if(code<79){
      return {text:'雪',icon:'w-snow.png'};
    } else if(code<88){
      return {text:'雷',icon:'w-storm.png'};
    } else if(code<99){
      return {text:'雷',icon:'w-storm.png'};
    } else {
      return {text:'?',icon:'w-q.png'};
    }
  }

/*
WMO Weather interpretation codes (WW)
Code	Description
0	Clear sky
1, 2, 3	Mainly clear, partly cloudy, and overcast
45, 48	Fog and depositing rime fog
51, 53, 55	Drizzle: Light, moderate, and dense intensity
56, 57	Freezing Drizzle: Light and dense intensity
61, 63, 65	Rain: Slight, moderate and heavy intensity
66, 67	Freezing Rain: Light and heavy intensity
71, 73, 75	Snow fall: Slight, moderate, and heavy intensity
77	Snow grains
80, 81, 82	Rain showers: Slight, moderate, and violent
85, 86	Snow showers slight and heavy
95 *	Thunderstorm: Slight or moderate
96, 99 *	Thunderstorm with slight and heavy hail
*/
  var run = function(data){
    //$('#currentWeather .time').text(data.current_weather.time);
    //$('#currentWeather .weather').text(data.current_weather.weathercode);

    $table = $('<table>');
    $('#demo').append($table);

  	var now  = new Date();
  	var year = now.getYear() + 1900;
  	var mon  = now.getMonth() + 1;
  	var date = now.getDate();
  	var week = now.getDay();
  	var hour = now.getHours();

    var hours = [...Array(24)].map((_, i) => i);
    hours = [''].concat(hours);
    console.log(hours);
    $tr = $('<tr>');
    $table.append($tr);
    hours.forEach(function(v, i){
      var $th= $('<th>').text(v);
      $tr.append($th);
      if(i===0){
        $th.append($('h1'));
      }
      if(v===hour){
        $th.addClass('now');
      }

    });

    

    data.hourly.time.forEach(function(v, i){
      if(v.match(/00:00/)){
        $tr = $('<tr>');
        $table.append($tr);
        var date = v.replace('T00:00','');
        var $th= $('<th>').text(date);
        $tr.append($th);
        if(i===0){
          $th.addClass('now');
        }
      }
      var $td= $('<td>');
      var w = data.hourly.weathercode[i];
      var wt = weatherTexts(w);
      var $img = $('<img>',{src:wt.icon,alt:wt.text+'('+w+')'});
      var $i = $('<i>').text(data.hourly.temperature_2m[i]);
      $td.append($img).append($i);
      $tr.append($td);
    });
  }
});

CSS

table{
  width:100%;
}
th,
td{
  border:1px solid #666;
  height:9vh;
  text-align:center;
  vertical-align:middle;
}
td img{
  width:32px;
  height:32px;
}
td i{
  display:block;
}
th.now{
  background-color:rgba(0,0,0,0.2);
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-weather-forecast/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。