OpenWetherのAPIを使って天気情報を取得する

2024年4月30日

1 はじめに
2 実施したこと
3 さいごに

はじめに

本記事では、OpenWetherのAPIを使って世界の天気情報を取得する方法について説明していきます。正確には、実際に手を動かしながらやってみます。

OpenWetherのWebサイトはこちら：
https://openweathermap.org

実施したこと

OpenWetherの登録とAPI Keyの取得

APIを利用するにはAPI Keyが必要とのことなので、登録していきます。

https://home.openweathermap.org/users/sign_up

こちらからユーザー名、パスワードを設定していきます。

設定したEmailの確認メールが飛びますので、Verifyしておきましょう。

登録が完了したらAPI keysのページに移動します。

デフォルトで1つKeyが用意されていますが、将来的に用途で分ける可能性を考えて、新しくKeyを作成し、デフォルトのKeyはde-activateしておきました。以下の赤枠が今回のAPI Keyになります。

Next.js環境にMaterial UI環境を用意

Material UIというGoogle提供のUIを使用してみたかったのでインストール。

npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs @emotion/cache

これでGoogleライクなUIのボタンやフォームの使用が可能になります。

Weather APIのテスト

Weather APIはおそらく初心者向けなのでしょうか。。色んな方がTypescriptのコードを実際にWeb上に参考としておいてくれていますので、そちらを参考に。

都市名を指定して直接その土地の天気を取得する方法が見つからなかったため、都市名から緯度(lat)と経度(lon)を取得するGEO APIをコールした後、DATA APIにてその土地の天気情報を取得しました。

以下が実際のコードとなります…が、初心者なのでコードが汚い等はご勘弁下さい。

    // get GEO location
    const res1 = await fetch(`https://api.openweathermap.org/geo/1.0/direct?q=${city}&limit_1&appid=${process.env.NEXT_PUBLIC_WEATHER_API_KEY_GEO}`);
    const data1 = await res1.json();

    // For debug
    // console.log(data1[0].name);
    // console.log(data1[0].lat);
    // console.log(data1[0].lon);

    // get weather info from GEO location
    const res2 = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${data1[0].lat}&lon=${data1[0].lon}&appid=${process.env.NEXT_PUBLIC_WEATHER_API_KEY_WET}`);
    const data2 = await res2.json();

    // For debug
    // console.log(data2);

NEXT_PUBLIC_WEATHER_API_KEY_GEOとNEXT_PUBLIC_WEATHER_API_KEY_WETは実際のKey情報となりますが、env.localファイルに環境変数として設定しています。

でもコレ、開発者ツール上はアクセスしているURLに埋め込まれて見えちゃっているように見えるんですよね。。どうするかは少し悩みます。

UIの設計

何が出来れば良いかと言えば、都市名を入力すればその都市の天気情報が表示出来れば良い、というものであったので、表示に関しては以下のコードを作成しました。

  return (
    <div className={styles.body}>
      <Stack height="100lvh" justifyContent="center" alignItems="center" gap="32px">
      <Typography id="input_variant" variant="h1" fontSize="1.5rem">Please fill in City Name.</Typography>
        <Stack component="form" width={560} gap="24px" aria-labelledby="login_heading">
          <TextField label="City Name" onChange={(e) => {
            setCity(e.target.value);
          }}/>
          <Button variant="contained" onClick={getWeather}>結果表示</Button>
          <Typography id="result_city"    variant="h1" fontSize="1.5rem">City: {city}</Typography>
          <Typography id="result_weather" variant="h1" fontSize="1.5rem">Weather: {weather}</Typography>
        </Stack>
      </Stack>
    </div>
  );

ここでも少し、いやかなりデザインの勉強は必要ですね。。