プログラミング

外部APIで天気予報表示

最終更新： 07/03/2025
1 分の読み

外部APIを使用して天気予報を表示する方法について、完全かつ包括的に解説します。この方法では、天気予報データをインターネット経由で取得し、ユーザーにリアルタイムの天候情報を提供することができます。以下はそのプロセスと実装方法についての詳細なガイドです。

1. 天気APIとは

天気APIとは、インターネット上で天気情報を提供する外部サービスのことを指します。これらのAPIは、天気データをリクエストすると、リアルタイムの気象情報（気温、湿度、風速、天気の状態など）をJSON形式で返してくれます。これにより、開発者は自分のアプリケーションやウェブサイトに簡単に天気予報機能を統合することができます。

関連記事

2. 天気APIの選択

天気情報を提供するAPIは数多く存在しており、代表的なものには以下のサービスがあります：

  • OpenWeatherMap API: 無料で基本的な天気データを提供しており、詳細な情報が必要な場合は有料プランも利用できます。
  • Weatherstack API: 無料プランでも利用可能で、気温、湿度、降水量、風速などの情報を取得できます。
  • AccuWeather API: 高精度の天気予報を提供するAPIです。無料プランもありますが、商業利用には有料プランが必要です。

ここでは、OpenWeatherMap APIを例にとって説明します。

3. OpenWeatherMap APIの設定

(1) アカウントの作成

まず、OpenWeatherMapの公式サイト（https://openweathermap.org）にアクセスし、アカウントを作成します。アカウント作成後、APIキーを取得します。このAPIキーは、リクエスト時に必要です。

(2) APIリクエストURLの構成

OpenWeatherMap APIを利用して天気情報を取得するには、次のようなURLを使います。

bash
https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=YOUR_API_KEY&units=metric&lang=ja
  • q=Tokyo: ここでは東京の天気を取得しています。都市名を指定します。
  • appid=YOUR_API_KEY: 先ほど取得したAPIキーを入力します。
  • units=metric: 温度の単位を摂氏（°C）で指定します。
  • lang=ja: 日本語で結果を取得するために「ja」を指定します。

(3) APIレスポンスの構造

APIから返されるレスポンスはJSON形式です。以下はその例です。

json
{
  "coord": { "lon": 139.6917, "lat": 35.6895 },
  "weather": [
    { "id": 801, "main": "Clouds", "description": "few clouds", "icon": "02d" }
  ],
  "main": {
    "temp": 21.3,
    "feels_like": 20.7,
    "temp_min": 19.2,
    "temp_max": 22.5,
    "pressure": 1012,
    "humidity": 68
  },
  "wind": { "speed": 3.1, "deg": 250 },
  "clouds": { "all": 23 },
  "dt": 1618326179,
  "sys": { "type": 1, "id": 8007, "country": "JP", "sunrise": 1618307817, "sunset": 1618351980 },
  "timezone": 32400,
  "id": 1850147,
  "name": "Tokyo",
  "cod": 200
}

このJSONレスポンスには、次のような情報が含まれています：

  • main.temp: 現在の気温（摂氏）
  • weather.description: 天気の簡単な説明（例: “少し曇り”）
  • wind.speed: 風速
  • main.humidity: 湿度
  • sys.sunrise と sys.sunset: 日の出と日の入りの時間（Unixタイムスタンプ）

4. 天気データの表示

実際にAPIを呼び出し、そのデータを表示するためのコードを以下に示します。ここでは、JavaScriptとHTMLを使用した基本的な例を紹介します。

HTML

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>天気情報title>
head>
<body>
  <h1>現在の天気h1>
  <div id="weather-info">
    <p>都市: <span id="city">span>p>
    <p>気温: <span id="temp">span>°Cp>
    <p>天気: <span id="weather">span>p>
    <p>風速: <span id="wind">span> m/sp>
  div>
  <script src="script.js">script>
body>
html>

JavaScript (script.js)

javascript
const apiKey = 'YOUR_API_KEY'; // ここにあなたのAPIキーを入れてください
const city = 'Tokyo'; // 取得したい都市名

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ja`)
  .then(response => response.json())
  .then(data => {
    document.getElementById('city').textContent = data.name;
    document.getElementById('temp').textContent = data.main.temp;
    document.getElementById('weather').textContent = data.weather[0].description;
    document.getElementById('wind').textContent = data.wind.speed;
  })
  .catch(error => console.error('天気情報の取得に失敗しました:', error));

5. 実行結果

上記のコードを実行すると、指定した都市（この場合は「Tokyo」）の現在の天気情報がWebページに表示されます。例えば、「気温：21.3°C」や「天気：少し曇り」といった情報がユーザーに提供されます。

6. 注意点

  • APIのリクエストには回数制限があるため、無料プランを使用している場合は、1日のリクエスト回数に注意してください。
  • 地域ごとに異なる天気情報を取得するためには、都市名の他に緯度経度を使ったリクエストも可能です。

まとめ

外部APIを使用して天気予報を表示する方法は非常に簡単で、迅速に実装することができます。OpenWeatherMap APIを利用すれば、気温、天気、風速、湿度など、リアルタイムで気象データを取得し、ユーザーに提供することができます。このような機能を使うことで、天気情報を提供するアプリケーションやウェブサイトを効果的に作成することができます。

最終更新： 07/03/2025
1 分の読み
Back to top button