🔥

openweathermap.orgのAPIを使って天気表示

2023/01/03に公開

HTML

WordPressのプラグインとして天気のプラグインを作ることが出来たらと思い、色々調べました。
そして、下記の記事を参考に、天気の表示部分を作ることができました。
とりあえず天気の表示部分で、記事にまとめたいと思います。

参考にした記事は、こちらです。

openweathermap.orgのサイトは、こちらのリンクから確認できます。
https://openweathermap.org/

登録手順やKEYの取得方法は、上記の記事を参考にしてください。
ただAPIで地域の指定方法が変わっていますので、気を付けてください。

地域名で指定することが非推奨なため、こちらのAPIで地域名を座標に変換されると良いです。

5日間の天気を受信できるAPIは、こちらです。

こちらのAPIをテストできるchromeの拡張機能を使うと楽です。
Talend API Tester - Free Edition

使い方は、こちらが参考になると思います。

福岡の天気を表示したいときに座標を調べたい時は、こちらのAPIの書き方で出来ます。

http://api.openweathermap.org/geo/1.0/direct?q=fukuokashi&limit=5&appid={API KEY}

意図した地域名になるように、調整してください。

福岡市の天気と思っても上記の画像のように、地域が異なって表示されることがあります。

APIの書き方で古い記事しかなく天気の説明が、日本語に変換必要とありました。
でも、下記のように上記の参考にした記事でJPとなっているところをJAと国のコードを入力することで地域名と天気の説明を日本語で得られました。

上記の画像を表示できたコードを、ここに掲載します。

 var item_id = 'lat=35.2932718&lon=139.97671'

の部分で、item_idという変数名は、適宜変えてく使ってください。
ロケーションが分かる名前を変数名にすると、分かりやすいと思います。
上記のlatとlonで始まる値が、座標です。

表示する項目の追加は、私が参考にした記事の項目一覧などを活用されると便利だと思います。
それから、今回5日分の天気の取得なので、曜日は7日分ありますが、表示は5日分です。
また、天気が3時間毎に5日分取得なので、参考にした記事から値を調整しています。
データの数は、40あります。
こちらの画像で、JSONのデータの形式の一部をご紹介します。

下記のコードは、index.htmlとしてファイルを作り実行できます。
一応テンプレートのように使えるように、一部のコードをコメントアウトしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>日本語のタイトル</title>
    <!--
    <link rel="stylesheet" href="/css/style.css" type="text/css">
    <script type="text/javascript" src="/js/main.js"></script>

    -->

  </head>
  <body>
  <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
  <script>

  $(function() {
    var API_KEY = 'ご自身で作ったKEY'
    var item_id = 'lat=35.2932718&lon=139.97671'
    
    var url = 'https://api.openweathermap.org/data/2.5/forecast?' + item_id + '&lang=ja&units=metric&appid=' + API_KEY

    $.ajax({
      url: url,
      dataType: "json",
      type: 'GET',
    })
    .done(function(data) {
      var insertHTML = "";
      var cityName = '<h2>' + data.city.name + '</h2>';
      $('#city-name').html(cityName);
      for (var i = 0; i <= 39; i = i + 8) {
        insertHTML += buildHTML(data, i);
      }
      $('#weather').html(insertHTML);
    })
    .fail(function(data) {
      console.log("失敗しました");
    });
  });

  function buildHTML(data, i) {
    var Week = new Array("（日）","（月）","（火）","（水）","（木）","（金）","（土）");
    var date = new Date (data.list[i].dt_txt);
    date.setHours(date.getHours() + 9);
    var month = date.getMonth()+1;
    var day = month + "月" + date.getDate() + "日" + Week[date.getDay()] + date.getHours() + "：00";
    var icon = data.list[i].weather[0].icon;
    var html =
    '<div class="weather-report">' +
      '<div id="cityname">' + data.city.name + '</div>' +
      '<img src="https://openweathermap.org/img/w/' + icon + '.png">' +
      '<div class="weather-date">' + day + '</div>' +
      '<div class="weather-main">'+ data.list[i].weather[0].description + '</div>' +
      '<div class="weather-temp">' + Math.round(data.list[i].main.temp) + '℃</div>' +
    '</div>';
    return html
  }

  </script>
  <style>
    .content {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .weather-report {
        margin-right: 20px;
        margin-left: 20px;
        float: left;
    }

  </style>   
    <div class="content">
      <div id="weather"></div>

    </div>
 

  </body>
</html>

Discussion